neo.mjs 10.0.0-alpha.5 → 10.0.0-beta.2

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='10.0.0-alpha.5'
+         * @member {String} version='10.0.0-beta.2'
          */
-        version: '10.0.0-alpha.5'
+        version: '10.0.0-beta.2'
     }
 
     /**

package/apps/colors/view/GridContainer.mjs

@@ -81,7 +81,7 @@ class GridContainer extends BaseGridContainer {
      * @returns {Object}
      */
     colorRenderer({value}) {
-        return {cls: ['color-' + value], html: ' '}
+        return {cls: ['color-' + value], text: ' '}
     }
 }
 

package/apps/covid/view/AttributionComponent.mjs

@@ -21,7 +21,7 @@ class AttributionComponent extends Component {
          */
         vdom:
         {style: {margin: '20px'}, cn: [
-            {tag: 'h2', html: 'Attribution'},
+            {tag: 'h2', text: 'Attribution'},
             {tag: 'ul', cn: [
                 {tag: 'li', html: 'The logos were created by <a target="_blank" href="https://www.driefmeier.com/">Sebastian Driefmeier</a>. Thank you!'},
                 {tag: 'li', html: ['The logos are based on the image from <a target="_blank" href="https://phil.cdc.gov/Details.aspx?pid=23312">CDC Public Health Image Library (PHIL)</a>,</br>',

package/apps/covid/view/HeaderContainer.mjs

@@ -55,25 +55,25 @@ class HeaderContainer extends Container {
                 items: [{
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'cases'],  html:'Cases'},
+                        {cls: ['covid-numberbox-title',  'cases'],  text:'Cases'},
                         {cls: ['covid-numberbox-number', 'cases']}
                     ]}
                 }, {
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'active'], html:'Active'},
+                        {cls: ['covid-numberbox-title',  'active'], text:'Active'},
                         {cls: ['covid-numberbox-number', 'active']}
                     ]}
                 }, {
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'recovered'], html:'Recovered'},
+                        {cls: ['covid-numberbox-title',  'recovered'], text:'Recovered'},
                         {cls: ['covid-numberbox-number', 'recovered']}
                     ]}
                 }, {
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'deaths'], html:'Deaths'},
+                        {cls: ['covid-numberbox-title',  'deaths'], text:'Deaths'},
                         {cls: ['covid-numberbox-number', 'deaths']}
                     ]}
                 }, {
@@ -89,7 +89,7 @@ class HeaderContainer extends Container {
                             'data-show-count': 'true',
                             'data-size'      : 'large',
                             href             : 'https://github.com/neomjs/neo',
-                            html             : 'Star'
+                            text             : 'Star'
                         }]
                     }
                 }, {
@@ -103,7 +103,7 @@ class HeaderContainer extends Container {
                             'data-icon'      : 'octicon-heart',
                             'data-size'      : 'large',
                             href             : 'https://github.com/sponsors/tobiu',
-                            html             : 'Sponsor'
+                            text             : 'Sponsor'
                         }]
                     }
                 }]

package/apps/covid/view/MainContainerController.mjs

@@ -131,10 +131,10 @@ class MainContainerController extends ComponentController {
 
         me.summaryData = data;
 
-        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});
-        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});
-        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered});
-        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});
+        container.items[0].vdom.cn[1].text = Util.formatNumber({value: data.cases});
+        container.items[1].vdom.cn[1].text = Util.formatNumber({value: data.active});
+        container.items[2].vdom.cn[1].text = Util.formatNumber({value: data.recovered});
+        container.items[3].vdom.cn[1].text = Util.formatNumber({value: data.deaths});
 
         container.updateDepth = 2;
         container.update();
