IgniteUI · desig9stein · Jun 25, 2026 · Jun 30, 2026 · Jun 30, 2026 · Jul 2, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "igniteui-angular-extras": "^22.0.0",
     "igniteui-angular-i18n": "^22.0.0",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-grid-lite": "^0.7.1",
+    "igniteui-grid-lite": "^0.9.0",
     "igniteui-i18n-resources": "^1.0.4",
     "igniteui-live-editing": "^3.5.1",
     "igniteui-webcomponents": "^7.2.1",

diff --git a/projects/app-crm/src/main.ts b/projects/app-crm/src/main.ts
@@ -3,9 +3,12 @@ import { environment } from './environments/environment';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { AppConfig } from './app/app.config';
+import { initSampleSizeReporter } from '@shared/sample-size-reporter';
 
 if (environment.production) {
   enableProdMode();
 }
 
+initSampleSizeReporter();
+
 bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch((err) => console.error(err));
diff --git a/projects/app-lob/src/app/index/docs-layout.component.scss b/projects/app-lob/src/app/index/docs-layout.component.scss
@@ -1,6 +1 @@
-::ng-deep {
-	.custom-body {
-		color: var(--ig-surface-500-contrast);
-		background: var(--ig-surface-500);
-	}
-}
+
diff --git a/projects/app-lob/src/main.ts b/projects/app-lob/src/main.ts
@@ -6,11 +6,14 @@ import { environment } from './environments/environment';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { AppConfig } from './app/app.config';
+import { initSampleSizeReporter } from '@shared/sample-size-reporter';
 
 if (environment.production) {
     enableProdMode();
 }
 
+initSampleSizeReporter();
+
 bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch(err => console.error(err));
 
 defineCustomElements(window);
diff --git a/src/app/index/docs-layout.component.scss b/src/app/index/docs-layout.component.scss
@@ -1,6 +1 @@
-::ng-deep {
-	.custom-body {
-		color: var(--ig-surface-500-contrast);
-		background: var(--ig-surface-500);
-	}
-}
+
diff --git a/src/app/interactions/toggle/toggle-samples.scss b/src/app/interactions/toggle/toggle-samples.scss
@@ -9,7 +9,7 @@
     height: 260px;
 }
 
-.toggle-section{
+.toggle-section {
     flex-flow: row wrap;
     display: flex;
     width: 100%;
@@ -18,15 +18,6 @@
     align-items: center;
     text-align: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
-    .dark-theme & {
-        background-color: #111;
-    }
-
-    .custom-body & {
-        color: var(--ig-surface-500-contrast);
-        background-color: var(--ig-surface-500);
-    }
 }
 
 img{

diff --git a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss
@@ -13,7 +13,3 @@
         );
     }
 }
-
-igx-avatar {
-    margin: 8px;
-}
diff --git a/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss b/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss
@@ -1,5 +0,0 @@
-.igx-avatar{
-    --ig-avatar-background: #e41c77;
-    color: black;
-    margin: 15px;
-}

diff --git a/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html b/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html
@@ -1 +1 @@
-<igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="large"></igx-avatar>
+<igx-avatar src="assets/images/men/1.jpg" shape="rounded"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.scss b/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.scss
@@ -1,4 +0,0 @@
-.igx-avatar{
-    margin: 5px 15px;
-}
-

diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html
@@ -1,11 +1,3 @@
-<article class="avatars-wrapper">
-    <div class="avatar-sample initials">
-        <igx-avatar initials="JS" size="medium"></igx-avatar>
-    </div>
-    <div class="avatar-sample">
-        <igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="medium"></igx-avatar>
-    </div>
-    <div class="avatar-sample icon">
-        <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar>
-    </div>
-</article>
+<igx-avatar initials="JS"></igx-avatar>
+<igx-avatar src="assets/images/men/1.jpg"></igx-avatar>
+<igx-avatar icon="person"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss
@@ -1,22 +1,4 @@
-.avatars-wrapper {
+:host {
     display: flex;
-    flex-flow: row wrap;
-}
-
-.avatar-sample {
-    display: flex;
-    flex: 1 0 30%;
-    width: 88px;
-    height: 88px;
-    justify-content: center;
-    align-items: center;
-    margin: 15px 0;
-}
-
-.avatar-sample.initials .igx-avatar{
-    --ig-avatar-background: #e41c77;
-}
-
-.avatar-sample.icon .igx-avatar{
-    --ig-avatar-background: #9e9e9e;
+    gap: 32px;
 }
diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.ts b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.ts
@@ -9,7 +9,5 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar';
     imports: [IgxAvatarComponent]
 })
 export class AvatarSample3Component {
-
   constructor() { }
-
 }
