neo.mjs 7.6.0 → 7.8.0

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -1,7 +1,7 @@
 ## Forms include a State-Provider
 
 You do not need to define a state tree on your own.
-It if sufficient to just use namespaces inside the `name` attribute of each field.
+It is sufficient to just use namespaces inside the `name` attribute of each field.
 
 <pre data-neo>
 import Button        from '../button/Base.mjs';

package/resources/data/deck/learnneo/pages/guides/PortalApp.md

@@ -0,0 +1,35 @@
+## Study the Code
+
+As you hopefully have noticed by now, this entire multi-window app is created based on Neo.mjs.
+
+You can learn a lot by studying the code-base carefully:
+<a target="_blank" href="https://github.com/neomjs/neo/tree/dev/apps/portal">Portal App Code</a>
+
+Please give us a heads-up, in case there are specific topics which you would like to see
+getting covered here.
+
+## Easter Eggs
+
+Every good app needs to have some meaningful Easter eggs.
+
+### Examples: Resort TabHeaderButtons via Drag&Drop
+
+Did you notice that you can resort the Tabs inside <a href="#/examples">Examples</a>?
+
+After re-sorting, the routing and the tab.Strip animations will still work. Enjoy!
+
+### Switch the main navigation layout to an animated Cube
+
+Fair warning: this animated layout does require some advanced GPU processing power.
+At the moment, it performs best using Firefox.
+
+The setting will get stored inside the LocalStorage,
+so you will need to click the following Button a 2nd time to deactivate it again.
+Or you can clear the LocalStorage manually.</br></br>
+
+<pre data-neo-component>
+{
+    "className": "Portal.view.learn.CubeLayoutButton",
+    "style"    : {"margin": 0}
+}
+</pre>

package/resources/data/deck/learnneo/tree.json