@@ -142,7 +142,7 @@ class MainContainerController extends ComponentController {
         container = me.getReference('last-update');
         vdom      = container.vdom;
 
-        vdom.html = 'Last Update: ' + new Intl.DateTimeFormat('default', {
+        vdom.text = 'Last Update: ' + new Intl.DateTimeFormat('default', {
             hour  : 'numeric',
             minute: 'numeric',
             second: 'numeric'

package/apps/covid/view/TableContainerController.mjs

@@ -224,7 +224,7 @@ class TableContainerController extends ComponentController {
 
         me.loadHistoricalData(record?.countryInfo?.iso2 || 'all');
 
-        me.getReference('historical-data-label').html = 'Historical Data (' + (record?.country || 'World') + ')';
+        me.getReference('historical-data-label').text = 'Historical Data (' + (record?.country || 'World') + ')';
     }
 
     /**

package/apps/covid/view/country/Gallery.mjs

@@ -45,24 +45,24 @@ class CountryGallery extends Gallery {
                     ]},
                     {tag: 'table', cls: ['neo-content-table'], cn: [
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Cases'},
+                            {tag: 'td', text: 'Cases'},
                             {tag: 'td', cls: ['neo-align-right']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Cases today'},
+                            {tag: 'td', text: 'Cases today'},
                             {tag: 'td', cls: ['neo-align-right']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Deaths'},
+                            {tag: 'td', text: 'Deaths'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Deaths today'},
+                            {tag: 'td', text: 'Deaths today'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Recovered'},
+                            {tag: 'td', text: 'Recovered'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Critical'},
+                            {tag: 'td', text: 'Critical'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
                         ]}
                     ]}
@@ -127,15 +127,15 @@ class CountryGallery extends Gallery {
         firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
-        firstChild.cn[0].cn[1].html = record.country;
+        firstChild.cn[0].cn[1].text = record.country;
 
-        table.cn[0].cn[1].html = fN({value: record.cases});
-        table.cn[1].cn[1].html = fN({value: record.deaths});
-        table.cn[2].cn[1].html = fN({value: record.recovered});
+        table.cn[0].cn[1].text = fN({value: record.cases});
+        table.cn[1].cn[1].text = fN({value: record.deaths});
+        table.cn[2].cn[1].text = fN({value: record.recovered});
 
-        table.cn[0].cn[4].html = fN({value: record.todayCases});
-        table.cn[1].cn[4].html = fN({value: record.todayDeaths});
-        table.cn[2].cn[4].html = fN({value: record.critical});
+        table.cn[0].cn[4].text = fN({value: record.todayCases});
+        table.cn[1].cn[4].text = fN({value: record.todayDeaths});
+        table.cn[2].cn[4].text = fN({value: record.critical});
 
         return vdomItem;
     }

package/apps/covid/view/country/Helix.mjs

@@ -45,24 +45,24 @@ class CountryHelix extends Helix {
                     ]},
                     {tag: 'table', cls: ['neo-content-table'], cn: [
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Cases'},
+                            {tag: 'td', text: 'Cases'},
                             {tag: 'td', cls: ['neo-align-right']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Cases today'},
+                            {tag: 'td', text: 'Cases today'},
                             {tag: 'td', cls: ['neo-align-right']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Deaths'},
+                            {tag: 'td', text: 'Deaths'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Deaths today'},
+                            {tag: 'td', text: 'Deaths today'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Recovered'},
+                            {tag: 'td', text: 'Recovered'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Critical'},
+                            {tag: 'td', text: 'Critical'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
                         ]}
                     ]}
@@ -138,15 +138,15 @@ class CountryHelix extends Helix {
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
-        firstChild.cn[0].cn[1].html = record.country;
+        firstChild.cn[0].cn[1].text = record.country;
 
-        table.cn[0].cn[1].html = fN({value: record.cases});
-        table.cn[1].cn[1].html = fN({value: record.deaths});
-        table.cn[2].cn[1].html = fN({value: record.recovered});
+        table.cn[0].cn[1].text = fN({value: record.cases});
+        table.cn[1].cn[1].text = fN({value: record.deaths});
+        table.cn[2].cn[1].text = fN({value: record.recovered});
 
-        table.cn[0].cn[4].html = fN({value: record.todayCases});
-        table.cn[1].cn[4].html = fN({value: record.todayDeaths});
-        table.cn[2].cn[4].html = fN({value: record.critical});
+        table.cn[0].cn[4].text = fN({value: record.todayCases});
+        table.cn[1].cn[4].text = fN({value: record.todayDeaths});
+        table.cn[2].cn[4].text = fN({value: record.critical});
 
         return vdomItem;
     }

package/apps/covid/view/country/HistoricalDataTable.mjs

@@ -38,7 +38,7 @@ class HistoricalDataTable extends Container {
             renderer : function(data) {
                 return {
                     cls : ['neo-date-column', 'neo-table-cell'],
-                    html: new Intl.DateTimeFormat('default', {
+                    text: new Intl.DateTimeFormat('default', {
                         day  : 'numeric',
                         month: 'numeric',
                         year : 'numeric'

package/apps/email/view/Viewport.mjs

@@ -42,13 +42,13 @@ class Viewport extends BaseViewport {
                     iconCls: 'fa fa-home',
                     text   : 'Tab 1'
                 },
-                vdom: {html: 'Welcome to your new Neo App.'}
+                text: 'Welcome to your new Neo App.'
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text   : 'Tab 2'
                 },
-                vdom: {html: 'Have fun creating something awesome!'}
+                text: 'Have fun creating something awesome!'
             }]
         }]
     }

package/apps/form/view/SideNavList.mjs

@@ -36,7 +36,7 @@ class SideNavList extends List {
 
         return record.isHeader ? itemText : [
             {tag: 'i', cls: this.getIconCls(record)},
-            {html: itemText}
+            {text: itemText}
         ];
     }
 

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-24",
+      "datePublished": "2025-06-30",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/resources/data/examples_devmode.json

@@ -1,144 +1,143 @@
 [{
     "id"          : 25,
     "environments": ["Desktop", "Mobile"],
-    "image"       : "devmode/liquid-glass.png",
-    "name"        : "Liquid Glass effect",
-    "sourceUrl"   : "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
-    "url"         : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/apps/myapp/index.html"
-}, {
-    "id"          : 24,
-    "environments": ["Desktop", "Mobile"],
     "image"       : "devmode/bigData.png",
     "name"        : "Buffered Data Grid with 5M cells",
     "sourceUrl"   : "examples/grid/bigData",
     "url"         : "examples/grid/bigData/index.html"
 }, {
-    "id"           : 23,
+    "id"           : 24,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 22,
+    "id"       : 23,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "examples/calendar/basic/index.html"
 }, {
-    "id"       : 21,
+    "id"       : 22,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "examples/component/helix/index.html"
 }, {
-    "id"           : 20,
+    "id"           : 21,
     "image"        : "devmode/mwCoronaGallery.png",
     "name"         : "Multi Window Covid Gallery",
     "sharedWorkers": true,
     "sourceUrl"    : "examples/component/multiWindowCoronaGallery",
     "url"          : "examples/component/multiWindowCoronaGallery/index.html"
 }, {
-    "id"       : 19,
+    "id"       : 20,
     "image"    : "devmode/offscreenCanvas.png",
     "name"     : "OffscreenCanvas",
     "sourceUrl": "https://github.com/neomjs/offscreen-canvas/",
     "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/apps/myapp/index.html"
 }, {
-    "id"           : 18,
+    "id"           : 19,
     "image"        : "devmode/sharedOffscreenCanvas.png",
     "name"         : "Multi-Window OffscreenCanvas",
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "sharedWorkers": true,
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/apps/mainapp/index.html"
 }, {
-    "id"           : 17,
+    "id"           : 18,
     "image"        : "devmode/multi_window_dd.png",
     "name"         : "Multi-Window Drag&Drop",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/shareddialog",
     "url"          : "apps/shareddialog/index.html"
 }, {
-    "id"       : 16,
+    "id"       : 17,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "examples/tab/container/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 16,
     "image"    : "devmode/model-component-example.png",
     "name"     : "State Provider Example",
     "sourceUrl": "examples/stateProvider/advanced",
     "url"      : "examples/stateProvider/advanced/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 15,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "examples/dialog/"
 }, {
-    "id"           : 13,
+    "id"           : 14,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "apps/colors/index.html"
 }, {
-    "id"       : 12,
+    "id"       : 13,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "apps/covid/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 12,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/coronaGallery.png",
     "name"     : "COVID-19 Gallery",
     "sourceUrl": "examples/component/coronaGallery",
     "url"      : "examples/component/coronaGallery/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "examples/component/gallery/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 9,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "examples/tableFiltering/"
 }, {
-    "id"       : 7,
+    "id"       : 8,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "examples/component/dateSelector/index.html"
 }, {
-    "id"       : 6,
+    "id"       : 7,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "examples/form/field/date/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 6,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "examples/form/field/combobox/index.html"
 }, {
-    "id"           : 4,
+    "id"           : 5,
     "environments" : ["Desktop", "Mobile"],
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/portal",
     "url"          : "apps/portal/index.html"
+}, {
+    "id"       : 4,
+    "image"    : "devmode/liquid-glass.png",
+    "name"     : "Liquid Glass effect",
+    "sourceUrl": "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
+    "url"      : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/apps/myapp/index.html"
 }, {
     "id"       : 3,
     "image"    : "devmode/siesta.png",

package/apps/portal/resources/data/examples_dist_dev.json

@@ -1,144 +1,143 @@
 [{
     "id"          : 24,
     "environments": ["Desktop", "Mobile"],
-    "image"       : "devmode/liquid-glass.png",
-    "name"        : "Liquid Glass effect",
-    "sourceUrl"   : "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
-    "url"         : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/dist/development/apps/myapp/index.html"
-}, {
-    "id"          : 23,
-    "environments": ["Desktop", "Mobile"],
     "image"       : "devmode/bigData.png",
     "name"        : "Buffered Data Grid with 5M cells",
     "sourceUrl"   : "examples/grid/bigData",
     "url"         : "dist/development/examples/grid/bigData/index.html"
 }, {
-    "id"           : 22,
+    "id"           : 23,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "dist/development/apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 21,
+    "id"       : 22,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "dist/development/examples/calendar/basic/index.html"
 }, {
-    "id"       : 20,
+    "id"       : 21,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "dist/development/examples/component/helix/index.html"
 }, {
-    "id"           : 19,
+    "id"           : 20,
     "image"        : "devmode/mwCoronaGallery.png",
     "name"         : "Multi Window Covid Gallery",
     "sharedWorkers": true,
     "sourceUrl"    : "examples/component/multiWindowCoronaGallery",
     "url"          : "dist/development/examples/component/multiWindowCoronaGallery/index.html"
 }, {
-    "id"       : 18,
+    "id"       : 19,
     "image"    : "devmode/offscreenCanvas.png",
     "name"     : "OffscreenCanvas",
     "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
     "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/development/apps/myapp/index.html"
 }, {
-    "id"           : 17,
+    "id"           : 18,
     "image"        : "devmode/sharedOffscreenCanvas.png",
     "name"         : "Multi-Window OffscreenCanvas",
     "sharedWorkers": true,
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/development/apps/mainapp/index.html"
 }, {
-    "id"           : 16,
+    "id"           : 17,
     "image"        : "devmode/multi_window_dd.png",
     "name"         : "Multi-Window Drag&Drop",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/shareddialog",
     "url"          : "dist/development/apps/shareddialog/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 16,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/development/examples/tab/container/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 15,
     "image"    : "devmode/model-component-example.png",
     "name"     : "State Provider Example",
     "sourceUrl": "examples/stateProvider/advanced",
     "url"      : "dist/development/examples/stateProvider/advanced/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 14,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/development/examples/dialog/"
 }, {
-    "id"           : 12,
+    "id"           : 13,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "dist/development/apps/colors/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 12,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/development/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/development/examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/coronaGallery.png",
     "name"     : "COVID-19 Gallery",
     "sourceUrl": "examples/component/coronaGallery",
     "url"      : "dist/development/examples/component/coronaGallery/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 9,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "dist/development/examples/component/gallery/index.html"
 }, {
-    "id"       : 7,
+    "id"       : 8,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "dist/development/examples/tableFiltering/"
 }, {
-    "id"       : 6,
+    "id"       : 7,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "dist/development/examples/component/dateSelector/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 6,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "dist/development/examples/form/field/date/index.html"
 }, {
-    "id"       : 4,
+    "id"       : 5,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "dist/development/examples/form/field/combobox/index.html"
 }, {
-    "id"           : 3,
+    "id"           : 4,
     "environments" : ["Desktop", "Mobile"],
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/portal",
     "url"          : "dist/development/apps/portal/index.html"
+}, {
+    "id"       : 3,
+    "image"    : "devmode/liquid-glass.png",
+    "name"     : "Liquid Glass effect",
+    "sourceUrl": "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
+    "url"      : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/dist/development/apps/myapp/index.html"
 }, {
     "hidden"   : true,
     "id"       : 2,