neo.mjs 5.1.5 → 5.1.7

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/neomjs-logo-250.png">
+  <img height="250" width="250" src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/logo_rounded.svg">
 </p>
 
 <p align="center">

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/button/base/MainContainer.mjs

@@ -13,7 +13,6 @@ import TextField             from '../../../src/form/field/Text.mjs';
 class MainContainer extends ConfigurationViewport {
     static config = {
         className           : 'Neo.examples.button.base.MainContainer',
-        autoMount           : true,
         configItemLabelWidth: 160,
         configItemWidth     : 280,
         layout              : {ntype: 'hbox', align: 'stretch'}

package/examples/button/split/MainContainer.mjs

@@ -1,7 +1,8 @@
-import SplitButton           from '../../../src/button/Split.mjs';
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
+import SplitButton           from '../../../src/button/Split.mjs';
 import TextField             from '../../../src/form/field/Text.mjs';
 
 /**
@@ -11,9 +12,8 @@ import TextField             from '../../../src/form/field/Text.mjs';
 class MainContainer extends ConfigurationViewport {
     static config = {
         className           : 'Neo.examples.button.split.MainContainer',
-        autoMount           : true,
-        configItemLabelWidth: 110,
-        configItemWidth     : 230,
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
         layout              : {ntype: 'hbox', align: 'stretch'}
     }
 
@@ -29,10 +29,17 @@ class MainContainer extends ConfigurationViewport {
             minValue  : 30,
             stepSize  : 5,
             value     : me.exampleComponent.height
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.hideTriggerButton,
+            labelText: 'hideTriggerButton',
+            listeners: {change: me.onConfigChange.bind(me, 'hideTriggerButton')},
+            style    : {marginTop: '10px'}
         }, {
             module    :  TextField, // todo: selectField with options
             labelText : 'iconCls',
             listeners : {change: me.onConfigChange.bind(me, 'iconCls')},
+            style     : {marginTop: '10px'},
             value     : me.exampleComponent.iconCls
         }, {
             module    :  TextField, // todo: colorPickerField

package/examples/dialog/DemoDialog.mjs

@@ -7,6 +7,7 @@ import Dialog from '../../src/dialog/Base.mjs';
 class DemoDialog extends Dialog {
     static config = {
         className: 'Neo.examples.dialog.DemoWindow',
+        title    : 'My Dialog',
 
         wrapperStyle: {
             height: '40%',

package/examples/toolbar/breadcrumb/view/MainContainer.mjs

@@ -1,6 +1,6 @@
-import BreadcrumbToolbar from '../../../../src/toolbar/Breadcrumb.mjs';
-import Store             from '../../../../src/data/Store.mjs';
-import Viewport          from '../../../../src/container/Viewport.mjs';
+import BreadcrumbToolbar       from '../../../../src/toolbar/Breadcrumb.mjs';
+import MainContainerController from './MainContainerController.mjs';
+import Viewport                from '../../../../src/container/Viewport.mjs';
 
 /**
  * @class Neo.examples.toolbar.breadcrumb.view.MainContainer
@@ -13,6 +13,10 @@ class MainContainer extends Viewport {
          * @protected
          */
         className: 'Neo.examples.toolbar.breadcrumb.view.MainContainer',
+        /**
+         * @member {Neo.controller.Component} controller=MainContainerController
+         */
+        controller: MainContainerController,
         /**
          * @member {Object[]} items
          */
@@ -20,38 +24,86 @@ class MainContainer extends Viewport {
             module   : BreadcrumbToolbar,
             activeKey: 2,
             flex     : 'none',
+            reference: 'breadcrumb-toolbar',
 
             store: {
-                module: Store,
-
-                model: {
-                    fields: [{
-                        name: 'id',
-                        type: 'Integer'
-                    }, {
-                        name: 'name',
-                        type: 'String'
-                    }, {
-                        name: 'parentId',
-                        type: 'Integer'
-                    }, {
-                        name: 'route',
-                        type: 'String'
-                    }]
-                },
-
                 data: [
-                    {id: 1, name: 'Home',          parentId: null, route: '/home/'},
-                    {id: 2, name: 'Accessibility', parentId: 1,    route: '/home/accessibility/'},
-                    {id: 3, name: 'Imprint',       parentId: 1,    route: '/home/imprint/'},
-                    {id: 4, name: 'News',          parentId: 1,    route: '/home/news/'},
+                    {id: 1,  name: 'Home',          parentId: null, route: '/home/'},
+                    {id: 2,  name: 'Accessibility', parentId: 1,    route: '/home/accessibility/'},
+                    {id: 3,  name: 'Imprint',       parentId: 1,    route: '/home/imprint/'},
+                    {id: 4,  name: 'News',          parentId: 1,    route: '/home/news/'},
+                    {id: 5,  name: 'Forms',         parentId: null, route: '/forms/'},
+                    {id: 6,  name: 'Form 1',        parentId: 5,    route: '/forms/form1/'},
+                    {id: 7,  name: 'Page 1',        parentId: 6,    route: '/forms/form1/page1/'},
+                    {id: 8,  name: 'Page 2',        parentId: 6,    route: '/forms/form1/page2/'},
+                    {id: 9,  name: 'Form 2',        parentId: 5,    route: '/forms/form2/'},
+                    {id: 10, name: 'Page 1',        parentId: 9,    route: '/forms/form2/page1/'},
+                    {id: 11, name: 'Page 2',        parentId: 9,    route: '/forms/form2/page2/'}
                 ]
             }
+        }, {
+            ntype: 'label',
+            style: {marginTop: '40px'},
+            text : 'Navigate to'
+        }, {
+            ntype : 'toolbar',
+            flex  : 'none',
+            layout: {ntype: 'vbox', align: 'start'},
+
+            itemDefaults: {
+                ntype  : 'button',
+                handler: 'onActiveKeyButtonClick',
+                style  : {marginTop: '10px'}
+            },
+
+            items: [{
+                activeKey: 1,
+                text     : 'Home'
+            }, {
+                activeKey: 2,
+                style    : {marginLeft: '20px', marginTop: '10px'},
+                text     : 'Accessibility'
+            }, {
+                activeKey: 3,
+                style    : {marginLeft: '20px', marginTop: '10px'},
+                text     : 'Imprint'
+            }, {
+                activeKey: 4,
+                style    : {marginLeft: '20px', marginTop: '10px'},
+                text     : 'News'
+            }, {
+                activeKey: 5,
+                text     : 'Forms'
+            }, {
+                activeKey: 6,
+                style    : {marginLeft: '20px', marginTop: '10px'},
+                text     : 'Form 1'
+            }, {
+                activeKey: 7,
+                style    : {marginLeft: '40px', marginTop: '10px'},
+                text     : 'Page 1'
+            }, {
+                activeKey: 8,
+                style    : {marginLeft: '40px', marginTop: '10px'},
+                text     : 'Page 2'
+            }, {
+                activeKey: 9,
+                style    : {marginLeft: '20px', marginTop: '10px'},
+                text     : 'Form 2'
+            }, {
+                activeKey: 10,
+                style    : {marginLeft: '40px', marginTop: '10px'},
+                text     : 'Page 1'
+            }, {
+                activeKey: 11,
+                style    : {marginLeft: '40px', marginTop: '10px'},
+                text     : 'Page 2'
+            }]
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
          */
-        layout: {ntype: 'vbox', align: 'stretch'},
+        layout: {ntype: 'vbox', align: 'start'},
         /**
          * @member {Object} style={padding:'20px'}
          */

package/examples/toolbar/breadcrumb/view/MainContainerController.mjs

@@ -0,0 +1,26 @@
+import Controller from '../../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.toolbar.breadcrumb.view.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends Controller {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.toolbar.breadcrumb.view.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.breadcrumb.view.MainContainerController'
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onActiveKeyButtonClick(data) {
+        this.getReference('breadcrumb-toolbar').activeKey = data.component.activeKey;
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/tree/MainContainer.mjs

@@ -121,7 +121,7 @@ class MainContainer extends ConfigurationViewport {
      * @param {Object} opts
      */
     onLeafNodesOnlyChange(opts) {
-        let dragZone = this.exampleComponent.dragZone;
+        let dragZone = this.exampleComponent.down({module: ApiTreeList}).dragZone;
 
         if (dragZone) {
             dragZone.leafNodesOnly = opts.value;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.1.5",
+    "version": "5.1.7",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -41,7 +41,7 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^6.2.1",
+        "@fortawesome/fontawesome-free": "^6.3.0",
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
         "autoprefixer": "^10.4.13",

package/resources/scss/src/button/Split.scss

@@ -8,9 +8,9 @@
         border : none;
         margin : 0;
         padding: .5em;
+    }
 
-        &:last-child {
-            border-left: v(button-border-width) solid v(button-border-color);
-        }
+    .neo-trigger-button {
+        border-left: v(button-border-width) solid v(button-border-color);
     }
 }

package/resources/scss/src/calendar/view/YearComponent.scss

@@ -56,7 +56,7 @@
 
             &:before {
                 color      : v(dateselector-nav-button-color);
-                font-family: "Font Awesome 5 Free";
+                font-family: var(--fa-style-family-classic);
                 font-weight: 900;
                 transition : color 150ms cubic-bezier(0.4, 0, 0.2, 1);
             }

package/resources/scss/src/component/DateSelector.scss

@@ -185,7 +185,7 @@
 
             &:before {
                 color      : v(dateselector-nav-button-color);
-                font-family: "Font Awesome 5 Free";
+                font-family: var(--fa-style-family-classic);
                 font-size  : 18px;
                 font-weight: 900;
                 transition : color 150ms cubic-bezier(0.4, 0, 0.2, 1);

package/resources/scss/src/dialog/Base.scss

@@ -60,10 +60,6 @@
             border       : none;
             border-bottom: 1px solid v(dialog-border-color);
 
-            &.neo-draggable {
-                cursor: move;
-            }
-
             .neo-button {
                 border      : 0;
                 margin-right: 0.3em;
@@ -81,12 +77,18 @@
 
             .neo-panel-header-text {
                 color         : v(dialog-header-color);
+                overflow      : hidden;
                 pointer-events: none;
+                text-overflow : ellipsis;
                 user-drag     : none; // not supported yet
                 user-select   : none;
 
                 -webkit-user-drag: none;
             }
+
+            &.neo-draggable {
+                cursor: move;
+            }
         }
     }
 }

package/resources/scss/src/form/field/Search.scss

@@ -3,7 +3,7 @@
         color      : v(searchfield-glyph-color);
         content    : "\f002";
         display    : inline-block;
-        font-family: "Font Awesome 5 Free";
+        font-family: var(--fa-style-family-classic);
         font-size  : 14px;
         font-weight: 900;
         padding    : 7px;
@@ -16,4 +16,4 @@
             padding-left: 25px;
         }
     }
-}
+}