@@ -32,6 +32,7 @@
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
             {"name": "Custom Events",                       "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
             {"name": "DOM Events",                          "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
+        {"name": "Portal App",                              "parentId": "InDepth",                            "id": "guides.PortalApp"},
         {"name": "Tables (Stores)",                         "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
         {"name": "Multi-Window Applications",               "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
         {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},

package/resources/scss/src/apps/colors/TableContainer.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $base-color: #1c60a0;
 
 .colors-table-container.neo-table-container {
@@ -8,39 +10,39 @@ $base-color: #1c60a0;
     }
 
     .color-2 {
-        background-color: lighten($base-color, 5%);
+        background-color: color.adjust($base-color, $lightness: 5%);
     }
 
     .color-3 {
-        background-color: lighten($base-color, 10%);
+        background-color: color.adjust($base-color, $lightness: 10%);
     }
 
     .color-4 {
-        background-color: lighten($base-color, 15%);
+        background-color: color.adjust($base-color, $lightness: 15%);
     }
 
     .color-5 {
-        background-color: lighten($base-color, 20%);
+        background-color: color.adjust($base-color, $lightness: 20%);
     }
 
     .color-6 {
-        background-color: lighten($base-color, 25%);
+        background-color: color.adjust($base-color, $lightness: 25%);
     }
 
     .color-7 {
-        background-color: lighten($base-color, 30%);
+        background-color: color.adjust($base-color, $lightness: 30%);
     }
 
     .color-8 {
-        background-color: lighten($base-color, 35%);
+        background-color: color.adjust($base-color, $lightness: 35%);
     }
 
     .color-9 {
-        background-color: lighten($base-color, 40%);
+        background-color: color.adjust($base-color, $lightness: 40%);
     }
 
     .color-10 {
-        background-color: lighten($base-color, 45%);
+        background-color: color.adjust($base-color, $lightness: 45%);
     }
 
     .neo-index-column {

package/resources/scss/src/apps/portal/blog/List.scss

@@ -14,6 +14,7 @@
     transition: padding var(--portal-transition-duration) ease-out;
 
     .neo-list-item {
+        box-shadow  : 0 5px 10px rgba(0, 0, 0, 0.3);
         cursor      : default;
         display     : flex;
         margin-left : auto;

package/resources/scss/src/apps/portal/examples/List.scss

@@ -14,6 +14,7 @@
     transition: padding var(--portal-transition-duration) ease-out;
 
     .neo-list-item {
+        box-shadow  : 0 5px 10px rgba(0, 0, 0, 0.3);
         cursor      : default;
         display     : flex;
         max-width   : 800px;

package/resources/scss/src/apps/portal/services/Component.scss

@@ -4,14 +4,13 @@
     padding         : 0.1em 6em 1em 6em;
 
     .info-block {
-        background-color: lighten(#8BA6FF, 10%);
-        border-radius   : 8px;
-        box-shadow      : 0 3px 6px rgba(0, 0, 0, 0.3);
-        margin-left     : auto;
-        margin-right    : auto;
-        margin-top      : 2em;
-        max-width       : 800px;
-        padding         : 0.5em 3em 1em 3em;
+        border      : 1px solid var(--sem-color-border-default);
+        box-shadow  : 0 3px 6px rgba(0, 0, 0, 0.3);
+        margin-left : auto;
+        margin-right: auto;
+        margin-top  : 2em;
+        max-width   : 800px;
+        padding     : 0.5em 3em 1em 3em;
     }
 
     h1 {

package/resources/scss/theme-dark/apps/docs/classdetails/MembersList.scss

@@ -1,9 +1,11 @@
+@use "sass:color";
+
 :root .neo-theme-dark { // .docs-classhierarchy-memberslist
     --docs-classhierarchy-memberslist-background-color : #282b2b;
     --docs-memberlist-group-header-background-color    : #33343d;
     --docs-memberlist-group-header-color               : #bbb;
     --docs-param-table-list-item-background-color      : #323232;
-    --docs-param-table-list-item-background-image      : linear-gradient(#{lighten(#323232, 2%)}, #323232);
+    --docs-param-table-list-item-background-image      : linear-gradient(#{color.adjust(#323232, $lightness: 2%)}, #323232);
     --docs-param-table-list-item-header-background-clip: text;
     --docs-param-table-list-item-header-text-shadow    : 2px 2px 3px rgba(200,200,200,0.1);
     --docs-param-table-list-item-highlight-search-color: #ccc;

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

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $background-color: #3c3f41;
 $border-color    : #2b2b2b;
 $border-style    : solid;
@@ -32,7 +34,7 @@ $text-color      : #bbb;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);
     --button-outline-active                     : none;
     --button-padding                            : 5px 12px 5px 12px;
-    --button-ripple-background-color            : #{darken(#5d83a7, 10%)};
+    --button-ripple-background-color            : #{color.adjust(#5d83a7, $lightness: -10%)};
     --button-text-color                         : #{$text-color};
     --button-text-color-active                  : #{$text-color};
     --button-text-color-disabled                : #{$text-color};

package/resources/scss/theme-dark/list/Base.scss

@@ -1,9 +1,11 @@
+@use "sass:color";
+
 :root .neo-theme-dark { // .neo-list-container
     --list-container-background-color     : #33343d;
     --list-container-border               : 1px solid #282829;
     --list-container-list-color           : #bbb;
     --list-item-background-color          : #33343d;
-    --list-item-background-color-hover    : #{lighten(#33343d, 10%)};
+    --list-item-background-color-hover    : #{color.adjust(#33343d, $lightness: 10%)};
     --list-item-background-color-selected : #5a7082;
     --list-item-color-selected            : #2b2b2b;
     --list-item-focus-outline             : 1px solid #f6d199;

package/resources/scss/theme-dark/table/header/Button.scss

@@ -1,7 +1,9 @@
+@use "sass:color";
+
 :root .neo-theme-dark { // .neo-table-header
     --table-header-button-background-color       : #323232;
     --table-header-button-background-image       : linear-gradient(#3c3f41, #323232);
     --table-header-button-color                  : #bbb;
     --table-header-button-glyph-color            : #bbb;
-    --table-header-button-ripple-background-color: #{darken(#5d83a7, 10%)};
+    --table-header-button-ripple-background-color: #{color.adjust(#5d83a7, $lightness: -10%)};
 }

package/resources/scss/theme-dark/tree/List.scss

@@ -1,4 +1,6 @@
+@use "sass:color";
+
 :root .neo-theme-dark { // .neo-tree-list
     --tree-list-color          : #bbb;
-    --tree-list-menu-item-color: #{lighten(#33343d, 20%)};
+    --tree-list-menu-item-color: #{color.adjust(#33343d, $lightness: 20%)};
 }

package/resources/scss/theme-light/apps/covid/HeaderContainer.scss

@@ -1,10 +1,12 @@
+@use "sass:color";
+
 :root .neo-theme-light { // .covid-header-container
     --covid-header-active-background-color   : rgba(100, 181, 246, .65);
-    --covid-header-active-color              : #{darken(#64b5f6, 20%)};
+    --covid-header-active-color              : #{color.adjust(#64b5f6, $lightness: -20%)};
     --covid-header-cases-background-color    : rgba(187, 187, 187, .65);
-    --covid-header-cases-color               : #{darken(#bbb, 30%)};
+    --covid-header-cases-color               : #{color.adjust(#bbb, $lightness: -30%)};
     --covid-header-deaths-background-color   : rgba(251, 103, 103, .65);
-    --covid-header-deaths-color              : #{darken(#fb6767, 20%)};
+    --covid-header-deaths-color              : #{color.adjust(#fb6767, $lightness: -20%)};
     --covid-header-recovered-background-color: rgba( 40, 218, 111, .65);
-    --covid-header-recovered-color           : #{darken(#28ca68, 20%)};
+    --covid-header-recovered-color           : #{color.adjust(#28ca68, $lightness: -20%)};
 }

package/resources/scss/theme-light/apps/docs/classdetails/MembersList.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 :root .neo-theme-light { // .docs-classhierarchy-memberslist
     --docs-classhierarchy-memberslist-background-color : #bbb;
     --docs-memberlist-group-header-background-color    : steelblue;
@@ -8,7 +10,7 @@
     --docs-param-table-list-item-header-text-shadow    : none;
     --docs-param-table-list-item-highlight-search-color: red;
     --docs-param-table-source-link-color               : #bbb;
-    --docs-param-table-source-link-color-hover         : #{darken(#1c60a0, 10%)};
+    --docs-param-table-source-link-color-hover         : #{color.adjust(#1c60a0, $lightness: -10%)};
     --docs-param-table-thead-background-color          : slategray;
     --docs-param-table-thead-background-image          : none;
     --docs-param-table-tr-background-clip              : none;

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

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $background-color: #fff;
 $border-color    : #ddd;
 $border-style    : solid;
@@ -31,7 +33,7 @@ $text-color      : #1c60a0;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);
     --button-outline-active                     : none;
     --button-padding                            : 5px 12px 5px 12px;
-    --button-ripple-background-color            : #{lighten($text-color, 50%)};
+    --button-ripple-background-color            : #{color.adjust($text-color, $lightness: 50%)};
     --button-text-color                         : #{$text-color};
     --button-text-color-active                  : #{$text-color};
     --button-text-color-disabled                : #{$text-color};

package/resources/scss/theme-light/grid/View.scss

@@ -1,13 +1,15 @@
+@use "sass:color";
+
 :root .neo-theme-light { // .neo-grid-view
-    --grid-cell-background-color-hover                    : #{lighten(#33343d, 70%)};
-    --grid-cellmodel-selected-cell-background-color       : #{lighten(#64B5F6, 22%)};
+    --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --grid-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
-    --grid-cellmodel-selected-column-cell-background-color: #{lighten(#4f558a, 52%)};
+    --grid-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --grid-cellmodel-selected-column-cell-color           : #2b2b2b;
-    --grid-cellrowmodel-selected-cell-background-color    : #{lighten(#64B5F6, 22%)};
+    --grid-cellrowmodel-selected-cell-background-color    : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellrowmodel-selected-cell-color               : #2b2b2b;
-    --grid-cellrowmodel-selected-row-cell-background-color: #{lighten(#4f558a, 52%)};
+    --grid-cellrowmodel-selected-row-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --grid-cellrowmodel-selected-row-cell-color           : #2b2b2b;
-    --grid-rowmodel-selected-cell-background-color        : #{lighten(#64B5F6, 22%)};
+    --grid-rowmodel-selected-cell-background-color        : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-rowmodel-selected-cell-color                   : #2b2b2b;
 }

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

@@ -1,14 +1,16 @@
+@use "sass:color";
+
 :root .neo-theme-light { // .neo-list-container
     --list-container-background-color     : #fff;
     --list-container-border               : 0;
-    --list-container-list-color           : #{lighten(#33343d, 20%)};
+    --list-container-list-color           : #{color.adjust(#33343d, $lightness: 20%)};
     --list-item-background-color          : #fff;
-    --list-item-background-color-hover    : #{lighten(#33343d, 70%)};
-    --list-item-background-color-selected : #{lighten(#64B5F6, 22%)};
+    --list-item-background-color-hover    : #{color.adjust(#33343d, $lightness: 70%)};
+    --list-item-background-color-selected : #{color.adjust(#64B5F6, $lightness: 22%)};
     --list-item-color-selected            : #2b2b2b;
     --list-item-focus-outline             : 1px solid darkorange;
     --list-item-focus-outline-offset      : -1px;
-    --list-item-glyph-color               : #{lighten(#33343d, 20%)};
+    --list-item-glyph-color               : #{color.adjust(#33343d, $lightness: 20%)};
     --list-item-highlight-search-color    : red;
     --list-item-padding                   : 5px;
 }

package/resources/scss/theme-light/table/View.scss

@@ -1,13 +1,15 @@
+@use "sass:color";
+
 :root .neo-theme-light { // .neo-table-view
-    --table-cell-background-color-hover                    : #{lighten(#33343d, 70%)};
-    --table-cellmodel-selected-cell-background-color       : #{lighten(#64B5F6, 22%)};
+    --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --table-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
-    --table-cellmodel-selected-column-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --table-cellmodel-selected-column-cell-color           : #2b2b2b;
-    --table-cellrowmodel-selected-cell-background-color    : #{lighten(#64B5F6, 22%)};
+    --table-cellrowmodel-selected-cell-background-color    : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellrowmodel-selected-cell-color               : #2b2b2b;
-    --table-cellrowmodel-selected-row-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellrowmodel-selected-row-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --table-cellrowmodel-selected-row-cell-color           : #2b2b2b;
-    --table-rowmodel-selected-cell-background-color        : #{lighten(#64B5F6, 22%)};
+    --table-rowmodel-selected-cell-background-color        : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-rowmodel-selected-cell-color                   : #2b2b2b;
 }

package/resources/scss/theme-light/table/header/Button.scss

@@ -1,7 +1,9 @@
+@use "sass:color";
+
 :root .neo-theme-light { // .neo-table-header-button
     --table-header-button-background-color       : #5d83a7;
     --table-header-button-background-image       : none;
     --table-header-button-color                  : #fff;
     --table-header-button-glyph-color            : #fff;
-    --table-header-button-ripple-background-color: #{darken(#5d83a7, 10%)};
+    --table-header-button-ripple-background-color: #{color.adjust(#5d83a7, $lightness: -10%)};
 }

package/resources/scss/theme-neo-light/apps/covid/HeaderContainer.scss

@@ -1,10 +1,12 @@
+@use "sass:color";
+
 :root .neo-theme-neo-light { // .covid-header-container
     --covid-header-active-background-color   : rgba(100, 181, 246, .65);
-    --covid-header-active-color              : #{darken(#64b5f6, 20%)};
+    --covid-header-active-color              : #{color.adjust(#64b5f6, $lightness: -20%)};
     --covid-header-cases-background-color    : rgba(187, 187, 187, .65);
-    --covid-header-cases-color               : #{darken(#bbb, 30%)};
+    --covid-header-cases-color               : #{color.adjust(#bbb, $lightness: -30%)};
     --covid-header-deaths-background-color   : rgba(251, 103, 103, .65);
-    --covid-header-deaths-color              : #{darken(#fb6767, 20%)};
+    --covid-header-deaths-color              : #{color.adjust(#fb6767, $lightness: -20%)};
     --covid-header-recovered-background-color: rgba( 40, 218, 111, .65);
-    --covid-header-recovered-color           : #{darken(#28ca68, 20%)};
+    --covid-header-recovered-color           : #{color.adjust(#28ca68, $lightness: -20%)};
 }

package/resources/scss/theme-neo-light/apps/docs/classdetails/MembersList.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 :root .neo-theme-neo-light { // .docs-classhierarchy-memberslist
     --docs-classhierarchy-memberslist-background-color : #bbb;
     --docs-memberlist-group-header-background-color    : steelblue;
@@ -8,7 +10,7 @@
     --docs-param-table-list-item-header-text-shadow    : none;
     --docs-param-table-list-item-highlight-search-color: red;
     --docs-param-table-source-link-color               : #bbb;
-    --docs-param-table-source-link-color-hover         : #{darken(#1c60a0, 10%)};
+    --docs-param-table-source-link-color-hover         : #{color.adjust(#1c60a0, $lightness: -10%)};
     --docs-param-table-thead-background-color          : slategray;
     --docs-param-table-thead-background-image          : none;
     --docs-param-table-tr-background-clip              : none;

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

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 :root .neo-theme-neo-light {
     --black                        : #000000;
     --borderradius-0               : 0px;
@@ -28,16 +30,16 @@
     --gray-700                     : #454B42;
     --gray-800                     : #292D28;
     --gray-900                     : #0E0F0D;
-    --green-100                    : #{lighten(#29F5AA, 70%)};
-    --green-200                    : #{lighten(#29F5AA, 50%)};
-    --green-300                    : #{lighten(#29F5AA, 20%)};
-    --green-400                    : #{lighten(#29F5AA, 10%)};
-    --green-50                     : #{lighten(#29F5AA, 85%)};
+    --green-100                    : #{color.adjust(#29F5AA, $lightness: 70%)};
+    --green-200                    : #{color.adjust(#29F5AA, $lightness: 50%)};
+    --green-300                    : #{color.adjust(#29F5AA, $lightness: 20%)};
+    --green-400                    : #{color.adjust(#29F5AA, $lightness: 10%)};
+    --green-50                     : #{color.adjust(#29F5AA, $lightness: 85%)};
     --green-500                    : #29F5AA;
-    --green-600                    : #{darken(#29F5AA, 10%)};
-    --green-700                    : #{darken(#29F5AA, 20%)};
-    --green-800                    : #{darken(#29F5AA, 40%)};
-    --green-900                    : #{darken(#29F5AA, 60%)};
+    --green-600                    : #{color.adjust(#29F5AA, $lightness: -10%)};
+    --green-700                    : #{color.adjust(#29F5AA, $lightness: -20%)};
+    --green-800                    : #{color.adjust(#29F5AA, $lightness: -40%)};
+    --green-900                    : #{color.adjust(#29F5AA, $lightness: -60%)};
     --height-16                    : 16px;
     --height-2                     : 2px;
     --height-24                    : 24px;

package/resources/scss/theme-neo-light/grid/View.scss

@@ -1,13 +1,15 @@
+@use "sass:color";
+
 :root .neo-theme-neo-light { // .neo-grid-view
-    --grid-cell-background-color-hover                    : #{lighten(#33343d, 70%)};
-    --grid-cellmodel-selected-cell-background-color       : #{lighten(#64B5F6, 22%)};
+    --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --grid-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
-    --grid-cellmodel-selected-column-cell-background-color: #{lighten(#4f558a, 52%)};
+    --grid-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --grid-cellmodel-selected-column-cell-color           : #2b2b2b;
-    --grid-cellrowmodel-selected-cell-background-color    : #{lighten(#64B5F6, 22%)};
+    --grid-cellrowmodel-selected-cell-background-color    : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellrowmodel-selected-cell-color               : #2b2b2b;
-    --grid-cellrowmodel-selected-row-cell-background-color: #{lighten(#4f558a, 52%)};
+    --grid-cellrowmodel-selected-row-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --grid-cellrowmodel-selected-row-cell-color           : #2b2b2b;
-    --grid-rowmodel-selected-cell-background-color        : #{lighten(#64B5F6, 22%)};
+    --grid-rowmodel-selected-cell-background-color        : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-rowmodel-selected-cell-color                   : #2b2b2b;
 }

package/resources/scss/theme-neo-light/table/View.scss

@@ -1,13 +1,15 @@
+@use "sass:color";
+
 :root .neo-theme-neo-light { // .neo-table-view
-    --table-cell-background-color-hover                    : #{lighten(#33343d, 70%)};
-    --table-cellmodel-selected-cell-background-color       : #{lighten(#64B5F6, 22%)};
+    --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --table-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
-    --table-cellmodel-selected-column-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --table-cellmodel-selected-column-cell-color           : #2b2b2b;
-    --table-cellrowmodel-selected-cell-background-color    : #{lighten(#64B5F6, 22%)};
+    --table-cellrowmodel-selected-cell-background-color    : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellrowmodel-selected-cell-color               : #2b2b2b;
-    --table-cellrowmodel-selected-row-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellrowmodel-selected-row-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};
     --table-cellrowmodel-selected-row-cell-color           : #2b2b2b;
-    --table-rowmodel-selected-cell-background-color        : #{lighten(#64B5F6, 22%)};
+    --table-rowmodel-selected-cell-background-color        : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-rowmodel-selected-cell-color                   : #2b2b2b;
 }

package/resources/scss/theme-neo-light/table/header/Button.scss

@@ -1,7 +1,9 @@
+@use "sass:color";
+
 :root .neo-theme-neo-light { // .neo-table-header-button
     --table-header-button-background-color       : #5d83a7;
     --table-header-button-background-image       : none;
     --table-header-button-color                  : #fff;
     --table-header-button-glyph-color            : #fff;
-    --table-header-button-ripple-background-color: #{darken(#5d83a7, 10%)};
+    --table-header-button-ripple-background-color: #{color.adjust(#5d83a7, $lightness: -10%)};
 }

package/src/DefaultConfig.mjs

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

package/src/collection/Base.mjs

@@ -990,12 +990,13 @@ class Base extends CoreBase {
     }
 
     /**
-     * Helper method to check if a given value is either an object or a neo data record
+     * Helper method to check if a given input is either object-like or a key
      * @param {*} value
-     * @returns {Boolean}
+     * @returns {Boolean} returns true for object-like values
      */
     isItem(value) {
-        return Neo.isObject(value) || Neo.isRecord(value)
+        // We can not use Neo.isObject() || Neo.isRecord(), since collections can store neo instances too.
+        return typeof value === 'object'
     }
 
     /**

package/src/container/Base.mjs

@@ -87,7 +87,10 @@ class Base extends Component {
          */
         items_: [],
         /**
-         * @member {Object} layout_={ntype: 'vbox', align: 'stretch'}
+         * It is crucial to define a layout before the container does get rendered.
+         * Meaning: onConstructed() is the latest life-cycle point.
+         * You can use layout: 'base', in case you do not need a layout at all.
+         * @member {Object|String|null} layout_={ntype: 'vbox', align: 'stretch'}
          */
         layout_: {
             ntype: 'vbox',
@@ -135,7 +138,7 @@ class Base extends Component {
     }
 
     /**
-     * @param {Neo.layout.Base} value
+     * @param {Neo.layout.Base|null} value
      * @param {Neo.layout.Base|null} oldValue
      * @protected
      */
@@ -144,15 +147,15 @@ class Base extends Component {
 
         if (me.rendered) {
             oldValue?.removeRenderAttributes();
-            value.applyRenderAttributes();
+            value?.applyRenderAttributes();
 
             me.items.forEach((item, index) => {
                 oldValue?.removeChildAttributes(item, index);
-                value.applyChildAttributes(item, index)
-            });
-
-            oldValue?.destroy()
+                value?.applyChildAttributes(item, index)
+            })
         }
+
+        oldValue?.destroy?.()
     }
 
     /**
@@ -419,6 +422,8 @@ class Base extends Component {
      * @param {Boolean} [silent=false] true to update the vdom silently (useful for destroying multiple child items in a row)
      */
     destroy(updateParentVdom=false, silent=false) {
+        this.layout?.destroy();
+
         this.items?.forEach(item => {
             item.destroy?.(false, true)
         });

package/src/draggable/DragProxyComponent.mjs

@@ -25,9 +25,9 @@ class DragProxyComponent extends Base {
          */
         autoRender: true,
         /**
-         * @member {String[]} cls=['neo-dragproxy']
+         * @member {String[]} baseCls=['neo-dragproxy']
          */
-        cls: ['neo-dragproxy'],
+        baseCls: ['neo-dragproxy'],
         /**
          * @member {Boolean} moveInMainThread=true
          */
@@ -35,28 +35,18 @@ class DragProxyComponent extends Base {
     }
 
     /**
-     * @param {Object} config
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
      */
-    construct(config) {
-        super.construct(config);
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
 
-        let me = this;
-
-        me.on('mounted', me.onMounted, me)
-    }
-
-    /**
-     * @param {String} id
-     */
-    onMounted(id) {
-        if (this.moveInMainThread) {
+        if (value && this.moveInMainThread) {
             let {appName, id, windowId} = this;
 
-            Neo.main.addon.DragDrop.setDragProxyElement({
-                appName,
-                id,
-                windowId
-            })
+            Neo.main.addon.DragDrop.setDragProxyElement({appName, id, windowId})
         }
     }
 }