diff --git a/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss b/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss
@@ -1,4 +0,0 @@
-.igx-avatar{
-    --ig-avatar-background: #9e9e9e;
-    margin: 15px;
-}

diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
@@ -1,8 +1,8 @@
-<article class="avatars-wrapper">
-  <div class="avatar-sample initials">
+<div class="initials">
     <igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar>
-  </div>
-  <div class="avatar-sample icon">
+</div>
+
+<div class="icon">
     <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar>
-  </div>
-</article>
+</div>
+
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
@@ -1,19 +1,19 @@
-@use "layout.scss";
-@use "igniteui-angular/theming" as *;
+@use 'layout.scss';
+@use 'igniteui-angular/theming' as *;
 
 $initials-avatar-theme: avatar-theme(
-  $background: #72da67,
-  $border-radius: 16px
+    $background: #72da67,
+    $border-radius: 16px
 );
 
 $icon-avatar-theme: avatar-theme(
-  $background: #217346,
+    $background: #217346,
 );
 
-.initials{
-  @include tokens($initials-avatar-theme);
+.initials {
+    @include tokens($initials-avatar-theme);
 }
 
-.icon{
-  @include tokens($icon-avatar-theme);
+.icon {
+    @include tokens($icon-avatar-theme);
 }
diff --git a/src/app/layouts/avatar/avatar-styling/layout.scss b/src/app/layouts/avatar/avatar-styling/layout.scss
@@ -1,13 +1,4 @@
-.avatars-wrapper {
-  display: flex;
-  flex-flow: row wrap;
-}
-
-.avatar-sample {
-  display: flex;
-  flex: 1 0 30%;
-  width: 88px;
-  justify-content: center;
-  align-items: center;
-  margin: 15px 0;
+:host {
+  display: inline-flex;
+  gap: 32px
 }
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
@@ -1,3 +0,0 @@
-igx-avatar {
-    margin: 12px;
-}

diff --git a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.html b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.html
@@ -1,8 +1,3 @@
-<igx-card elevated>
-    <igx-card-header>
-        <h5 class="igx-card-header__title">Days View</h5>
-    </igx-card-header>
-    <igx-card-content>
-        <igx-days-view [selection]="'single'"></igx-days-view>
-    </igx-card-content>
-</igx-card>
+<igx-days-view [selection]="'single'"></igx-days-view>
+
+
diff --git a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss
@@ -1,9 +1,3 @@
-.igx-card {
-    max-width: 500px;
-    min-width: 200px;
-    margin: 8px;
-}
-
-.igx-calendar {
-	--ig-size: 2;
+igx-days-view {
+    border: 1px solid var(--ig-gray-300);
 }
diff --git a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.html b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.html
@@ -1,8 +1 @@
-<igx-card elevated>
-    <igx-card-header>
-        <h5 class="igx-card-header__title">Months View</h5>
-    </igx-card-header>
-    <igx-card-content>
-        <igx-months-view></igx-months-view>
-    </igx-card-content>
-</igx-card>
+<igx-months-view></igx-months-view>
diff --git a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss
@@ -1,9 +1,3 @@
-.igx-card {
-    max-width: 500px;
-    min-width: 200px;
-    margin: 8px;
-}
-
-.igx-calendar {
-	--ig-size: 2;
+igx-months-view {
+    border: 1px solid var(--ig-gray-300);
 }
diff --git a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.html b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.html
@@ -1,10 +1,9 @@
-<div class="calendar-wrapper">
-    <div class="sample-column" (click)="changeDirectionality()">
-        <button igxButton="contained" igxRipple>Change Directionality</button>
-    </div>
-    <div class="sample-column" [attr.dir]="directionality">
-        <article>
-            <igx-calendar #calendar [weekStart]="1"></igx-calendar>
-        </article>
-    </div>
-</div>
+<div class="sample-column" (click)="changeDirectionality()">
+    <button igxButton="contained" igxRipple>Change Directionality</button>
+</div>
+
+<div class="sample-column" [attr.dir]="directionality">
+    <article>
+        <igx-calendar #calendar [weekStart]="1"></igx-calendar>
+    </article>
+</div>
diff --git a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss
@@ -1,31 +1,3 @@
-@use '../../../../variables' as *;
-
-$border-color: color($color: gray, $variant: 300);
-
 igx-calendar {
-	--ig-size: 2;
-
-    border: 1px solid $border-color;
-    border-radius: 6px;
-}
-
-.button-sample {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 30%;
-    margin: 16px 0;
-}
-
-.calendar-wrapper {
-    max-width: 650px;
-    min-width: 300px;
-    margin: 8px;
-}
-
-.location-wrapper {
-    min-width: 200px;
-    max-width: 640px;
-    margin-bottom: 32px;
+    border: 1px solid var(--ig-gray-100);
 }
diff --git a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.html b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.html
@@ -1,3 +1 @@
-<article class="calendar-wrapper">
-    <igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>
-</article>
+<igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>
diff --git a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss
@@ -1,13 +1,3 @@
-.calendar-wrapper {
-    max-width: 400px;
-    min-width: 200px;
-    margin: 8px;
+igx-calendar {
+    border: 1px solid var(--ig-gray-100);
 }
-
-.igx-calendar {
-	--ig-size: 2;
-
-    box-shadow: 0 1px 3px 0 rgba(0,0,0,.26),
-    0 1px 1px 0 rgba(0,0,0,.12),
-    0 2px 1px -1px rgba(0,0,0,.08);
- }
diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html
@@ -1,20 +1,18 @@
-<article class="sample-column location-wrapper">
-  <igx-select #select [(ngModel)]="locale">
-    <igx-prefix>Location: </igx-prefix>
+<igx-select #select [(ngModel)]="locale">
+    <igx-prefix>Location:</igx-prefix>
+
     @for (locale of locales; track locale) {
-      <igx-select-item [value]="locale">
-        {{ locale }}
-      </igx-select-item>
+        <igx-select-item [value]="locale">
+            {{ locale }}
+        </igx-select-item>
     }
-  </igx-select>
-</article>
-<article class="sample-column calendar-wrapper">
-  <igx-calendar
+</igx-select>
+
+<igx-calendar
     #calendar
     [locale]="locale"
     [weekStart]="1"
     [formatOptions]="formatOptions"
     [formatViews]="formatViews"
-    >
-  </igx-calendar>
-</article>
+>
+</igx-calendar>
diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss
@@ -1,19 +1,9 @@
-@use '../../../../variables' as *;
-
-.calendar-wrapper {
-    max-width: 650px;
-    min-width: 300px;
-    margin: 8px;
-    border: 1px solid color($color: 'gray', $variant: 300);
-    border-radius: 6px;
-}
-
-.igx-calendar {
-	--ig-size: 2;
+:host {
+    display: flex;
+    flex-direction: column;
+    gap:16px;
 }
 
-.location-wrapper {
-    min-width: 200px;
-    max-width: 640px;
-    margin-bottom: 32px;
+igx-calendar {
+    border: 1px solid var(--ig-gray-100);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,3 @@ @@
             );
         }
     }
-    igx-avatar {
-        margin: 8px;
-    }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="large"></igx-avatar>
		<igx-avatar src="assets/images/men/1.jpg" shape="rounded"></igx-avatar>