package/resources/scss/src/form/field/Select.scss

@@ -19,7 +19,6 @@
             border-color: transparent;
             color       : v(selectfield-input-hint-color);
             font        : v(textfield-input-font);
-            min-height  : 25px;
             opacity     : v(selectfield-input-hint-opacity);
         }
     }

package/resources/scss/src/form/field/trigger/Base.scss

@@ -4,6 +4,7 @@
     color          : v(trigger-color);
     cursor         : pointer;
     display        : flex;
+    flex-shrink    : 0;
     font-size      : 14px;
     height         : v(textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
     justify-content: center;

package/resources/scss/src/form/field/trigger/Clear.scss

@@ -16,4 +16,4 @@
         border-left-color: transparent;
         width            : 0;
     }
-}
+}

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

@@ -20,7 +20,7 @@
             color      : v(list-item-glyph-color);
             content    : "\f0c8";
             display    : inline-block;
-            font-family: "Font Awesome 5 Free";
+            font-family: var(--fa-style-family-classic);
             width      : 25px;
         }
 

package/resources/scss/src/plugin/Resizable.scss

@@ -6,7 +6,7 @@
     align-items    : center;
     color          : #bbb;
     display        : flex;
-    font-family    : "Font Awesome 5 Free";
+    font-family    : var(--fa-style-family-classic);
     font-weight    : 600;
     height         : 10px;
     justify-content: center;
