IgniteUI · desig9stein · Feb 2, 2026
diff --git a/demo/demo.ts b/demo/demo.ts
@@ -2,6 +2,8 @@ import {
   configureTheme,
   defineComponents,
   IgcButtonComponent,
+  IgcButtonGroupComponent,
+  IgcToggleButtonComponent,
   IgcAvatarComponent,
   IgcCheckboxComponent,
   IgcRatingComponent,
@@ -19,6 +21,8 @@ defineComponents(
   IgcSelectComponent,
   IgcSwitchComponent,
   IgcButtonComponent,
+  IgcButtonGroupComponent,
+  IgcToggleButtonComponent,
 );
 
 type User = {
@@ -83,7 +87,7 @@ function getAvatar() {
 
 async function setTheme(theme?: string) {
   theme = theme ?? getElement<IgcSelectComponent>(IgcSelectComponent.tagName).value;
-  const variant = getElement<IgcSwitchComponent>(IgcSwitchComponent.tagName).checked
+  const variant = getElement<IgcSwitchComponent>('#theme-variant').checked
     ? 'dark'
     : 'light';
 
@@ -110,6 +114,7 @@ const themeChoose = html`
       ${themes.map((theme) => html`<igc-select-item .value=${theme}>${theme}</igc-select-item>`)}
     </igc-select>
     <igc-switch
+      id="theme-variant"
       label-position="after"
       @igcChange=${() => setTheme()}
       >Dark variant</igc-switch
@@ -148,7 +153,7 @@ const columns: ColumnConfiguration<User>[] = [
     cellTemplate: (params) =>
       html`<igc-rating
         readonly
-        style="--ig-size: 1"
+
         .value=${params.value}
       ></igc-rating>`,
   },
@@ -158,7 +163,6 @@ const columns: ColumnConfiguration<User>[] = [
       html`<igc-select
         outlined
         .value=${params.value}
-        style="--ig-size: 1"
         >${choices.map(
           (choice) => html`<igc-select-item .value=${choice}>${choice}</igc-select-item>`,
         )}</igc-select
@@ -224,19 +228,30 @@ const toggleFiltering = () => {
   column.filterable = !column.filterable;
 };
 
+const setSize = (size: number) => {
+  document.getElementById('demo')!.style.setProperty('--ig-size', String(size));
+};
+
 render(
   html`
-    <igc-button
-      variant="outlined"
-      @click=${toggleColumn}
-      >Toggle column</igc-button
-    >
-    <igc-button
-      variant="outlined"
-      @click=${toggleFiltering}
-      >Toggle filtering</igc-button
-    >
-    ${themeChoose}
+    <div class="actions-panel">
+      <igc-switch
+        label-position="after"
+        @igcChange=${toggleColumn}
+      >Toggle column</igc-switch
+      >
+      <igc-switch
+        label-position="after"
+        @igcChange=${toggleFiltering}
+      >Toggle filtering</igc-switch
+      >
+      <igc-button-group>
+        <igc-toggle-button @click=${() => setSize(1)}>Small</igc-toggle-button>
+        <igc-toggle-button @click=${() => setSize(2)}>Medium</igc-toggle-button>
+        <igc-toggle-button selected @click=${() => setSize(3)}>Large</igc-toggle-button>
+      </igc-button-group>
+      ${themeChoose}
+    </div>
     <igc-grid-lite .data=${data}>
       ${columns.map(
         (col) =>

diff --git a/demo/index.html b/demo/index.html
@@ -1,55 +1,61 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <title>Demo igc-grid</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1"
-    />
-    <meta charset="utf-8" />
-    <style>
+<head>
+  <title>Demo igc-grid</title>
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1"
+  />
+  <meta charset="utf-8" />
+  <style>
       @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
+
       html,
       body {
-        height: 100%;
+          height: 100%;
       }
 
       body {
-        --ig-size: 1;
-        --sample-body-padding: 20px;
-        background: var(--ig-surface-300);
-        margin: 0;
-        padding: var(--sample-body-padding);
-        overflow: hidden;
+          --sample-body-padding: 20px;
+          background: var(--ig-surface-300);
+          margin: 0;
+          padding: var(--sample-body-padding);
+          overflow: hidden;
       }
 
       igc-grid-lite {
-        flex: 1;
+          flex: 1;
+      }
+
+      .actions-panel {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
       }
 
       .sample-drop-down {
-        --ig-size: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0.5rem 0;
-        gap: 1rem;
-        min-height: 75px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 0.5rem 0;
+          gap: 1rem;
+          min-height: 55px;
+          margin-inline-start: auto;
       }
 
       #demo {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        height: calc(100% - (var(--sample-body-padding) * 2));
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          height: calc(100% - (var(--sample-body-padding) * 2));
       }
-    </style>
-  </head>
-  <body class="ig-typography">
-    <div id="demo"></div>
-    <script
-      type="module"
-      src="./demo.ts"
-    ></script>
-  </body>
+  </style>
+</head>
+<body class="ig-typography">
+<div id="demo" style="--ig-size: 3"></div>
+<script
+  type="module"
+  src="./demo.ts"
+></script>
+</body>
 </html>
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
@@ -2,7 +2,7 @@
 @forward 'igniteui-theming';
 
 $ig-cells-padding: sizable(rem(8px), rem(16px), rem(24px));
-$ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px));
+$ig-cells-min-height: sizable(rem(32px), rem(40px), rem(50px));
 
 @mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) {
 	// Firefox only
@@ -22,11 +22,6 @@ $ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px));
 }
 
 :host {
-	@include sizable();
-
-	--component-size: 3;
-
-
 	position: relative;
 	box-sizing: border-box;
 

diff --git a/src/styles/body-cell/body-cell.scss b/src/styles/body-cell/body-cell.scss
@@ -18,6 +18,26 @@ $inset-shadow-width: #{rem(1px)};
     &:last-of-type {
         border-right: 0;
     }
+
+	igc-rating,
+	igc-select {
+		--ig-size: 1;
+	}
+
+	igc-avatar {
+		--size: #{sizable(rem(28px), rem(36px), rem(46px))};
+	}
+
+	igc-select,
+	igc-combo,
+	igc-input {
+		padding-block: rem(6px);
+	}
+
+	// input overrides
+	igc-input::part(container) {
+		--background: transparent;
+	}
 }
 
 :host([active]) {
@@ -31,7 +51,7 @@ $inset-shadow-width: #{rem(1px)};
     border-inline-end: none;
 }
 
-[part~="text"] {
+[part~='text'] {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
@@ -57,7 +77,6 @@ igc-select {
 	&::part(container),
 	&::part(input) {
 		box-shadow: none;
-		height: 100%;
 		background: inherit;
 		border: 0;
 		color: inherit;

diff --git a/src/styles/filter-row/filter-row.scss b/src/styles/filter-row/filter-row.scss
@@ -7,16 +7,43 @@ $filtering-row-text-color: var-get($theme, 'filtering-row-text-color');
 $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
 
 :host {
-    --ig-size: 1;
-
     display: grid;
     grid-row: filter-row;
     min-height: $ig-cells-min-height;
     background: var-get($theme, 'header-background');
     color: var-get($theme, 'header-text-color');
     border-block-end: $border;
     z-index: var(--z-index-base);
-    padding-inline-end: var(--scrollbar-offset);
+	padding-inline-end: var(--scrollbar-offset);
+	position: relative ;
+
+	&:has([part~='active-state']) {
+		&::after {
+			display: block;
+			position: absolute;
+			content: "";
+			background: inherit;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
+			inset-block-start: rem(-1px);
+			bottom: 0;
+			box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'), 0 rem(4px) rem(10px) rgba(0, 0, 0, .12);
+			z-index: -1;
+			pointer-events: none;
+			user-select: none;
+		}
+	}
+
+	igc-chip {
+		--component-size: var(--ig-size);
+
+		// TODO FIX ON COMPONENT LEVEL
+		display: inline-flex;
+	}
+
+	igc-input {
+		--ig-size: 1;
+	}
 }
 
 [part='filter-row-preview'] {
@@ -38,7 +65,6 @@ $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-s
     align-items: center;
     gap: rem(8px);
     position: relative;
-    inset-block-start: rem(-1px);
 }
 
 [part='filter-row-preview']:last-of-type {

diff --git a/src/styles/header-cell/header-cell.scss b/src/styles/header-cell/header-cell.scss
@@ -79,6 +79,7 @@ $theme: $material;
 }
 
 [part~='filtered'] {
+    color: var-get($theme, 'filtering-header-text-color');
     background: var-get($theme, 'filtering-header-background');
 }
 

diff --git a/src/styles/themes/grid.base.scss b/src/styles/themes/grid.base.scss
@@ -1,38 +1,42 @@
-@use "../common" as *;
+@use '../common' as *;
 
 :host {
-  --scrollbar-offset: 0;
-  --z-index-base: 1;
-
-  display: grid;
-  height: 100%;
-  position: relative;
-  font-family: var(--ig-font-family), serif;
-  overflow: auto hidden;
-  grid-template-rows: [header-row] max-content [filter-row] max-content [virtualized-container] auto;
+	@include sizable();
+
+	--component-size: var(--ig-size, var(--ig-size-large));
+
+	--scrollbar-offset: 0;
+	--z-index-base: 1;
+
+	display: grid;
+	height: 100%;
+	position: relative;
+	font-family: var(--ig-font-family), serif;
+	overflow: auto hidden;
+	grid-template-rows: [header-row] max-content [filter-row] max-content [virtualized-container] auto;
 }
 
 igc-virtualizer {
-  grid-row: virtualized-container;
-  display: flex;
-  flex-flow: column;
-  flex: 1;
-  overflow: hidden auto !important;
-
-  &:focus {
-    outline: none;
-  }
+	grid-row: virtualized-container;
+	display: flex;
+	flex-flow: column;
+	flex: 1;
+	overflow: hidden auto !important;
+	
+	&:focus {
+		outline: none;
+	}
 }
 
-[part~="resize-indicator"] {
-  position: absolute;
-  height: 100%;
-  width: rem(2px);
-  inset-inline-start: 0;
-  top: 0;
-  z-index: calc(var(--z-index-base) + 1);
+[part~='resize-indicator'] {
+	position: absolute;
+	height: 100%;
+	width: rem(2px);
+	inset-inline-start: 0;
+	top: 0;
+	z-index: calc(var(--z-index-base) + 1);
 }
 
-[part="column-sink"] {
-  display: none;
+[part='column-sink'] {
+	display: none;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,6 +79,7 @@ $theme: $material; @@
     }
     [part~='filtered'] {
+        color: var-get($theme, 'filtering-header-text-color');
         background: var-get($theme, 'filtering-header-background');
     }
@@ Expand Down @@