From 40e4b02829d81400c5992a7a6886b835a3baf806 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Thu, 20 Nov 2025 19:54:42 +0200
Subject: [PATCH 1/5] fix(grid-lite): various fixes and improvements

---
 .../grid-lite/column-config-basic/index.html  |  1 -
 .../column-config-basic/package.json          |  5 +-
 .../column-config-basic/tsconfig.json         | 29 ++++++++++
 .../column-config-basic/webpack.config.js     | 15 +++++-
 .../column-config-dynamic/index.html          |  1 -
 .../column-config-dynamic/package.json        |  5 +-
 .../column-config-dynamic/tsconfig.json       | 29 ++++++++++
 .../column-config-dynamic/webpack.config.js   | 16 +++++-
 .../column-config-headers/package.json        |  5 +-
 .../column-config-headers/tsconfig.json       | 29 ++++++++++
 .../column-config-headers/webpack.config.js   | 16 +++++-
 .../grids/grid-lite/data-binding/index.html   |  7 +--
 .../grids/grid-lite/data-binding/package.json |  5 +-
 .../grids/grid-lite/data-binding/src/index.ts | 54 ++++++++-----------
 .../grid-lite/data-binding/tsconfig.json      | 29 ++++++++++
 .../grid-lite/data-binding/webpack.config.js  | 15 +++++-
 .../filtering-config-events/index.html        |  1 -
 .../filtering-config-events/package.json      |  5 +-
 .../filtering-config-events/tsconfig.json     | 29 ++++++++++
 .../filtering-config-events/webpack.config.js | 16 +++++-
 .../filtering-config-remote/index.html        |  1 -
 .../filtering-config-remote/package.json      |  5 +-
 .../filtering-config-remote/tsconfig.json     | 29 ++++++++++
 .../filtering-config-remote/webpack.config.js | 16 +++++-
 .../grid-lite/filtering-config/index.html     |  1 -
 .../grid-lite/filtering-config/package.json   |  5 +-
 .../grid-lite/filtering-config/tsconfig.json  | 29 ++++++++++
 .../filtering-config/webpack.config.js        | 16 +++++-
 samples/grids/grid-lite/overview/index.html   |  1 -
 samples/grids/grid-lite/overview/package.json |  9 ++--
 .../grids/grid-lite/overview/tsconfig.json    |  1 +
 .../grid-lite/overview/webpack.config.js      | 16 +++++-
 .../grid-lite/sort-config-events/index.html   |  1 -
 .../grid-lite/sort-config-events/package.json |  5 +-
 .../sort-config-events/src/index.css          |  2 +-
 .../grid-lite/sort-config-events/src/index.ts |  1 +
 .../sort-config-events/tsconfig.json          | 29 ++++++++++
 .../sort-config-events/webpack.config.js      | 16 +++++-
 .../grid-lite/sort-config-grid/index.html     |  1 -
 .../grid-lite/sort-config-grid/package.json   |  5 +-
 .../grid-lite/sort-config-grid/tsconfig.json  | 29 ++++++++++
 .../sort-config-grid/webpack.config.js        | 16 +++++-
 .../grid-lite/sort-config-pipeline/index.html |  1 -
 .../sort-config-pipeline/package.json         |  5 +-
 .../sort-config-pipeline/tsconfig.json        | 29 ++++++++++
 .../sort-config-pipeline/webpack.config.js    | 16 +++++-
 .../grid-lite/sort-config-sample/index.html   |  1 -
 .../grid-lite/sort-config-sample/package.json |  5 +-
 .../sort-config-sample/tsconfig.json          | 29 ++++++++++
 .../sort-config-sample/webpack.config.js      | 16 +++++-
 .../grid-lite/styling-custom-theme/index.html |  1 -
 .../styling-custom-theme/package.json         |  5 +-
 .../styling-custom-theme/tsconfig.json        | 29 ++++++++++
 .../styling-custom-theme/webpack.config.js    | 16 +++++-
 webpack.config.js                             | 13 ++++-
 55 files changed, 607 insertions(+), 105 deletions(-)
 create mode 100644 samples/grids/grid-lite/column-config-basic/tsconfig.json
 create mode 100644 samples/grids/grid-lite/column-config-dynamic/tsconfig.json
 create mode 100644 samples/grids/grid-lite/column-config-headers/tsconfig.json
 create mode 100644 samples/grids/grid-lite/data-binding/tsconfig.json
 create mode 100644 samples/grids/grid-lite/filtering-config-events/tsconfig.json
 create mode 100644 samples/grids/grid-lite/filtering-config-remote/tsconfig.json
 create mode 100644 samples/grids/grid-lite/filtering-config/tsconfig.json
 create mode 100644 samples/grids/grid-lite/sort-config-events/tsconfig.json
 create mode 100644 samples/grids/grid-lite/sort-config-grid/tsconfig.json
 create mode 100644 samples/grids/grid-lite/sort-config-pipeline/tsconfig.json
 create mode 100644 samples/grids/grid-lite/sort-config-sample/tsconfig.json
 create mode 100644 samples/grids/grid-lite/styling-custom-theme/tsconfig.json

diff --git a/samples/grids/grid-lite/column-config-basic/index.html b/samples/grids/grid-lite/column-config-basic/index.html
index ca05a0a415..92c23a2d34 100644
--- a/samples/grids/grid-lite/column-config-basic/index.html
+++ b/samples/grids/grid-lite/column-config-basic/index.html
@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
 
 </head>
 
diff --git a/samples/grids/grid-lite/column-config-basic/package.json b/samples/grids/grid-lite/column-config-basic/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/column-config-basic/package.json
+++ b/samples/grids/grid-lite/column-config-basic/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/column-config-basic/tsconfig.json b/samples/grids/grid-lite/column-config-basic/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-basic/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-basic/webpack.config.js b/samples/grids/grid-lite/column-config-basic/webpack.config.js
index e90479cd73..fb17cfc96f 100644
--- a/samples/grids/grid-lite/column-config-basic/webpack.config.js
+++ b/samples/grids/grid-lite/column-config-basic/webpack.config.js
@@ -100,6 +100,19 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/column-config-dynamic/index.html b/samples/grids/grid-lite/column-config-dynamic/index.html
index 493133a9be..03bbb9cda2 100644
--- a/samples/grids/grid-lite/column-config-dynamic/index.html
+++ b/samples/grids/grid-lite/column-config-dynamic/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/column-config-dynamic/package.json b/samples/grids/grid-lite/column-config-dynamic/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/column-config-dynamic/package.json
+++ b/samples/grids/grid-lite/column-config-dynamic/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/column-config-dynamic/tsconfig.json b/samples/grids/grid-lite/column-config-dynamic/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-dynamic/webpack.config.js b/samples/grids/grid-lite/column-config-dynamic/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/column-config-dynamic/webpack.config.js
+++ b/samples/grids/grid-lite/column-config-dynamic/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/column-config-headers/package.json b/samples/grids/grid-lite/column-config-headers/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/column-config-headers/package.json
+++ b/samples/grids/grid-lite/column-config-headers/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/column-config-headers/tsconfig.json b/samples/grids/grid-lite/column-config-headers/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-headers/webpack.config.js b/samples/grids/grid-lite/column-config-headers/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/column-config-headers/webpack.config.js
+++ b/samples/grids/grid-lite/column-config-headers/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/data-binding/index.html b/samples/grids/grid-lite/data-binding/index.html
index 9e6af43e5d..96214420f2 100644
--- a/samples/grids/grid-lite/data-binding/index.html
+++ b/samples/grids/grid-lite/data-binding/index.html
@@ -8,19 +8,16 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
     <div id="root">
       <div class="container sample ig-typography">
         <div class="controls-wrapper">
-          <button id="loadMore" class="sample-button">Load More Data</button>
-          <button id="clearData" class="sample-button">Clear Data</button>
-          <span id="recordCount" class="record-count">Records: 0</span>
+          <igc-button>Switch Data</igc-button>
         </div>
         <div class="grid-lite-wrapper">
-          <igc-grid-lite id="grid-lite"></igc-grid-lite>
+          <igc-grid-lite auto-generate id="grid-lite"></igc-grid-lite>
         </div>
       </div>
     </div>
diff --git a/samples/grids/grid-lite/data-binding/package.json b/samples/grids/grid-lite/data-binding/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/data-binding/package.json
+++ b/samples/grids/grid-lite/data-binding/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/data-binding/src/index.ts b/samples/grids/grid-lite/data-binding/src/index.ts
index f2b7da84a7..cb8a365d7e 100644
--- a/samples/grids/grid-lite/data-binding/src/index.ts
+++ b/samples/grids/grid-lite/data-binding/src/index.ts
@@ -1,4 +1,5 @@
 import { IgcGridLite } from 'igniteui-grid-lite';