@@ -110,4 +110,4 @@
             transform: rotate(270deg);
         }
     }
-}
+}

package/resources/scss/src/toolbar/Breadcrumb.scss

@@ -7,7 +7,7 @@
                 color       : v(button-text-color);
                 content     : "\f105";
                 display     : block;
-                font-family : "Font Awesome 5 Free";
+                font-family : var(--fa-style-family-classic);
                 font-weight : 600;
                 position    : absolute;
                 right       : -20px;

package/resources/scss/src/tree/List.scss

@@ -48,7 +48,7 @@
             color      : v(list-item-glyph-color); // todo: tree-list var
             content    : "\f1f9";
             display    : inline-block;
-            font-family: "Font Awesome 5 Free";
+            font-family: var(--fa-style-family-classic);
             font-weight: 900;
             width      : 25px;
         }
@@ -75,7 +75,7 @@
         .neo-treelist-menu-item-content:before {
             color      : v(tree-list-menu-item-color);
             display    : inline-block;
-            font-family: "Font Awesome 5 Free";
+            font-family: var(--fa-style-family-classic);
             font-weight: 900;
             width      : 25px;
         }

package/resources/scss/theme-dark/form/field/CheckBox.scss

@@ -1,7 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'checkboxfield-color'           : #eee,
     'checkboxfield-color-checked'   : #64B5F6,