+import { IgcButtonComponent } from 'igniteui-webcomponents';
 import { GridLiteDataService, User } from './GridLiteDataService';
 
 import "igniteui-webcomponents/themes/light/bootstrap.css";
@@ -9,48 +10,35 @@ IgcGridLite.register();
 export class Sample {
     private dataService: GridLiteDataService;
     private gridLite: any;
-    private data: User[] = [];
+    private switchButton: IgcButtonComponent | null = null;
+    private showingProducts = true;
 
     constructor() {
         this.dataService = new GridLiteDataService();
-        this.gridLite = document.getElementById('grid-lite') as any;
-        
-        const columns = [
-            { key: 'firstName', headerText: 'First Name' },
-            { key: 'lastName', headerText: 'Last Name' },
-            { key: 'age', headerText: 'Age', type: 'number' },
-            { key: 'email', headerText: 'Email' },
-            { key: 'priority', headerText: 'Priority' }
-        ];
-
-        this.gridLite.columns = columns;
-        this.gridLite.data = this.data;
+        this.gridLite = document.getElementById('grid-lite') as IgcGridLite<User>;
+        this.switchButton = document.querySelector('igc-button');
 
-        // Setup button handlers
-        document.getElementById('loadMore')?.addEventListener('click', () => this.loadMoreData());
-        document.getElementById('clearData')?.addEventListener('click', () => this.clearData());
+        this.gridLite.data = this.dataService.generateProducts(50);
 
-        // Load initial data
-        this.loadMoreData();
-    }
+        window.addEventListener('error', (e) => {
+            if (e.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                e.stopImmediatePropagation();
+            }
+        });
 
-    private loadMoreData() {
-        const newData = this.dataService.generateUsers(20);
-        this.data = [...this.data, ...newData];
-        this.gridLite.data = this.data;
-        this.updateRecordCount();
+        // Setup button handlers
+        this.switchButton.addEventListener('click', () => this.switchData());
     }
 
-    private clearData() {
-        this.data = [];
-        this.gridLite.data = this.data;
-        this.updateRecordCount();
-    }
+    private switchData() {
+        this.gridLite.columns = []
 
-    private updateRecordCount() {
-        const countElement = document.getElementById('recordCount');
-        if (countElement) {
-            countElement.textContent = `Records: ${this.data.length}`;
+        if (this.showingProducts) {
+            this.gridLite.data = this.dataService.generateUsers(50);
+            this.showingProducts = false;
+        } else {
+            this.gridLite.data = this.dataService.generateProducts(50);
+            this.showingProducts = true;
         }
     }
 }
diff --git a/samples/grids/grid-lite/data-binding/tsconfig.json b/samples/grids/grid-lite/data-binding/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/data-binding/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/data-binding/webpack.config.js b/samples/grids/grid-lite/data-binding/webpack.config.js
index e90479cd73..fb17cfc96f 100644
--- a/samples/grids/grid-lite/data-binding/webpack.config.js
+++ b/samples/grids/grid-lite/data-binding/webpack.config.js
@@ -100,6 +100,19 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/filtering-config-events/index.html b/samples/grids/grid-lite/filtering-config-events/index.html
index f3e2526919..fd860668ca 100644
--- a/samples/grids/grid-lite/filtering-config-events/index.html
+++ b/samples/grids/grid-lite/filtering-config-events/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/filtering-config-events/package.json b/samples/grids/grid-lite/filtering-config-events/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/filtering-config-events/package.json
+++ b/samples/grids/grid-lite/filtering-config-events/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/filtering-config-events/tsconfig.json b/samples/grids/grid-lite/filtering-config-events/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/filtering-config-events/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/filtering-config-events/webpack.config.js b/samples/grids/grid-lite/filtering-config-events/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/filtering-config-events/webpack.config.js
+++ b/samples/grids/grid-lite/filtering-config-events/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/filtering-config-remote/index.html b/samples/grids/grid-lite/filtering-config-remote/index.html
index ea42635be2..b57b9010b3 100644
--- a/samples/grids/grid-lite/filtering-config-remote/index.html
+++ b/samples/grids/grid-lite/filtering-config-remote/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/filtering-config-remote/package.json b/samples/grids/grid-lite/filtering-config-remote/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/filtering-config-remote/package.json
+++ b/samples/grids/grid-lite/filtering-config-remote/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/filtering-config-remote/tsconfig.json b/samples/grids/grid-lite/filtering-config-remote/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/filtering-config-remote/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/filtering-config-remote/webpack.config.js b/samples/grids/grid-lite/filtering-config-remote/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/filtering-config-remote/webpack.config.js
+++ b/samples/grids/grid-lite/filtering-config-remote/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/filtering-config/index.html b/samples/grids/grid-lite/filtering-config/index.html
index 16ae42c751..280873e3dd 100644
--- a/samples/grids/grid-lite/filtering-config/index.html
+++ b/samples/grids/grid-lite/filtering-config/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/filtering-config/package.json b/samples/grids/grid-lite/filtering-config/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/filtering-config/package.json
+++ b/samples/grids/grid-lite/filtering-config/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/filtering-config/tsconfig.json b/samples/grids/grid-lite/filtering-config/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/filtering-config/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/filtering-config/webpack.config.js b/samples/grids/grid-lite/filtering-config/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/filtering-config/webpack.config.js
+++ b/samples/grids/grid-lite/filtering-config/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/overview/index.html b/samples/grids/grid-lite/overview/index.html
index eaa69ece53..18703ba59b 100644
--- a/samples/grids/grid-lite/overview/index.html
+++ b/samples/grids/grid-lite/overview/index.html
@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
 
 </head>
 
diff --git a/samples/grids/grid-lite/overview/package.json b/samples/grids/grid-lite/overview/package.json
index c55d0e6bec..accfb66b12 100644
--- a/samples/grids/grid-lite/overview/package.json
+++ b/samples/grids/grid-lite/overview/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "grid-lite-overview-example",
-  "description": "Grid Lite Overview sample using Ignite UI for Web Components",
+  "name": "grid-lite-column-config-simple-example",
+  "description": "Grid Lite Column Config Simple sample using Ignite UI for Web Components",
   "author": "Infragistics",
   "version": "1.0.0",
   "license": "",
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/overview/tsconfig.json b/samples/grids/grid-lite/overview/tsconfig.json
index 00c93f9925..bff1471cb6 100644
--- a/samples/grids/grid-lite/overview/tsconfig.json
+++ b/samples/grids/grid-lite/overview/tsconfig.json
@@ -13,6 +13,7 @@
     "strictNullChecks": false,
     "baseUrl": ".",
     "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
       "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
       "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
       "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
diff --git a/samples/grids/grid-lite/overview/webpack.config.js b/samples/grids/grid-lite/overview/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/overview/webpack.config.js
+++ b/samples/grids/grid-lite/overview/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/sort-config-events/index.html b/samples/grids/grid-lite/sort-config-events/index.html
index a5034f0d15..996fe0a858 100644
--- a/samples/grids/grid-lite/sort-config-events/index.html
+++ b/samples/grids/grid-lite/sort-config-events/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/sort-config-events/package.json b/samples/grids/grid-lite/sort-config-events/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/sort-config-events/package.json
+++ b/samples/grids/grid-lite/sort-config-events/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/sort-config-events/src/index.css b/samples/grids/grid-lite/sort-config-events/src/index.css
index 54f8e4663b..6cf15a4624 100644
--- a/samples/grids/grid-lite/sort-config-events/src/index.css
+++ b/samples/grids/grid-lite/sort-config-events/src/index.css
@@ -1,6 +1,6 @@
 .grid-lite-wrapper {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 10rem);
 }
 
 igc-grid-lite {
diff --git a/samples/grids/grid-lite/sort-config-events/src/index.ts b/samples/grids/grid-lite/sort-config-events/src/index.ts
index d9bf8b6bdc..00f959f175 100644
--- a/samples/grids/grid-lite/sort-config-events/src/index.ts
+++ b/samples/grids/grid-lite/sort-config-events/src/index.ts
@@ -84,6 +84,7 @@ export class Sample {
         this.logElement.innerHTML = this.log
             .map(entry => `<p><code>${entry}</code></p>`)
             .join('');
+        this.logElement.scrollTop = this.logElement.scrollHeight;
     }
 
     private handleSorting(event: any) {
diff --git a/samples/grids/grid-lite/sort-config-events/tsconfig.json b/samples/grids/grid-lite/sort-config-events/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/sort-config-events/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/sort-config-events/webpack.config.js b/samples/grids/grid-lite/sort-config-events/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/sort-config-events/webpack.config.js
+++ b/samples/grids/grid-lite/sort-config-events/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/sort-config-grid/index.html b/samples/grids/grid-lite/sort-config-grid/index.html
index a4cab07c90..c162166fbe 100644
--- a/samples/grids/grid-lite/sort-config-grid/index.html
+++ b/samples/grids/grid-lite/sort-config-grid/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/sort-config-grid/package.json b/samples/grids/grid-lite/sort-config-grid/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/sort-config-grid/package.json
+++ b/samples/grids/grid-lite/sort-config-grid/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/sort-config-grid/tsconfig.json b/samples/grids/grid-lite/sort-config-grid/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/sort-config-grid/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/sort-config-grid/webpack.config.js b/samples/grids/grid-lite/sort-config-grid/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/sort-config-grid/webpack.config.js
+++ b/samples/grids/grid-lite/sort-config-grid/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/sort-config-pipeline/index.html b/samples/grids/grid-lite/sort-config-pipeline/index.html
index b128e68e0f..5a07219038 100644
--- a/samples/grids/grid-lite/sort-config-pipeline/index.html
+++ b/samples/grids/grid-lite/sort-config-pipeline/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/sort-config-pipeline/package.json b/samples/grids/grid-lite/sort-config-pipeline/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/sort-config-pipeline/package.json
+++ b/samples/grids/grid-lite/sort-config-pipeline/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/sort-config-pipeline/tsconfig.json b/samples/grids/grid-lite/sort-config-pipeline/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/sort-config-pipeline/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/sort-config-pipeline/webpack.config.js b/samples/grids/grid-lite/sort-config-pipeline/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/sort-config-pipeline/webpack.config.js
+++ b/samples/grids/grid-lite/sort-config-pipeline/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/sort-config-sample/index.html b/samples/grids/grid-lite/sort-config-sample/index.html
index 8c5a02539e..17db8a658c 100644
--- a/samples/grids/grid-lite/sort-config-sample/index.html
+++ b/samples/grids/grid-lite/sort-config-sample/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/sort-config-sample/package.json b/samples/grids/grid-lite/sort-config-sample/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/sort-config-sample/package.json
+++ b/samples/grids/grid-lite/sort-config-sample/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/sort-config-sample/tsconfig.json b/samples/grids/grid-lite/sort-config-sample/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/sort-config-sample/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/sort-config-sample/webpack.config.js b/samples/grids/grid-lite/sort-config-sample/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/sort-config-sample/webpack.config.js
+++ b/samples/grids/grid-lite/sort-config-sample/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/samples/grids/grid-lite/styling-custom-theme/index.html b/samples/grids/grid-lite/styling-custom-theme/index.html
index 558e709441..d192f19c0f 100644
--- a/samples/grids/grid-lite/styling-custom-theme/index.html
+++ b/samples/grids/grid-lite/styling-custom-theme/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
     <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-    <link rel="stylesheet" href="/src/index.css" type="text/css" />
   </head>
 
   <body>
diff --git a/samples/grids/grid-lite/styling-custom-theme/package.json b/samples/grids/grid-lite/styling-custom-theme/package.json
index 6d584d2606..accfb66b12 100644
--- a/samples/grids/grid-lite/styling-custom-theme/package.json
+++ b/samples/grids/grid-lite/styling-custom-theme/package.json
@@ -23,9 +23,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "6.3.0-beta.0",
-    "igniteui-grid-lite": "latest",
-    "igniteui-webcomponents": "6.3.0-beta.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
+    "igniteui-webcomponents": "^6.3.1",
     "lit-html": "^3.3.1",
     "tslib": "^2.8.1"
   },
diff --git a/samples/grids/grid-lite/styling-custom-theme/tsconfig.json b/samples/grids/grid-lite/styling-custom-theme/tsconfig.json
new file mode 100644
index 0000000000..bff1471cb6
--- /dev/null
+++ b/samples/grids/grid-lite/styling-custom-theme/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents"],
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ],
+      "igniteui-grid-lite": [ "node_modules/igniteui-grid-lite", "node_modules/@infragistics/igniteui-grid-lite" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/styling-custom-theme/webpack.config.js b/samples/grids/grid-lite/styling-custom-theme/webpack.config.js
index e90479cd73..ecdc45973b 100644
--- a/samples/grids/grid-lite/styling-custom-theme/webpack.config.js
+++ b/samples/grids/grid-lite/styling-custom-theme/webpack.config.js
@@ -100,6 +100,20 @@ module.exports = env => {
                 template: 'index.html'
             }),
             new ForkTsCheckerWebpackPlugin()
-        ]
+        ],
+
+        devServer: {
+            client: {
+                overlay: {
+                    runtimeErrors: (error) => {
+                        if (error.message === 'ResizeObserver loop limit exceeded' || 
+                            error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+                            return false;
+                        }
+                        return true;
+                    },
+                },
+            },
+        }
     };
 };
diff --git a/webpack.config.js b/webpack.config.js
index bfe9c7e1cd..cb2eb75f0e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -156,7 +156,18 @@ var config = {
     compress: true,
     port: 4200,
     hot: true,
-    historyApiFallback: true
+    historyApiFallback: true,
+    client: {
+      overlay: {
+        runtimeErrors: (error) => {
+          if (error.message === 'ResizeObserver loop limit exceeded' || 
+              error.message === 'ResizeObserver loop completed with undelivered notifications.') {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
   },
   optimization: {
     splitChunks: {

From 1d4460d73aab3680adcb8db74d5d9afe5c483457 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Fri, 21 Nov 2025 10:29:48 +0200
Subject: [PATCH 2/5] fix(grid-lite): filtering event improvements

---
 .../filtering-config-events/index.html        |  5 +-
 .../filtering-config-events/src/index.css     | 47 +++++++------------
 .../filtering-config-events/src/index.ts      | 38 ++++++++++-----
 3 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/samples/grids/grid-lite/filtering-config-events/index.html b/samples/grids/grid-lite/filtering-config-events/index.html
index fd860668ca..bf9a4cc8b0 100644
--- a/samples/grids/grid-lite/filtering-config-events/index.html
+++ b/samples/grids/grid-lite/filtering-config-events/index.html
@@ -13,12 +13,9 @@
   <body>
     <div id="root">
       <div class="container sample ig-typography">
-        <div class="event-log">
-          <h3>Filter Events Log:</h3>
-          <div id="eventLog" class="log-container"></div>
-        </div>
         <div class="grid-lite-wrapper">
           <igc-grid-lite id="grid-lite"></igc-grid-lite>
+          <div class="log" id="log"></div>
         </div>
       </div>
     </div>
diff --git a/samples/grids/grid-lite/filtering-config-events/src/index.css b/samples/grids/grid-lite/filtering-config-events/src/index.css
index b2f2cf8a9d..6cf15a4624 100644
--- a/samples/grids/grid-lite/filtering-config-events/src/index.css
+++ b/samples/grids/grid-lite/filtering-config-events/src/index.css
@@ -1,40 +1,27 @@
-.event-log {
-    margin-bottom: 1rem;
-    padding: 1rem;
-    background-color: #f5f5f5;
-    border-radius: 4px;
+.grid-lite-wrapper {
+    width: 100%;
+    height: calc(100% - 10rem);
 }
 
-.event-log h3 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1rem;
+igc-grid-lite {
+    min-height: 65vh;
 }
 
-.log-container {
-    max-height: 150px;
+.log {
+    margin-top: 0.5rem;
+    border: 1px solid #ccc;
+    padding: 1rem;
+    min-height: 1rem;
+    font-size: 0.75rem;
+    max-height: 5rem;
     overflow-y: auto;
-    background-color: white;
-    padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.log-entry {
-    padding: 0.25rem 0;
-    font-size: 0.875rem;
-    border-bottom: 1px solid #eee;
 }
 
-.log-entry:last-child {
-    border-bottom: none;
+.log p {
+    margin: 0.25rem 0;
 }
 
-.grid-lite-wrapper {
-    width: 100%;
-    height: 100%;
-}
-
-igc-grid-lite {
-    min-height: 65vh;
-    --ig-size: 2;
+.log code {
+    font-family: monospace;
+    font-size: 0.75rem;
 }
\ No newline at end of file
diff --git a/samples/grids/grid-lite/filtering-config-events/src/index.ts b/samples/grids/grid-lite/filtering-config-events/src/index.ts
index b58ef30324..151dcc163a 100644
--- a/samples/grids/grid-lite/filtering-config-events/src/index.ts
+++ b/samples/grids/grid-lite/filtering-config-events/src/index.ts
@@ -8,11 +8,16 @@ IgcGridLite.register();
 
 export class Sample {
     private dataService: GridLiteDataService;
-    private eventLog: HTMLElement;
+    private log: string[] = [];
+    private logElement: HTMLElement;
+
+    get time() {
+        return `[${new Date().toLocaleTimeString()}]`;
+    }
 
     constructor() {
         this.dataService = new GridLiteDataService();
-        this.eventLog = document.getElementById('eventLog')!;
+        this.logElement = document.getElementById('log')!;
         
         const gridLite = document.getElementById('grid-lite') as any;
         const data: User[] = this.dataService.generateUsers(50);
@@ -28,21 +33,28 @@ export class Sample {
         gridLite.data = data;
 
         // Listen to filter events
-        gridLite.addEventListener('filterChanged', (e: any) => {
-            this.logEvent(`Filter changed: ${JSON.stringify(e.detail)}`);
+        gridLite.addEventListener('filtering', (e: any) => {
+            const { expressions, type } = e.detail;
+            this.updateLog(`${this.time} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`);
+        });
+        gridLite.addEventListener('filtered', (e: any) => {
+            this.updateLog( `${this.time} :: Event \`${e.type}\` for column '${e.detail.key}'`);
         });
     }
 
-    private logEvent(message: string) {
-        const logEntry = document.createElement('div');
-        logEntry.className = 'log-entry';
-        logEntry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
-        this.eventLog.insertBefore(logEntry, this.eventLog.firstChild);
-        
-        // Keep only last 10 entries
-        while (this.eventLog.children.length > 10) {
-            this.eventLog.removeChild(this.eventLog.lastChild!);
+    private updateLog(message: string) {
+        if (this.log.length > 10) {
+            this.log.shift();
         }
+        this.log.push(message);
+        this.renderLog();
+    }
+
+    private renderLog() {
+        this.logElement.innerHTML = this.log
+            .map(entry => `<p><code>${entry}</code></p>`)
+            .join('');
+        this.logElement.scrollTop = this.logElement.scrollHeight;
     }
 }
 

From 1026eb8629c724611b475b94d104d142ed09c66f Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Fri, 21 Nov 2025 16:46:09 +0200
Subject: [PATCH 3/5] fix(grid-lite): making filtering remote sample good

---
 .../filtering-config-remote/index.html        |  7 +--
 .../filtering-config-remote/src/index.css     | 32 ++++++-----
 .../filtering-config-remote/src/index.ts      | 56 +++++++++++++------
 3 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/samples/grids/grid-lite/filtering-config-remote/index.html b/samples/grids/grid-lite/filtering-config-remote/index.html
index b57b9010b3..6b68e66f65 100644
--- a/samples/grids/grid-lite/filtering-config-remote/index.html
+++ b/samples/grids/grid-lite/filtering-config-remote/index.html
@@ -13,10 +13,9 @@
   <body>
     <div id="root">
       <div class="container sample ig-typography">
-        <div class="controls-wrapper">
-          <button id="filterAdults" class="sample-button">Filter Adults (18+)</button>
-          <button id="filterSeniors" class="sample-button">Filter Seniors (65+)</button>
-          <button id="clearFilters" class="sample-button">Clear Filters</button>
+        <div>
+          <h5>Generated request</h5>
+          <p><code id="queryString"></code></p>
         </div>
         <div class="grid-lite-wrapper">
           <igc-grid-lite id="grid-lite"></igc-grid-lite>
diff --git a/samples/grids/grid-lite/filtering-config-remote/src/index.css b/samples/grids/grid-lite/filtering-config-remote/src/index.css
index 6e21273af0..a04c50eec0 100644
--- a/samples/grids/grid-lite/filtering-config-remote/src/index.css
+++ b/samples/grids/grid-lite/filtering-config-remote/src/index.css
@@ -1,25 +1,27 @@
-.controls-wrapper {
-    margin-bottom: 1rem;
-    display: flex;
-    gap: 0.5rem;
+p {
+    border: 1px solid var(--border);
+    padding: 1rem;
+    min-height: 1rem;
+    font-size: 0.75rem;
 }
 
-.sample-button {
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-    background-color: #007bff;
-    color: white;
-    border: none;
+code {
+    background-color: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 4px;
-}
-
-.sample-button:hover {
-    background-color: #0056b3;
+    padding: 0.125rem 0.375rem;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.875em;
+    color: #222222;
+    display: inline-block;
+    width: 100%;
+    min-height: 2em;
+    box-sizing: border-box;
 }
 
 .grid-lite-wrapper {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 1rem);
 }
 
 igc-grid-lite {
diff --git a/samples/grids/grid-lite/filtering-config-remote/src/index.ts b/samples/grids/grid-lite/filtering-config-remote/src/index.ts
index 68294bbfc4..09641e915d 100644
--- a/samples/grids/grid-lite/filtering-config-remote/src/index.ts
+++ b/samples/grids/grid-lite/filtering-config-remote/src/index.ts
@@ -1,4 +1,4 @@
-import { IgcGridLite } from 'igniteui-grid-lite';
+import { DataPipelineConfiguration, FilterExpression, FilterOperation, IgcGridLite } from 'igniteui-grid-lite';
 import { GridLiteDataService, User } from './GridLiteDataService';
 
 import "igniteui-webcomponents/themes/light/bootstrap.css";
@@ -6,16 +6,30 @@ import "./index.css";
 
 IgcGridLite.register();
 
+function groupBy<T extends object>(arr: T[], key: keyof T) {
+    const out: Record<string, T[]> = {};
+    for (const each of arr) {
+        const slot = each[key] as string;
+        if (!out[slot]) {
+            out[slot] = [];
+        }
+        out[slot].push(each);
+    }
+    return out;
+}
+
 export class Sample {
     private dataService: GridLiteDataService;
     private gridLite: any;
+    private codeElement: HTMLElement;
     private allData: User[] = [];
 
     constructor() {
         this.dataService = new GridLiteDataService();
         this.gridLite = document.getElementById('grid-lite') as any;
         this.allData = this.dataService.generateUsers(100);
-        
+        this.codeElement = document.getElementById('queryString')!;
+
         const columns = [
             { key: 'firstName', headerText: 'First name', filter: true },
             { key: 'lastName', headerText: 'Last name', filter: true },
@@ -25,25 +39,35 @@ export class Sample {
 
         this.gridLite.columns = columns;
         this.gridLite.data = this.allData;
-
-        // Setup button handlers
-        document.getElementById('filterAdults')?.addEventListener('click', () => this.filterAdults());
-        document.getElementById('filterSeniors')?.addEventListener('click', () => this.filterSeniors());
-        document.getElementById('clearFilters')?.addEventListener('click', () => this.clearFilters());
+        this.gridLite.dataPipelineConfiguration = this.config;
     }
 
-    private filterAdults() {
-        const filtered = this.allData.filter(user => user.age >= 18);
-        this.gridLite.data = filtered;
-    }
+    protected config: DataPipelineConfiguration<User> = {
+        filter: async ({ data, grid }) => {
+            this.buildUri(grid.filterExpressions);
+            await new Promise((resolve) => setTimeout(resolve, 250));
+            return data;
+        },
+    };
 
-    private filterSeniors() {
-        const filtered = this.allData.filter(user => user.age >= 65);
-        this.gridLite.data = filtered;
+    protected mapExpressions(arr: FilterExpression<User>[]) {
+        return arr
+            .map(({ searchTerm, criteria, condition }, idx) => {
+                const c = condition as unknown as FilterOperation<User>;
+                return idx < 1
+                    ? `${c.name}("${searchTerm}")`
+                    : `${criteria?.toUpperCase()} ${c.name}("${searchTerm}")`;
+            })
+            .join(' ');
     }
 
-    private clearFilters() {
-        this.gridLite.data = this.allData;
+    protected buildUri(state: FilterExpression<User>[]) {
+        const out: string[] = [];
+        const qs = groupBy(state, 'key');
+        for (const [key, exprs] of Object.entries(qs)) {
+            out.push(`${key}(${this.mapExpressions(exprs)})`);
+        }
+        this.codeElement.textContent = `GET: /data?filter=${out.join('&')}`;
     }
 }
 

From 7a688743ef23811e20c677871e110ccc324daa31 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Fri, 21 Nov 2025 17:45:24 +0200
Subject: [PATCH 4/5] fix(grid-lite): adding working styling for sample

---
 .../grid-lite/styling-custom-theme/index.html |   4 +-
 .../styling-custom-theme/src/index.css        | 423 +++++++++++++++++-
 2 files changed, 402 insertions(+), 25 deletions(-)

diff --git a/samples/grids/grid-lite/styling-custom-theme/index.html b/samples/grids/grid-lite/styling-custom-theme/index.html
index d192f19c0f..02b94c0cbe 100644
--- a/samples/grids/grid-lite/styling-custom-theme/index.html
+++ b/samples/grids/grid-lite/styling-custom-theme/index.html
@@ -13,8 +13,8 @@
   <body>
     <div id="root">
       <div class="container sample ig-typography">
-        <div class="grid-lite-wrapper custom-styled">
-          <igc-grid-lite id="grid-lite"></igc-grid-lite>
+        <div class="grid-lite-wrapper">
+          <igc-grid-lite id="grid-lite" class="custom-styled"></igc-grid-lite>
         </div>
       </div>
     </div>
diff --git a/samples/grids/grid-lite/styling-custom-theme/src/index.css b/samples/grids/grid-lite/styling-custom-theme/src/index.css
index 2ebfe6132b..5532f1303b 100644
--- a/samples/grids/grid-lite/styling-custom-theme/src/index.css
+++ b/samples/grids/grid-lite/styling-custom-theme/src/index.css
@@ -3,26 +3,403 @@
     height: 100%;
 }
 
-.custom-styled igc-grid-lite {
-    min-height: 400px;
-    --ig-size: 2;
-    
-    /* Custom colors */
-    --ig-primary-color: #2196F3;
-    --ig-secondary-color: #FFC107;
-    
-    /* Custom header styling */
-    --ig-grid-header-background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
-    --ig-grid-header-text-color: white;
-    
-    /* Custom row styling */
-    --ig-grid-row-even-background: #f5f5f5;
-    --ig-grid-row-odd-background: white;
-    --ig-grid-row-hover-background: #e3f2fd;
-    
-    /* Custom border styling */
-    --ig-grid-border-color: #e0e0e0;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
\ No newline at end of file
+.custom-styled {
+    --content-background: hsla(var(--ig-gray-50), var(--ig-gray-a));
+    --content-text-color: var(--ig-gray-50-contrast);
+    --header-background: hsla(var(--ig-surface-500), var(--ig-surface-a));
+    --header-text-color: var(--ig-surface-500-contrast);
+    --header-border-width: 0.0625rem;
+    --header-border-style: solid;
+    --header-border-color: hsla(var(--ig-gray-400), 0.38);
+    --filtering-header-background: hsla(var(--ig-gray-50) 205deg, 92%, 13%, var(--ig-gray-a));
+    --filtering-row-background: hsla(var(--ig-gray-50), var(--ig-gray-a));
+    --filtering-row-text-color: var(--ig-gray-50-contrast);
+    --sorted-header-icon-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+    --icon-color: "currentColor";
+    --row-hover-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+    --row-hover-text-color: var(--ig-gray-200-contrast);
+    --row-even-background: hsla(var(--ig-gray-50), var(--ig-gray-a));
+    --row-even-text-color: var(--ig-gray-50-contrast);
+    --row-odd-background: hsla(var(--ig-gray-50), var(--ig-gray-a));
+    --row-odd-text-color: var(--ig-gray-50-contrast);
+    --row-border-color: hsla(var(--ig-gray-300), 0.38);
+    --row-border-style: solid;
+    --row-border-width: 0.0625rem;
+    --cell-active-border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+    --grid-resize-line-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+    --ig-font-family: "Merriweather Sans", sans-serif;
+    --ig-h1-font-family: var(--ig-font-family);
+    --ig-h1-font-size: 2.5rem;
+    --ig-h1-font-weight: 500;
+    --ig-h1-font-style: normal;
+    --ig-h1-line-height: 3rem;
+    --ig-h1-letter-spacing: -0.09375rem;
+    --ig-h1-text-transform: none;
+    --ig-h1-margin-top: 0;
+    --ig-h1-margin-bottom: 0.5rem;
+    --ig-h2-font-family: var(--ig-font-family);
+    --ig-h2-font-size: 2rem;
+    --ig-h2-font-weight: 500;
+    --ig-h2-font-style: normal;
+    --ig-h2-line-height: 2.4rem;
+    --ig-h2-letter-spacing: -0.03125rem;
+    --ig-h2-text-transform: none;
+    --ig-h2-margin-top: 0;
+    --ig-h2-margin-bottom: 0.5rem;
+    --ig-h3-font-family: var(--ig-font-family);
+    --ig-h3-font-size: 1.75rem;
+    --ig-h3-font-weight: 500;
+    --ig-h3-font-style: normal;
+    --ig-h3-line-height: 2.1rem;
+    --ig-h3-letter-spacing: 0;
+    --ig-h3-text-transform: none;
+    --ig-h3-margin-top: 0;
+    --ig-h3-margin-bottom: 0.5rem;
+    --ig-h4-font-family: var(--ig-font-family);
+    --ig-h4-font-size: 1.5rem;
+    --ig-h4-font-weight: 500;
+    --ig-h4-font-style: normal;
+    --ig-h4-line-height: 1.8rem;
+    --ig-h4-letter-spacing: 0.015625rem;
+    --ig-h4-text-transform: none;
+    --ig-h4-margin-top: 0;
+    --ig-h4-margin-bottom: 0.5rem;
+    --ig-h5-font-family: var(--ig-font-family);
+    --ig-h5-font-size: 1.25rem;
+    --ig-h5-font-weight: 500;
+    --ig-h5-font-style: normal;
+    --ig-h5-line-height: 1.5rem;
+    --ig-h5-letter-spacing: 0;
+    --ig-h5-text-transform: none;
+    --ig-h5-margin-top: 0;
+    --ig-h5-margin-bottom: 0.5rem;
+    --ig-h6-font-family: var(--ig-font-family);
+    --ig-h6-font-size: 1rem;
+    --ig-h6-font-weight: 500;
+    --ig-h6-font-style: normal;
+    --ig-h6-line-height: 1.2rem;
+    --ig-h6-letter-spacing: 0.009375rem;
+    --ig-h6-text-transform: none;
+    --ig-h6-margin-top: 0;
+    --ig-h6-margin-bottom: 0.5rem;
+    --ig-subtitle-1-font-family: var(--ig-font-family);
+    --ig-subtitle-1-font-size: 0.875rem;
+    --ig-subtitle-1-font-weight: 400;
+    --ig-subtitle-1-font-style: normal;
+    --ig-subtitle-1-line-height: 1.5rem;
+    --ig-subtitle-1-letter-spacing: 0.009375rem;
+    --ig-subtitle-1-text-transform: none;
+    --ig-subtitle-1-margin-top: 0;
+    --ig-subtitle-1-margin-bottom: 0;
+    --ig-subtitle-2-font-family: var(--ig-font-family);
+    --ig-subtitle-2-font-size: 0.9rem;
+    --ig-subtitle-2-font-weight: 400;
+    --ig-subtitle-2-font-style: normal;
+    --ig-subtitle-2-line-height: 1.35rem;
+    --ig-subtitle-2-letter-spacing: 0.00625rem;
+    --ig-subtitle-2-text-transform: none;
+    --ig-subtitle-2-margin-top: 0;
+    --ig-subtitle-2-margin-bottom: 0;
+    --ig-body-1-font-family: var(--ig-font-family);
+    --ig-body-1-font-size: 1rem;
+    --ig-body-1-font-weight: 400;
+    --ig-body-1-font-style: normal;
+    --ig-body-1-line-height: 1.5rem;
+    --ig-body-1-letter-spacing: 0.03125rem;
+    --ig-body-1-text-transform: none;
+    --ig-body-1-margin-top: 0;
+    --ig-body-1-margin-bottom: 0;
+    --ig-body-2-font-family: var(--ig-font-family);
+    --ig-body-2-font-size: 0.9rem;
+    --ig-body-2-font-weight: 400;
+    --ig-body-2-font-style: normal;
+    --ig-body-2-line-height: 1.5rem;
+    --ig-body-2-letter-spacing: 0.015625rem;
+    --ig-body-2-text-transform: none;
+    --ig-body-2-margin-top: 0;
+    --ig-body-2-margin-bottom: 0;
+    --ig-button-font-family: var(--ig-font-family);
+    --ig-button-font-size: 1rem;
+    --ig-button-font-weight: 500;
+    --ig-button-font-style: normal;
+    --ig-button-line-height: 1.5rem;
+    --ig-button-letter-spacing: 0.046875rem;
+    --ig-button-text-transform: none;
+    --ig-button-margin-top: 0;
+    --ig-button-margin-bottom: 0;
+    --ig-caption-font-family: var(--ig-font-family);
+    --ig-caption-font-size: 0.75rem;
+    --ig-caption-font-weight: 400;
+    --ig-caption-font-style: normal;
+    --ig-caption-line-height: 1rem;
+    --ig-caption-letter-spacing: 0.025rem;
+    --ig-caption-text-transform: none;
+    --ig-caption-margin-top: 0;
+    --ig-caption-margin-bottom: 0;
+    --ig-overline-font-family: var(--ig-font-family);
+    --ig-overline-font-size: 0.625rem;
+    --ig-overline-font-weight: 400;
+    --ig-overline-font-style: normal;
+    --ig-overline-line-height: 1rem;
+    --ig-overline-letter-spacing: 0.09375rem;
+    --ig-overline-text-transform: uppercase;
+    --ig-overline-margin-top: 0;
+    --ig-overline-margin-bottom: 0;
+    --ig-calendar-labels-font-family: var(--ig-font-family);
+    --ig-calendar-labels-font-size: 0.8125rem;
+    --ig-calendar-labels-font-weight: 400;
+    --ig-calendar-labels-font-style: normal;
+    --ig-calendar-labels-line-height: normal;
+    --ig-calendar-labels-letter-spacing: normal;
+    --ig-calendar-labels-text-transform: none;
+    --ig-calendar-labels-margin-top: 0;
+    --ig-calendar-labels-margin-bottom: 0;
+    --ig-primary-50-contrast: black;
+    --ig-primary-50: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 1.78);
+    --ig-primary-100-contrast: black;
+    --ig-primary-100: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.8), calc(var(--ig-primary-l) * 1.66);
+    --ig-primary-200-contrast: black;
+    --ig-primary-200: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.64), calc(var(--ig-primary-l) * 1.43);
+    --ig-primary-300-contrast: black;
+    --ig-primary-300: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.73), calc(var(--ig-primary-l) * 1.19);
+    --ig-primary-400-contrast: black;
+    --ig-primary-400: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.875), calc(var(--ig-primary-l) * 1.08);
+    --ig-primary-h: 56deg;
+    --ig-primary-s: 75%;
+    --ig-primary-l: 50%;
+    --ig-primary-a: 1;
+    --ig-primary-500-contrast: black;
+    --ig-primary-500: var(--ig-primary-h), calc(var(--ig-primary-s) * 1), calc(var(--ig-primary-l) * 1);
+    --ig-primary-600-contrast: black;
+    --ig-primary-600: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.26), calc(var(--ig-primary-l) * 0.89);
+    --ig-primary-700-contrast: black;
+    --ig-primary-700: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.52), calc(var(--ig-primary-l) * 0.81);
+    --ig-primary-800-contrast: black;
+    --ig-primary-800: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.5), calc(var(--ig-primary-l) * 0.73);
+    --ig-primary-900-contrast: black;
+    --ig-primary-900: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.34), calc(var(--ig-primary-l) * 0.64);
+    --ig-primary-A100-contrast: black;
+    --ig-primary-A100: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 1.34);
+    --ig-primary-A200-contrast: black;
+    --ig-primary-A200: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.22), calc(var(--ig-primary-l) * 1.16);
+    --ig-primary-A400-contrast: black;
+    --ig-primary-A400: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 0.91);
+    --ig-primary-A700-contrast: black;
+    --ig-primary-A700: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 0.65);
+    --ig-secondary-50-contrast: black;
+    --ig-secondary-50: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 1.78);
+    --ig-secondary-100-contrast: black;
+    --ig-secondary-100: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.8), calc(var(--ig-secondary-l) * 1.66);
+    --ig-secondary-200-contrast: black;
+    --ig-secondary-200: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.64), calc(var(--ig-secondary-l) * 1.43);
+    --ig-secondary-300-contrast: black;
+    --ig-secondary-300: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.73), calc(var(--ig-secondary-l) * 1.19);
+    --ig-secondary-400-contrast: black;
+    --ig-secondary-400: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.875), calc(var(--ig-secondary-l) * 1.08);
+    --ig-secondary-h: 15deg;
+    --ig-secondary-s: 55%;
+    --ig-secondary-l: 64%;
+    --ig-secondary-a: 1;
+    --ig-secondary-500-contrast: black;
+    --ig-secondary-500: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1), calc(var(--ig-secondary-l) * 1);
+    --ig-secondary-600-contrast: black;
+    --ig-secondary-600: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.26), calc(var(--ig-secondary-l) * 0.89);
+    --ig-secondary-700-contrast: black;
+    --ig-secondary-700: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.52), calc(var(--ig-secondary-l) * 0.81);
+    --ig-secondary-800-contrast: black;
+    --ig-secondary-800: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.5), calc(var(--ig-secondary-l) * 0.73);
+    --ig-secondary-900-contrast: white;
+    --ig-secondary-900: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.34), calc(var(--ig-secondary-l) * 0.64);
+    --ig-secondary-A100-contrast: black;
+    --ig-secondary-A100: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 1.34);
+    --ig-secondary-A200-contrast: black;
+    --ig-secondary-A200: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.22), calc(var(--ig-secondary-l) * 1.16);
+    --ig-secondary-A400-contrast: black;
+    --ig-secondary-A400: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 0.91);
+    --ig-secondary-A700-contrast: white;
+    --ig-secondary-A700: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 0.65);
+    --ig-gray-50-contrast: white;
+    --ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 13%;
+    --ig-gray-100-contrast: white;
+    --ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 26%;
+    --ig-gray-200-contrast: white;
+    --ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 38%;
+    --ig-gray-300-contrast: black;
+    --ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 54%;
+    --ig-gray-400-contrast: black;
+    --ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 62%;
+    --ig-gray-h: 205deg;
+    --ig-gray-s: 92%;
+    --ig-gray-l: 74%;
+    --ig-gray-a: 1;
+    --ig-gray-500-contrast: black;
+    --ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 74%;
+    --ig-gray-600-contrast: black;
+    --ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 88%;
+    --ig-gray-700-contrast: black;
+    --ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 93%;
+    --ig-gray-800-contrast: black;
+    --ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 96%;
+    --ig-gray-900-contrast: black;
+    --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
+    --ig-surface-50-contrast: white;
+    --ig-surface-50: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 1.78);
+    --ig-surface-100-contrast: white;
+    --ig-surface-100: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.8), calc(var(--ig-surface-l) * 1.66);
+    --ig-surface-200-contrast: white;
+    --ig-surface-200: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.64), calc(var(--ig-surface-l) * 1.43);
+    --ig-surface-300-contrast: white;
+    --ig-surface-300: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.73), calc(var(--ig-surface-l) * 1.19);
+    --ig-surface-400-contrast: white;
+    --ig-surface-400: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.875), calc(var(--ig-surface-l) * 1.08);
+    --ig-surface-h: 216deg;
+    --ig-surface-s: 92%;
+    --ig-surface-l: 14%;
+    --ig-surface-a: 1;
+    --ig-surface-500-contrast: white;
+    --ig-surface-500: var(--ig-surface-h), calc(var(--ig-surface-s) * 1), calc(var(--ig-surface-l) * 1);
+    --ig-surface-600-contrast: white;
+    --ig-surface-600: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.26), calc(var(--ig-surface-l) * 0.89);
+    --ig-surface-700-contrast: white;
+    --ig-surface-700: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.52), calc(var(--ig-surface-l) * 0.81);
+    --ig-surface-800-contrast: white;
+    --ig-surface-800: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.5), calc(var(--ig-surface-l) * 0.73);
+    --ig-surface-900-contrast: white;
+    --ig-surface-900: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.34), calc(var(--ig-surface-l) * 0.64);
+    --ig-surface-A100-contrast: white;
+    --ig-surface-A100: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 1.34);
+    --ig-surface-A200-contrast: white;
+    --ig-surface-A200: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.22), calc(var(--ig-surface-l) * 1.16);
+    --ig-surface-A400-contrast: white;
+    --ig-surface-A400: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 0.91);
+    --ig-surface-A700-contrast: white;
+    --ig-surface-A700: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 0.65);
+    --ig-info-50-contrast: black;
+    --ig-info-50: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 1.78);
+    --ig-info-100-contrast: black;
+    --ig-info-100: var(--ig-info-h), calc(var(--ig-info-s) * 0.8), calc(var(--ig-info-l) * 1.66);
+    --ig-info-200-contrast: black;
+    --ig-info-200: var(--ig-info-h), calc(var(--ig-info-s) * 0.64), calc(var(--ig-info-l) * 1.43);
+    --ig-info-300-contrast: black;
+    --ig-info-300: var(--ig-info-h), calc(var(--ig-info-s) * 0.73), calc(var(--ig-info-l) * 1.19);
+    --ig-info-400-contrast: black;
+    --ig-info-400: var(--ig-info-h), calc(var(--ig-info-s) * 0.875), calc(var(--ig-info-l) * 1.08);
+    --ig-info-h: 209deg;
+    --ig-info-s: 84%;
+    --ig-info-l: 45%;
+    --ig-info-a: 1;
+    --ig-info-500-contrast: black;
+    --ig-info-500: var(--ig-info-h), calc(var(--ig-info-s) * 1), calc(var(--ig-info-l) * 1);
+    --ig-info-600-contrast: white;
+    --ig-info-600: var(--ig-info-h), calc(var(--ig-info-s) * 1.26), calc(var(--ig-info-l) * 0.89);
+    --ig-info-700-contrast: white;
+    --ig-info-700: var(--ig-info-h), calc(var(--ig-info-s) * 1.52), calc(var(--ig-info-l) * 0.81);
+    --ig-info-800-contrast: white;
+    --ig-info-800: var(--ig-info-h), calc(var(--ig-info-s) * 1.5), calc(var(--ig-info-l) * 0.73);
+    --ig-info-900-contrast: white;
+    --ig-info-900: var(--ig-info-h), calc(var(--ig-info-s) * 1.34), calc(var(--ig-info-l) * 0.64);
+    --ig-info-A100-contrast: black;
+    --ig-info-A100: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 1.34);
+    --ig-info-A200-contrast: black;
+    --ig-info-A200: var(--ig-info-h), calc(var(--ig-info-s) * 1.22), calc(var(--ig-info-l) * 1.16);
+    --ig-info-A400-contrast: white;
+    --ig-info-A400: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 0.91);
+    --ig-info-A700-contrast: white;
+    --ig-info-A700: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 0.65);
+    --ig-success-50-contrast: black;
+    --ig-success-50: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 1.78);
+    --ig-success-100-contrast: black;
+    --ig-success-100: var(--ig-success-h), calc(var(--ig-success-s) * 0.8), calc(var(--ig-success-l) * 1.66);
+    --ig-success-200-contrast: black;
+    --ig-success-200: var(--ig-success-h), calc(var(--ig-success-s) * 0.64), calc(var(--ig-success-l) * 1.43);
+    --ig-success-300-contrast: black;
+    --ig-success-300: var(--ig-success-h), calc(var(--ig-success-s) * 0.73), calc(var(--ig-success-l) * 1.19);
+    --ig-success-400-contrast: black;
+    --ig-success-400: var(--ig-success-h), calc(var(--ig-success-s) * 0.875), calc(var(--ig-success-l) * 1.08);
+    --ig-success-h: 131deg;
+    --ig-success-s: 43%;
+    --ig-success-l: 51%;
+    --ig-success-a: 1;
+    --ig-success-500-contrast: black;
+    --ig-success-500: var(--ig-success-h), calc(var(--ig-success-s) * 1), calc(var(--ig-success-l) * 1);
+    --ig-success-600-contrast: black;
+    --ig-success-600: var(--ig-success-h), calc(var(--ig-success-s) * 1.26), calc(var(--ig-success-l) * 0.89);
+    --ig-success-700-contrast: black;
+    --ig-success-700: var(--ig-success-h), calc(var(--ig-success-s) * 1.52), calc(var(--ig-success-l) * 0.81);
+    --ig-success-800-contrast: black;
+    --ig-success-800: var(--ig-success-h), calc(var(--ig-success-s) * 1.5), calc(var(--ig-success-l) * 0.73);
+    --ig-success-900-contrast: white;
+    --ig-success-900: var(--ig-success-h), calc(var(--ig-success-s) * 1.34), calc(var(--ig-success-l) * 0.64);
+    --ig-success-A100-contrast: black;
+    --ig-success-A100: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 1.34);
+    --ig-success-A200-contrast: black;
+    --ig-success-A200: var(--ig-success-h), calc(var(--ig-success-s) * 1.22), calc(var(--ig-success-l) * 1.16);
+    --ig-success-A400-contrast: black;
+    --ig-success-A400: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 0.91);
+    --ig-success-A700-contrast: white;
+    --ig-success-A700: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 0.65);
+    --ig-warn-50-contrast: black;
+    --ig-warn-50: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 1.78);
+    --ig-warn-100-contrast: black;
+    --ig-warn-100: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.8), calc(var(--ig-warn-l) * 1.66);
+    --ig-warn-200-contrast: black;
+    --ig-warn-200: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.64), calc(var(--ig-warn-l) * 1.43);
+    --ig-warn-300-contrast: black;
+    --ig-warn-300: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.73), calc(var(--ig-warn-l) * 1.19);
+    --ig-warn-400-contrast: black;
+    --ig-warn-400: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.875), calc(var(--ig-warn-l) * 1.08);
+    --ig-warn-h: 37deg;
+    --ig-warn-s: 96%;
+    --ig-warn-l: 54%;
+    --ig-warn-a: 1;
+    --ig-warn-500-contrast: black;
+    --ig-warn-500: var(--ig-warn-h), calc(var(--ig-warn-s) * 1), calc(var(--ig-warn-l) * 1);
+    --ig-warn-600-contrast: black;
+    --ig-warn-600: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.26), calc(var(--ig-warn-l) * 0.89);
+    --ig-warn-700-contrast: black;
+    --ig-warn-700: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.52), calc(var(--ig-warn-l) * 0.81);
+    --ig-warn-800-contrast: black;
+    --ig-warn-800: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.5), calc(var(--ig-warn-l) * 0.73);
+    --ig-warn-900-contrast: black;
+    --ig-warn-900: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.34), calc(var(--ig-warn-l) * 0.64);
+    --ig-warn-A100-contrast: black;
+    --ig-warn-A100: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 1.34);
+    --ig-warn-A200-contrast: black;
+    --ig-warn-A200: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.22), calc(var(--ig-warn-l) * 1.16);
+    --ig-warn-A400-contrast: black;
+    --ig-warn-A400: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 0.91);
+    --ig-warn-A700-contrast: black;
+    --ig-warn-A700: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 0.65);
+    --ig-error-50-contrast: black;
+    --ig-error-50: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 1.78);
+    --ig-error-100-contrast: black;
+    --ig-error-100: var(--ig-error-h), calc(var(--ig-error-s) * 0.8), calc(var(--ig-error-l) * 1.66);
+    --ig-error-200-contrast: black;
+    --ig-error-200: var(--ig-error-h), calc(var(--ig-error-s) * 0.64), calc(var(--ig-error-l) * 1.43);
+    --ig-error-300-contrast: black;
+    --ig-error-300: var(--ig-error-h), calc(var(--ig-error-s) * 0.73), calc(var(--ig-error-l) * 1.19);
+    --ig-error-400-contrast: black;
+    --ig-error-400: var(--ig-error-h), calc(var(--ig-error-s) * 0.875), calc(var(--ig-error-l) * 1.08);
+    --ig-error-h: 346deg;
+    --ig-error-s: 100%;
+    --ig-error-l: 54%;
+    --ig-error-a: 1;
+    --ig-error-500-contrast: black;
+    --ig-error-500: var(--ig-error-h), calc(var(--ig-error-s) * 1), calc(var(--ig-error-l) * 1);
+    --ig-error-600-contrast: black;
+    --ig-error-600: var(--ig-error-h), calc(var(--ig-error-s) * 1.26), calc(var(--ig-error-l) * 0.89);
+    --ig-error-700-contrast: white;
+    --ig-error-700: var(--ig-error-h), calc(var(--ig-error-s) * 1.52), calc(var(--ig-error-l) * 0.81);
+    --ig-error-800-contrast: white;
+    --ig-error-800: var(--ig-error-h), calc(var(--ig-error-s) * 1.5), calc(var(--ig-error-l) * 0.73);
+    --ig-error-900-contrast: white;
+    --ig-error-900: var(--ig-error-h), calc(var(--ig-error-s) * 1.34), calc(var(--ig-error-l) * 0.64);
+    --ig-error-A100-contrast: black;
+    --ig-error-A100: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 1.34);
+    --ig-error-A200-contrast: black;
+    --ig-error-A200: var(--ig-error-h), calc(var(--ig-error-s) * 1.22), calc(var(--ig-error-l) * 1.16);
+    --ig-error-A400-contrast: black;
+    --ig-error-A400: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.91);
+    --ig-error-A700-contrast: white;
+    --ig-error-A700: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.65);
+}