-    'checkboxfield-icon-font-family': '"Font Awesome 5 Free"',
+    'checkboxfield-icon-font-family': var(--fa-style-family-classic),
     'checkboxfield-icon-font-size'  : 14px,
     'checkboxfield-label-top-margin': 0 0 3px
 ));

package/resources/scss/theme-light/button/Base.scss

@@ -30,7 +30,7 @@ $neoMap: map-merge($neoMap, (
     'button-text-color'                         : #1c60a0,
     'button-text-color-active'                  : #1c60a0,
     'button-text-color-disabled'                : #1c60a0,
-    'button-text-color-hover'                   : #bbb,
+    'button-text-color-hover'                   : #1c60a0,
     'button-text-font-family'                   : #{neo(neo-font-family)},
     'button-text-font-size'                     : 11px,
     'button-text-font-weight'                   : 600,

package/resources/scss/theme-light/form/field/CheckBox.scss

@@ -1,7 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'checkboxfield-color'           : #aaa,
     'checkboxfield-color-checked'   : #1c60a0,
-    'checkboxfield-icon-font-family': '"Font Awesome 5 Free"',
+    'checkboxfield-icon-font-family': var(--fa-style-family-classic),
     'checkboxfield-icon-font-size'  : 14px,
     'checkboxfield-label-top-margin': 0 0 3px
 ));

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -52,7 +52,7 @@ Neo = globalThis.Neo = Object.assign({
             ntypeMap = Neo.ntypeMap,
             proto    = cls.prototype || cls,
             protos   = [],
-            cfg, config, ctor, overrides;
+            cfg, config, ctor, ntype;
 
         while (proto.__proto__) {
             ctor = proto.constructor;
@@ -74,7 +74,7 @@ Neo = globalThis.Neo = Object.assign({
             ctor = element.constructor;
 
             cfg = ctor.config || {};
-            
+
             if (Neo.overwrites) {
                 ctor.applyOverwrites(cfg);
             }
@@ -99,11 +99,15 @@ Neo = globalThis.Neo = Object.assign({
             });
 
             if (Object.hasOwn(cfg, 'ntype')) {
-                if (Object.hasOwn(ntypeMap, cfg.ntype)) {
-                    throw new Error(`ntype conflict for '${cfg.ntype}' inside the classes:\n${ntypeMap[cfg.ntype]}\n${cfg.className}`);
+                ntype = cfg.ntype;
+
+                // Running the docs app inside a workspace can pull in the same classes from different roots,
+                // so we want to check for different class names as well
+                if (Object.hasOwn(ntypeMap, ntype) && cfg.className !== ntypeMap[ntype]) {
+                    throw new Error(`ntype conflict for '${ntype}' inside the classes:\n${ntypeMap[ntype]}\n${cfg.className}`);
                 }
 
-                ntypeMap[cfg.ntype] = cfg.className;
+                ntypeMap[ntype] = cfg.className;
             }
 
             mixins = Object.hasOwn(config, 'mixins') && config.mixins || [];
@@ -396,7 +400,7 @@ Neo = globalThis.Neo = Object.assign({
      *
      * @memberOf module:Neo
      * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} [create] Set create to true to create empty objects for non existing parts
+     * @param {Boolean} [create] Set create to true to create empty objects for non-existing parts
      * @param {Object} [scope] Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */

package/src/button/Split.mjs

@@ -18,6 +18,10 @@ class Split extends Button {
          * @protected
          */
         ntype: 'split-button',
+        /**
+         * @member {Boolean} hideTriggerButton_=false
+         */
+        hideTriggerButton_: false,
         /**
          * Read only, it will get created inside the ctor.
          * Use triggerButtonConfig to pass initial config for it.
@@ -63,11 +67,14 @@ class Split extends Button {
         me.triggerButton = Neo.create({
             module  : Button,
             appName : me.appName,
+            cls     : ['neo-trigger-button'],
             disabled: me.disabled,
             handler : me.splitButtonHandler,
+            hidden  : me.hideTriggerButton,
             iconCls : me.triggerButtonIconCls,
-            parentId: me.id,
+            parentId: me.vdom.id, // wrapper id
             pressed : me.pressed,
+            ui      : me.ui,
             ...me.triggerButtonConfig
         });
 
@@ -75,6 +82,20 @@ class Split extends Button {
         me.update();
     }
 
+    /**
+     * Triggered after the appName config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetAppName(value, oldValue) {
+        if (this.triggerButton) {
+            this.triggerButton.appName = value;
+        }
+
+        super.afterSetAppName(value, oldValue);
+    }
+
     /**
      * Triggered after the disabled config got changed
      * @param {Boolean} value
@@ -82,15 +103,42 @@ class Split extends Button {
      * @protected
      */
     afterSetDisabled(value, oldValue) {
-        let me = this;
+        let triggerButton = this.triggerButton;
 
-        if (me.triggerButton) {
-            me.triggerButton.disabled = value;
+        if (triggerButton) {
+            triggerButton.disabled = value;
         }
 
         super.afterSetDisabled(value, oldValue);
     }
 
+    /**
+     * Triggered after the id config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetId(value, oldValue) {
+        this.vdom.id = value + '__wrapper';
+
+        // silent vdom update, the super call will trigger the engine
+        super.afterSetId(value, oldValue);
+    }
+
+    /**
+     * Triggered after the hideTriggerButton config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetHideTriggerButton(value, oldValue) {
+        let triggerButton = this.triggerButton;
+
+        if (triggerButton) {
+            triggerButton.hidden = value;
+        }
+    }
+
     /**
      * Triggered after the pressed config got changed
      * @param {Boolean} value
@@ -98,10 +146,10 @@ class Split extends Button {
      * @protected
      */
     afterSetPressed(value, oldValue) {
-        let me = this;
+        let triggerButton = this.triggerButton;
 
-        if (me.triggerButton) {
-            me.triggerButton.pressed = value;
+        if (triggerButton) {
+            triggerButton.pressed = value;
         }
 
         super.afterSetPressed(value, oldValue);
@@ -114,11 +162,27 @@ class Split extends Button {
      * @protected
      */
     afterSetTriggerButtonIconCls(value, oldValue) {
-        if (this.triggerButton) {
-            this.triggerButton.iconCls = value;
+        let triggerButton = this.triggerButton;
+
+        if (triggerButton) {
+            triggerButton.iconCls = value;
         }
     }
 
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetUi(value, oldValue) {
+        let triggerButton = this.triggerButton;
+
+        if (triggerButton) {
+            triggerButton.ui = value;
+        }
+
+        super.afterSetUi(value, oldValue);
+    }
+
     /**
      * @param {Boolean} [updateParentVdom=false]
      * @param {Boolean} [silent=false]

package/src/component/Base.mjs

@@ -252,6 +252,12 @@ class Base extends CoreBase {
          * @protected
          */
         rendering_: false,
+        /**
+         * Specify a role tag attribute for the vdom root.
+         * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+         * @member {String|null} role_=null
+         */
+        role_: null,
         /**
          * Set this to true for bulk updates.
          * Ensure to set it back to false afterwards.
@@ -625,6 +631,16 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the role config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetRole(value, oldValue) {
+        this.changeVdomRootKey('role', value);
+    }
+
     /**
      * Triggered after the style config got changed
      * @param {Object} value
@@ -1643,11 +1659,11 @@ class Base extends CoreBase {
         let me = this;
 
         if (me.hideMode !== 'visibility') {
-            me.vdom.removeDom = false;
-            me.update();
+            delete me.vdom.removeDom;
+            !me.silentVdomUpdate && me.render(true);
         } else {
             let style = me.style;
-            style.visibility = 'visible';
+            delete style.visibility;
             me.style = style;
         }
 

package/src/component/Toast.mjs

@@ -1,6 +1,6 @@
 import Base         from '../component/Base.mjs';
-import ToastManager from '../manager/Toast.mjs';
 import NeoArray     from "../util/Array.mjs";
+import ToastManager from '../manager/Toast.mjs';
 
 /**
  * @class Neo.component.Toast
@@ -21,18 +21,6 @@ import NeoArray     from "../util/Array.mjs";
         })
  */
 class Toast extends Base {
-    /**
-     * Used by the ToastManager
-     * @member {Boolean} running=false
-     * @private
-     */
-    running = false
-    /**
-     * Timeout in ms after which the toast is removed
-     * @member {Number} timeout=3000
-     */
-    timeout = 3000
-
     /**
      * Valid values for positions
      * @member {String[]} positions = ['tl','tc','tr','bl','bc','br']
@@ -122,6 +110,18 @@ class Toast extends Base {
         }]}
     }
 
+    /**
+     * Used by the ToastManager
+     * @member {Boolean} running=false
+     * @private
+     */
+    running = false
+    /**
+     * Timeout in ms after which the toast is removed
+     * @member {Number} timeout=3000
+     */
+    timeout = 3000
+
     /**
      * @param {Object} config
      */

package/src/dialog/Base.mjs

@@ -113,9 +113,9 @@ class Base extends Panel {
          */
         resizablePluginConfig: null,
         /**
-         * @member {String} title='Dialog Title'
+         * @member {String|null} title_=null
          */
-        title: 'Dialog Title',
+        title_: null,
         /**
          * @member {Object} _vdom
          */
@@ -268,6 +268,18 @@ class Base extends Panel {
         });
     }
 
+    /**
+     * Triggered after the title config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetTitle(value, oldValue) {
+        if (this.headerToolbar) {
+            this.headerToolbar.title = value;
+        }
+    }
+
     /**
      *
      */
@@ -419,7 +431,12 @@ class Base extends Panel {
             maximize: me.maximize
         };
 
-        map[data.action].call(me, data);
+        map[data.action]?.call(me, data);
+
+        me.fire('headerAction', {
+            dialog: me,
+            ...data
+        })
     }
 
     /**

package/src/dialog/header/Toolbar.mjs

@@ -47,7 +47,7 @@ class Toolbar extends Base {
      * @protected
      */
     afterSetTitle(value, oldValue) {
-        oldValue && this.down({flag: 'title-label'})?.set({
+        this.down({flag: 'title-label'})?.set({
             removeDom: !value,
             text     : value
         })

package/src/form/field/Picker.mjs

@@ -79,6 +79,11 @@ class Picker extends Text {
          * @member {Number|null} pickerWidth=100
          */
         pickerWidth: 100,
+        /**
+         * @member {Boolean} showPickerOnFocus=false
+         * @protected
+         */
+        showPickerOnFocus: false,
         /**
          * @member {Object|Object[]} triggers=[]
          * @protected
@@ -168,7 +173,7 @@ class Picker extends Text {
             id       : me.getPickerId(),
             items    : pickerComponent ? [pickerComponent] : [],
             maxHeight: me.pickerMaxHeight,
-            vdom     : {cn: [], tabIndex: -1},
+            vdom     : {cn: [], 'aria-activedescendant': me.id, tabIndex: -1},
             width    : me.pickerWidth,
             ...me.pickerConfig,
 
@@ -258,6 +263,18 @@ class Picker extends Text {
         me.pickerIsMounted = false;
     }
 
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    onFocusEnter(data) {
+        super.onFocusEnter(data);
+
+        let me = this;
+
+        me.showPickerOnFocus && !me.pickerIsMounted && me.getClientRectsThenShow();
+    }
+
     /**
      * @param {Object} data
      * @protected

package/src/form/field/Select.mjs

@@ -82,6 +82,10 @@ class Select extends Picker {
          * @protected
          */
         record: null,
+        /**
+         * @member {String|null} role='listbox'
+         */
+        role: 'listbox',
         /**
          * @member {Neo.data.Store|null} store_=null
          */
@@ -128,6 +132,7 @@ class Select extends Picker {
             module        : List,
             appName       : me.appName,
             displayField  : me.displayField,
+            itemRole      : 'option',
             parentId      : me.id,
             selectionModel: {stayInList: false},
             store         : me.store,
@@ -361,6 +366,21 @@ class Select extends Picker {
         return me.record?.[me.valueField] || me.value
     }
 
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    handleKeyDownEnter(data) {
+        let me = this;
+
+        if (me.pickerIsMounted) {
+            me.selectListItem();
+            super.onKeyDownEnter(data)
+        } else {
+            super.onKeyDownEnter(data, me.selectListItem)
+        }
+    }
+
     /**
      * @param {Object} data
      * @protected
@@ -406,7 +426,7 @@ class Select extends Picker {
      * @protected
      */
     onKeyDownDown(data) {
-        this.onKeyDownEnter(data)
+        this.handleKeyDownEnter(data)
     }
 
     /**
@@ -414,14 +434,7 @@ class Select extends Picker {
      * @protected
      */
     onKeyDownEnter(data) {
-        let me = this;
-
-        if (me.pickerIsMounted) {
-            me.selectListItem();
-            super.onKeyDownEnter(data)
-        } else {
-            super.onKeyDownEnter(data, me.selectListItem)
-        }
+        this.handleKeyDownEnter(data);
     }
 
     /**

package/src/list/Base.mjs

@@ -132,6 +132,11 @@ class Base extends Component {
         {tag: 'ul', cn: []}
     }
 
+    /**
+     * @member {String|null} itemRole=null
+     */
+    itemRole = null
+
     /**
      * @param {Object} config
      */
@@ -370,6 +375,10 @@ class Base extends Component {
             tabIndex: -1
         };
 
+        if (me.itemRole) {
+            item.role = me.itemRole;
+        }
+
         switch (Neo.typeOf(itemContent)) {
             case null: {
                 return null;
@@ -545,7 +554,7 @@ class Base extends Component {
         let itemId   = vnodeId.split('__')[1],
             model    = this.store.model,
             keyField = model?.getField(model.keyProperty),
-            keyType  = keyField?.type.toLowerCase();
+            keyType  = keyField?.type?.toLowerCase();
 
         if (keyType === 'integer' || keyType === 'number') {
             itemId = parseInt(itemId);

package/src/toolbar/Base.mjs

@@ -11,10 +11,10 @@ import NeoArray  from '../util/Array.mjs';
 class Base extends Container {
     /**
      * Valid values for dock
-     * @member {String[]} dockPositions=['top','right','bottom','left']
+     * @member {String[]} dockPositions=['top','right','bottom','left', null]
      * @static
      */
-    static dockPositions = ['top', 'right', 'bottom', 'left']
+    static dockPositions = ['top', 'right', 'bottom', 'left', null]
 
     static config = {
         /**
@@ -32,9 +32,9 @@ class Base extends Container {
          */
         baseCls: ['neo-toolbar'],
         /**
-         * @member {String} dock_='top'
+         * @member {String|null} dock_=null
          */
-        dock_: 'top',
+        dock_: null,
         /**
          * @member {Object} itemDefaults={ntype:'button'}
          */
@@ -42,9 +42,9 @@ class Base extends Container {
             ntype: 'button'
         },
         /**
-         * @member {Object} _layout={ntype: 'hbox', align: 'center', pack : 'start'}
+         * @member {Object} layout={ntype: 'hbox', align: 'center', pack : 'start'}
          */
-        _layout: {
+        layout: {
             ntype: 'hbox',
             align: 'center',
             pack : 'start'
@@ -89,7 +89,7 @@ class Base extends Container {
             dockPositions = me.getStaticConfig('dockPositions');
 
         dockPositions.forEach(key => {
-            NeoArray[key === value ? 'add' : 'remove'](cls, 'neo-dock-' + key);
+            key !== null && NeoArray[key === value ? 'add' : 'remove'](cls, 'neo-dock-' + key);
         });
 
         me.cls    = cls;
@@ -154,36 +154,39 @@ class Base extends Container {
      * @returns {Object} layoutConfig
      */
     getLayoutConfig() {
-        let layoutConfig;
-
-        switch(this.dock) {
-            case 'bottom':
-            case 'top':
-                layoutConfig = {
-                    ntype: 'hbox',
-                    align: 'center',
-                    pack : 'start'
-                };
-                break;
-            case 'left':
-                layoutConfig = {
-                    ntype    : 'vbox',
-                    align    : 'center',
-                    direction: 'column-reverse',
-                    pack     : 'start'
-                };
-                break;
-            case 'right':
-                layoutConfig = {
-                    ntype    : 'vbox',
-                    align    : 'center',
-                    direction: 'column',
-                    pack     : 'start'
-                };
-                break;
+        let me = this,
+            layoutConfig;
+
+        if (me.dock) {
+            switch(me.dock) {
+                case 'bottom':
+                case 'top':
+                    layoutConfig = {
+                        ntype: 'hbox',
+                        align: 'center',
+                        pack : 'start'
+                    };
+                    break;
+                case 'left':
+                    layoutConfig = {
+                        ntype    : 'vbox',
+                        align    : 'center',
+                        direction: 'column-reverse',
+                        pack     : 'start'
+                    };
+                    break;
+                case 'right':
+                    layoutConfig = {
+                        ntype    : 'vbox',
+                        align    : 'center',
+                        direction: 'column',
+                        pack     : 'start'
+                    };
+                    break;
+            }
         }
 
-        return layoutConfig;
+        return layoutConfig || me.layout;
     }
 }
 

package/src/toolbar/Breadcrumb.mjs

@@ -1,4 +1,5 @@
 import ClassSystemUtil from '../util/ClassSystem.mjs';
+import HashHistory     from '../util/HashHistory.mjs';
 import Store           from '../data/Store.mjs';
 import Toolbar         from '../toolbar/Base.mjs';
 
@@ -18,24 +19,58 @@ class Breadcrumb extends Toolbar {
          * @protected
          */
         ntype: 'breadcrumb-toolbar',
-        /**
-         * @member {String[]} baseCls=['neo-breadcrumb-toolbar','neo-toolbar']
-         */
-        baseCls: ['neo-breadcrumb-toolbar', 'neo-toolbar'],
         /**
          * @member {Number|String|null} activeKey_=null
          */
         activeKey_: null,
         /**
-         * @member {Object[]} items
+         * @member {String[]} baseCls=['neo-breadcrumb-toolbar','neo-toolbar']
          */
-        items: [],
+        baseCls: ['neo-breadcrumb-toolbar', 'neo-toolbar'],
         /**
          * @member {Neo.data.Store|Object} store_=null
          */
         store_: null
     }
 
+    /**
+     * @member {Object} defaultStoreConfig
+     */
+    defaultStoreConfig = {
+        module: Store,
+
+        model: {
+            fields: [{
+                name: 'id',
+                type: 'Integer'
+            }, {
+                name: 'name',
+                type: 'String'
+            }, {
+                name: 'parentId',
+                type: 'Integer'
+            }, {
+                name: 'route',
+                type: 'String'
+            }]
+        }
+    }
+    /**
+     * @member {Boolean} updateOnHashChange=true
+     */
+    updateOnHashChange = true
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.updateOnHashChange && HashHistory.on('change', me.onHashChange, me);
+    }
+
     /**
      * Triggered after the activeKey config got changed
      * @param {Number|String|null} value
@@ -43,7 +78,16 @@ class Breadcrumb extends Toolbar {
      * @protected
      */
     afterSetActiveKey(value, oldValue) {
-        this.store.getCount?.() > 0 && this.updateItems()
+        let me = this,
+            route;
+
+        if (value !== null && me.store.getCount?.() > 0) {
+            me.updateItems();
+
+            route = me.store.get(value)?.route;
+
+            route && Neo.Main.setRoute({value: route})
+        }
     }
 
     /**
@@ -53,14 +97,10 @@ class Breadcrumb extends Toolbar {
      * @protected
      */
     afterSetStore(value, oldValue) {
-        let me = this;
-
         value.on({
-            load: this.onStoreLoad,
-            scope: me
-        });
-
-        value?.getCount() > 0 && me.onStoreLoad(value.items)
+            load : this.onStoreLoad,
+            scope: this
+        })
     }
 
     /**
@@ -72,7 +112,18 @@ class Breadcrumb extends Toolbar {
      */
     beforeSetStore(value, oldValue) {
         oldValue?.destroy();
-        return ClassSystemUtil.beforeSetInstance(value, Store);
+        return ClassSystemUtil.beforeSetInstance(value, null, this.defaultStoreConfig);
+    }
+
+    /**
+     *
+     */
+    destroy(...args) {
+        let me = this;
+
+        me.updateOnHashChange && HashHistory.un('change', me.onHashChange, me);
+
+        super.destroy(...args);
     }
 
     /**
@@ -95,11 +146,25 @@ class Breadcrumb extends Toolbar {
         return items;
     }
 
+    /**
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    onHashChange(value, oldValue) {
+        let hashString = value?.hashString,
+            store      = this.store,
+            activeKey  = hashString && store.findFirst({route: hashString})?.[store.keyProperty];
+
+        if (activeKey !== null) {
+            this.activeKey = activeKey;
+        }
+    }
+
     /**
      * @param {Object[]} items
      */
     onStoreLoad(items) {
-        this.activeKey !== null && this.updateItems()
+       this.afterSetActiveKey(this.activeKey, null);
     }
 
     /**
@@ -114,23 +179,39 @@ class Breadcrumb extends Toolbar {
             newItems  = [],
             config, item
 
+        me.silentVdomUpdate = true;
+
         for (; i < len; i++) {
             item = pathItems[i];
 
             config = {
+                disabled : i === len - 1,
                 editRoute: false,
+                hidden   : false,
                 route    : item.route,
                 text     : item.name
             };
 
             if (items[i]) {
-                items[i].set(config);
+                items[i].setSilent(config)
             } else {
-                newItems.push(config);
+                newItems.push(config)
             }
         }
 
+        len = items.length;
+
+        for (; i < len; i++) {
+            items[i].setSilent({
+                hidden: true
+            })
+        }
+
         newItems.length > 0 && me.add(newItems);
+
+        me.silentVdomUpdate = false;
+
+        me.update()
     }
 }
 

package/src/util/HashHistory.mjs

@@ -61,13 +61,15 @@ class HashHistory extends Base {
         let me    = this,
             stack = me.stack;
 
-        stack.unshift(data);
+        if (stack[0]?.hashString !== data.hashString) {
+            stack.unshift(data);
 
-        if (stack.length > me.maxItems) {
-            stack.pop();
-        }
+            if (stack.length > me.maxItems) {
+                stack.pop();
+            }
 
-        me.fire('change', data, stack[1] || null);
+            me.fire('change', data, stack[1] || null)
+        }
     }
 }