From 4ef5cb1fffff3f2915e377f8f0dee50cd3edd0f5 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Fri, 21 Nov 2025 19:20:19 +0200
Subject: [PATCH 5/5] fix(grid-lite): making column dynamic config better

---
 .../column-config-dynamic/index.html          | 102 +++++++++++----
 .../column-config-dynamic/src/index.css       |  34 +++--
 .../column-config-dynamic/src/index.ts        | 118 +++++++++++++-----
 3 files changed, 189 insertions(+), 65 deletions(-)

diff --git a/samples/grids/grid-lite/column-config-dynamic/index.html b/samples/grids/grid-lite/column-config-dynamic/index.html
index 03bbb9cda2..47b7415cfa 100644
--- a/samples/grids/grid-lite/column-config-dynamic/index.html
+++ b/samples/grids/grid-lite/column-config-dynamic/index.html
@@ -1,27 +1,87 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Grid Lite Dynamic Column Config | Ignite UI | Web Components</title>
-    <meta charset="UTF-8" />
-    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
-    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
-  </head>
 
-  <body>
-    <div id="root">
-      <div class="container sample ig-typography">
-        <div class="controls-wrapper">
-          <button id="addColumn" class="sample-button">Add Column</button>
-          <button id="removeColumn" class="sample-button">Remove Last Column</button>
-        </div>
-        <div class="grid-lite-wrapper">
-          <igc-grid-lite id="grid-lite"></igc-grid-lite>
-        </div>
+<head>
+  <title>Grid Lite Dynamic Column Config | Ignite UI | Web Components</title>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample ig-typography">
+      <section id="panel">
+        <igc-dropdown id="dropdown" keep-open-on-select flip>
+          <igc-button slot="target" variant="outlined">Column properties</igc-button>
+          <igc-dropdown-item role="option" id="id">
+            <div class="config">
+              <span class="config-key">ID</span>
+              <igc-checkbox class="hidden-checkbox" label-position="before" checked>Hidden</igc-checkbox>
+              <igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
+              <igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
+              <igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
+            </div>
+          </igc-dropdown-item>
+          <igc-dropdown-item role="option" id="name">
+            <div class="config">
+              <span class="config-key">Product Name</span>
+              <igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
+              <igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
+              <igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
+              <igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
+            </div>
+          </igc-dropdown-item>
+          <igc-dropdown-item role="option" id="price">
+            <div class="config">
+              <span class="config-key">Price</span>
+              <igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
+              <igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
+              <igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
+              <igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
+            </div>
+          </igc-dropdown-item>
+          <igc-dropdown-item role="option" id="sold">
+            <div class="config">
+              <span class="config-key">Units sold</span>
+              <igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
+              <igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
+              <igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
+              <igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
+            </div>
+          </igc-dropdown-item>
+          <igc-dropdown-item role="option" id="total">
+            <div class="config">
+              <span class="config-key">Total sold</span>
+              <igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
+              <igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
+              <igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
+              <igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
+            </div>
+          </igc-dropdown-item>
+          <igc-dropdown-item role="option" id="rating">
+            <div class="config">
+              <span class="config-key">Customer rating</span>
+              <igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
+              <igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
+              <igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
+              <igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
+            </div>
+          </igc-dropdown-item>
+        </igc-dropdown>
+        <igc-switch id="formattersSwitch" label-position="before" checked="true">Value formatters:</igc-switch>
+      </section>
+      <div class="grid-lite-wrapper">
+        <igc-grid-lite id="grid-lite"></igc-grid-lite>
       </div>
     </div>
-    <% if (false) { %><script src="src/index.ts"></script><% } %>
-  </body>
+  </div>
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.css b/samples/grids/grid-lite/column-config-dynamic/src/index.css
index 6e21273af0..41b27aca79 100644
--- a/samples/grids/grid-lite/column-config-dynamic/src/index.css
+++ b/samples/grids/grid-lite/column-config-dynamic/src/index.css
@@ -1,20 +1,30 @@
-.controls-wrapper {
-    margin-bottom: 1rem;
+#panel {
+    margin: 1rem 0;
     display: flex;
-    gap: 0.5rem;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.sample-button {
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
+.config-key {
+    flex: 2 1 25% !important;
+    font-weight: bold;
+}
+
+.config {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.sample-button:hover {
-    background-color: #0056b3;
+.config * {
+    flex: 1;
+}
+
+igc-dropdown-item {
+    padding: 0.5rem 1rem;
 }
 
 .grid-lite-wrapper {
diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.ts b/samples/grids/grid-lite/column-config-dynamic/src/index.ts
index 22ff2d0bdf..7144e7b993 100644
--- a/samples/grids/grid-lite/column-config-dynamic/src/index.ts
+++ b/samples/grids/grid-lite/column-config-dynamic/src/index.ts
@@ -1,55 +1,109 @@
-import { IgcGridLite } from 'igniteui-grid-lite';
-import { GridLiteDataService, User } from './GridLiteDataService';
+import { ColumnConfiguration, IgcGridLite } from 'igniteui-grid-lite';
+import { defineComponents, IgcCheckboxChangeEventArgs, IgcCheckboxComponent, IgcDropdownComponent, IgcRatingComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
+import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
 
 import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./index.css";
 
 IgcGridLite.register();
+defineComponents(IgcRatingComponent);
+defineComponents(IgcDropdownComponent);
+defineComponents(IgcSwitchComponent);
+defineComponents(IgcCheckboxComponent);
+
+const formatter = new Intl.NumberFormat('en-EN', {
+    style: 'currency',
+    currency: 'EUR',
+});
 
 export class Sample {
     private dataService: GridLiteDataService;
     private gridLite: any;
+    private dropdown: IgcDropdownComponent;
+    private formattersSwitch: IgcSwitchComponent;
+    protected hasFormatters = true;
+    protected format = (params: any) => formatter.format(params.value);
     private columns: any[] = [];
-    private availableColumns = [
-        { key: 'firstName', headerText: 'First Name' },
-        { key: 'lastName', headerText: 'Last Name' },
-        { key: 'age', headerText: 'Age', type: 'number' },
-        { key: 'email', headerText: 'Email' },
-        { key: 'priority', headerText: 'Priority' },
-        { key: 'satisfaction', headerText: 'Satisfaction', type: 'number' }
-    ];
 
     constructor() {
         this.dataService = new GridLiteDataService();
-        this.gridLite = document.getElementById('grid-lite') as any;
-        const data: User[] = this.dataService.generateUsers(50);
-        
-        // Start with first two columns
+        this.gridLite = document.getElementById('grid-lite') as IgcGridLite<ProductInfo>;
+        this.dropdown = document.getElementById('dropdown') as IgcDropdownComponent;
+        this.formattersSwitch = document.getElementById('formattersSwitch') as IgcSwitchComponent;
+
+        const data: ProductInfo[] = this.dataService.generateProducts(50);
+
         this.columns = [
-            this.availableColumns[0],
-            this.availableColumns[1]
+            {
+                key: 'id',
+                hidden: true,
+                headerText: 'ID'
+            },
+            {
+                key: 'name',
+                headerText: 'Product Name'
+            },
+            {
+                key: 'price',
+                headerText: 'Price',
+                type: 'number',
+                cellTemplate: (params: any) => {
+                    const span = document.createElement('span');
+                    span.textContent = formatter.format(params.value);
+                    return span;
+                }
+            },
+            {
+                key: 'sold',
+                type: 'number',
+                headerText: 'Units sold'
+            },
+            {
+                key: 'total',
+                headerText: 'Total sold',
+                cellTemplate: (params: any) => {
+                    const span = document.createElement('span');
+                    span.textContent = formatter.format(params.value);
+                    return span;
+                }
+            },
+            {
+                key: 'rating',
+                type: 'number',
+                headerText: 'Customer rating',
+                cellTemplate: (params: any) => {
+                    const rating = document.createElement('igc-rating');
+                    rating.setAttribute('readonly', '');
+                    rating.setAttribute('step', '0.01');
+                    rating.setAttribute('value', params.value.toString());
+                    return rating;
+                }
+            }
         ];
 
         this.gridLite.columns = this.columns;
         this.gridLite.data = data;
 
-        // Setup button handlers
-        document.getElementById('addColumn')?.addEventListener('click', () => this.addColumn());
-        document.getElementById('removeColumn')?.addEventListener('click', () => this.removeColumn());
-    }
-
-    private addColumn() {
-        if (this.columns.length < this.availableColumns.length) {
-            this.columns.push(this.availableColumns[this.columns.length]);
-            this.gridLite.columns = [...this.columns];
-        }
-    }
+        this.dropdown.addEventListener('igcChange', (e: any) => { this.dropdown.clearSelection(); });
+        this.formattersSwitch.addEventListener('igcChange', (e: CustomEvent<IgcCheckboxChangeEventArgs>) => {
+            this.gridLite.updateColumns(
+                ['price', 'total'].map((key) => ({
+                    key,
+                    cellTemplate: e.detail.checked ? this.format : undefined,
+                })) as ColumnConfiguration<ProductInfo>[]
+            );
+        });
 
-    private removeColumn() {
-        if (this.columns.length > 1) {
-            this.columns.pop();
-            this.gridLite.columns = [...this.columns];
-        }
+        document.addEventListener('click', (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            if (target.tagName.toLowerCase() === 'igc-checkbox') {
+                const checkbox = target as IgcCheckboxComponent;
+                const dropdownItem = checkbox.closest('igc-dropdown-item');
+                const columnKey = dropdownItem?.id;
+                const prop = Array.from(checkbox.classList).filter(c => c.endsWith('-checkbox'))[0].split('-')[0];
+                this.gridLite.updateColumns({ key: columnKey, [prop]: !checkbox.checked });
+            }
+        });
     }
 }