diff --git a/browser/public/meta.json b/browser/public/meta.json
index b57b1e34c3..04c1a12899 100644
--- a/browser/public/meta.json
+++ b/browser/public/meta.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-08-20 10:35:10","note":"this file is auto-generated"}
\ No newline at end of file
+{"version":"23.2.915","date":"2026-08-29 22:56:13","note":"this file is auto-generated"}
\ No newline at end of file
diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json
index b57b1e34c3..04c1a12899 100644
--- a/browser/src/navigation/SamplesBrowser.json
+++ b/browser/src/navigation/SamplesBrowser.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-08-20 10:35:10","note":"this file is auto-generated"}
\ No newline at end of file
+{"version":"23.2.915","date":"2026-08-29 22:56:13","note":"this file is auto-generated"}
\ No newline at end of file
diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css
index 086ae8114d..4419879348 100644
--- a/samples/inputs/badge/dot/src/index.css
+++ b/samples/inputs/badge/dot/src/index.css
@@ -55,8 +55,8 @@ igc-avatar {
 .icon-circle {
 	justify-content: center;
 	border-radius: 50%;
-	background: var(--ig-gray-200);
-	color: var(--ig-gray-800);
+	background: var(--ig-gray-300);
+	color: var(--ig-gray-900);
 }
 
 .notifications-card,
@@ -86,16 +86,6 @@ igc-avatar {
 	width: 12px;
 }
 
-.row-indicator igc-badge,
-.nav-icon igc-badge {
-	--ig-badge-background-color: #0057A9;
-}
-
-.row-indicator igc-badge::part(base),
-.nav-icon igc-badge::part(base) {
-	background-color: #0057A9;
-}
-
 .row-title {
 	flex: 1;
 }
@@ -106,7 +96,7 @@ igc-avatar {
 }
 
 .row-time.unread {
-	color: #0057A9;
+	color: var(--ig-gray-900);
 	font-weight: 600;
 }
 
@@ -135,7 +125,7 @@ igc-avatar {
 }
 
 .nav-item.active {
-	color: #0075D2;
+	color: var(--ig-primary-800);
 }
 
 .nav-icon {
diff --git a/samples/inputs/badge/dot/src/index.tsx b/samples/inputs/badge/dot/src/index.tsx
index 551a61e7b7..1987b6fc98 100644
--- a/samples/inputs/badge/dot/src/index.tsx
+++ b/samples/inputs/badge/dot/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
 import './index.css';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const notificationsIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1z"/></svg>';
diff --git a/samples/inputs/badge/icon/src/index.css b/samples/inputs/badge/icon/src/index.css
index 274be2aa0e..892ad58c6e 100644
--- a/samples/inputs/badge/icon/src/index.css
+++ b/samples/inputs/badge/icon/src/index.css
@@ -3,16 +3,8 @@
 
 igc-avatar {
     --size: 40px;
-    --ig-avatar-background: var(--ig-gray-700);
-    --ig-avatar-color: var(--ig-gray-50);
-}
-
-igc-badge[variant="info"] {
-    --ig-badge-background-color: #0057A9;
-}
-
-igc-badge[variant="info"]::part(base) {
-    background-color: #0057A9;
+    --ig-avatar-background: var(--ig-gray-400);
+    --ig-avatar-color: var(--ig-gray-800);
 }
 
 igc-badge igc-icon {
@@ -46,14 +38,6 @@ igc-badge igc-icon {
     height: 40px;
 }
 
-.badge-settings {
-    --ig-badge-background-color: #0070BA;
-}
-
-.badge-settings::part(base) {
-    background-color: #0070BA;
-}
-
 .badge-icon {
     display: flex;
     align-items: center;
@@ -71,13 +55,14 @@ igc-badge igc-icon {
 }
 
 .badge-icon-item span {
-    color: #556c86;
+    color: var(--ig-gray-600);
     font-family: "Aktiv Grotesk", sans-serif;
     font-size: 13px;
     font-weight: 400;
     font-style: normal;
     line-height: 20px;
     letter-spacing: 0.3px;
+    white-space: nowrap;
     transform: translateY(4px);
 }
 
diff --git a/samples/inputs/badge/icon/src/index.tsx b/samples/inputs/badge/icon/src/index.tsx
index bd4f68d39b..30353665ad 100644
--- a/samples/inputs/badge/icon/src/index.tsx
+++ b/samples/inputs/badge/icon/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const checkIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css
index 708e928a08..8c4abf8b3b 100644
--- a/samples/inputs/badge/outlined/src/index.css
+++ b/samples/inputs/badge/outlined/src/index.css
@@ -7,8 +7,8 @@ igc-badge {
 
 igc-avatar {
   --size: 40px;
-  --ig-avatar-background: var(--ig-gray-700);
-  --ig-avatar-color: var(--ig-gray-50);
+  --ig-avatar-background: var(--ig-gray-400);
+  --ig-avatar-color: var(--ig-gray-800);
 }
 
 .outlined-example igc-avatar igc-icon {
@@ -65,23 +65,6 @@ igc-avatar {
   color: var(--ig-gray-800);
 }
 
-.badge-info-blue {
-  --ig-badge-background-color: #0057A9;
-}
-
-.badge-info-blue::part(base) {
-  background-color: #0057A9;
-}
-
-.payment-dot-blue {
-  --ig-badge-background-color: #0057A9;
-  --ig-badge-dot-size: 0.5rem;
-}
-
-.payment-dot-blue::part(base) {
-  background-color: #0057A9;
-}
-
 igc-badge::part(base),
 igc-badge igc-icon {
   color: var(--ig-gray-50);
@@ -134,7 +117,7 @@ igc-badge igc-icon {
 }
 
 .step-label {
-  color: #556c86;
+  color: var(--ig-gray-600);
   font-family: "Aktiv Grotesk", sans-serif;
   font-size: 13px;
   font-weight: 400;
diff --git a/samples/inputs/badge/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx
index a110275e9b..f91dc5b296 100644
--- a/samples/inputs/badge/outlined/src/index.tsx
+++ b/samples/inputs/badge/outlined/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const favoriteBorderIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>';
@@ -27,7 +27,7 @@ export default function BadgeOutlined(): JSX.Element {
         <div className="icon-circle">
           <IgrIcon name="favorite_border" collection="material" />
         </div>
-        <IgrBadge variant="info" outlined={true} className="badge-info-blue">23</IgrBadge>
+        <IgrBadge variant="info" outlined={true}>23</IgrBadge>
       </div>
       <div className="outlined-example">
         <IgrAvatar initials="AZ" shape="rounded" />
@@ -47,7 +47,7 @@ export default function BadgeOutlined(): JSX.Element {
                   {step.index}
                 </span>
                 {step.current && (
-                  <IgrBadge dot={true} variant="info" outlined={true} className="payment-dot-blue" />
+                  <IgrBadge dot={true} variant="info" outlined={true} />
                 )}
               </div>
               <span className="step-label">{step.label}</span>
diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css
index 6a1e390d1f..02d42c4142 100644
--- a/samples/inputs/badge/overview/src/index.css
+++ b/samples/inputs/badge/overview/src/index.css
@@ -33,7 +33,6 @@ igc-badge {
 }
 
 .event-example igc-chip::part(base) {
-  background-color: #E0E0E0;
   border-radius: 999px;
 }
 
@@ -42,11 +41,6 @@ igc-badge {
   inset-inline-end: -0.8rem;
 }
 
-.event-example igc-badge::part(base) {
-  background-color: #0057A9;
-  color: var(--ig-gray-50);
-}
-
 .icon-example igc-badge {
   inset-block-start: 0;
   inset-inline-end: 0;
diff --git a/samples/inputs/badge/overview/src/index.tsx b/samples/inputs/badge/overview/src/index.tsx
index 46b6333d63..976c1396ca 100644
--- a/samples/inputs/badge/overview/src/index.tsx
+++ b/samples/inputs/badge/overview/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrAvatar, IgrBadge, IgrChip, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const checkIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css
index 4d24943e5a..9d5bcd82c9 100644
--- a/samples/inputs/badge/shape/src/index.css
+++ b/samples/inputs/badge/shape/src/index.css
@@ -20,7 +20,7 @@
 
 .row-label {
   justify-self: end;
-  color: #556c86;
+  color: var(--ig-gray-600);
   font-family: "Aktiv Grotesk", sans-serif;
   font-size: 13px;
   font-weight: 400;
@@ -32,20 +32,3 @@
 .badge-small {
   --ig-size: var(--ig-size-small);
 }
-
-.badge-info-blue {
-  --ig-badge-background-color: #0057A9;
-}
-
-.badge-info-blue::part(base) {
-  background-color: #0057A9;
-}
-
-igc-badge::part(base),
-igc-badge igc-icon {
-  color: var(--ig-gray-50);
-}
-
-igc-badge igc-icon {
-  fill: var(--ig-gray-50);
-}
diff --git a/samples/inputs/badge/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx
index fe423f3edf..0fb348a77b 100644
--- a/samples/inputs/badge/shape/src/index.tsx
+++ b/samples/inputs/badge/shape/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const checkIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
@@ -26,11 +26,11 @@ export default function BadgeShape(): JSX.Element {
             </div>
             <div className="badge-shape-row">
                 <span className="row-label">Square</span>
-                <IgrBadge variant="info" shape="square" className="badge-info-blue">
+                <IgrBadge variant="info" shape="square">
                     <IgrIcon name="check" collection="material" />
                 </IgrBadge>
-                <IgrBadge variant="info" shape="square" className="badge-info-blue">2</IgrBadge>
-                <IgrBadge variant="info" shape="square" className="badge-small badge-info-blue">
+                <IgrBadge variant="info" shape="square">2</IgrBadge>
+                <IgrBadge variant="info" shape="square" className="badge-small">
                     <IgrIcon name="check" collection="material" />
                 </IgrBadge>
             </div>
diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css
index 2806b0cd4e..e826bceb76 100644
--- a/samples/inputs/badge/size/src/index.css
+++ b/samples/inputs/badge/size/src/index.css
@@ -21,7 +21,7 @@
 
 .row-label {
   justify-self: end;
-  color: #556c86;
+  color: var(--ig-gray-600);
   font-family: "Aktiv Grotesk", sans-serif;
   font-size: 13px;
   font-weight: 400;
@@ -30,23 +30,6 @@
   letter-spacing: 0.3px;
 }
 
-.badge-info-blue {
-  --ig-badge-background-color: #0057A9;
-}
-
-.badge-info-blue::part(base) {
-  background-color: #0057A9;
-}
-
-igc-badge::part(base),
-igc-badge igc-icon {
-  color: var(--ig-gray-50);
-}
-
-igc-badge igc-icon {
-  fill: var(--ig-gray-50);
-}
-
 .badge-large { --ig-size: var(--ig-size-large); }
 .badge-medium { --ig-size: var(--ig-size-medium); }
 .badge-small { --ig-size: var(--ig-size-small); }
diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx
index 0a997231d4..ddfb5f56d5 100644
--- a/samples/inputs/badge/size/src/index.tsx
+++ b/samples/inputs/badge/size/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const checkIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
@@ -17,7 +17,7 @@ export default function BadgeSize(): JSX.Element {
             <div className="badge-size-row badge-small">
                 <span className="row-label">Small</span>
                 <IgrBadge dot={true} variant="danger" />
-                <IgrBadge variant="info" className="badge-info-blue">2</IgrBadge>
+                <IgrBadge variant="info">2</IgrBadge>
                 <IgrBadge variant="success">
                     <IgrIcon name="check" collection="material" />
                 </IgrBadge>
@@ -25,7 +25,7 @@ export default function BadgeSize(): JSX.Element {
             <div className="badge-size-row badge-medium">
                 <span className="row-label">Medium</span>
                 <IgrBadge dot={true} variant="danger" />
-                <IgrBadge variant="info" className="badge-info-blue">2</IgrBadge>
+                <IgrBadge variant="info">2</IgrBadge>
                 <IgrBadge variant="success">
                     <IgrIcon name="check" collection="material" />
                 </IgrBadge>
@@ -33,7 +33,7 @@ export default function BadgeSize(): JSX.Element {
             <div className="badge-size-row badge-large">
                 <span className="row-label">Large</span>
                 <IgrBadge dot={true} variant="danger" />
-                <IgrBadge variant="info" className="badge-info-blue">2</IgrBadge>
+                <IgrBadge variant="info">2</IgrBadge>
                 <IgrBadge variant="success">
                     <IgrIcon name="check" collection="material" />
                 </IgrBadge>
diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css
index d6d6fca0d4..dd46d8149c 100644
--- a/samples/inputs/badge/styling/src/index.css
+++ b/samples/inputs/badge/styling/src/index.css
@@ -53,9 +53,9 @@ igc-badge {
 }
 
 .styling-item.green igc-avatar {
-    --icon-color: #248436;
-    --ig-avatar-background: #A9CEB0;
-    --ig-avatar-color: #248436;
+    --icon-color: var(--ig-success-900);
+    --ig-avatar-background: var(--ig-success-200);
+    --ig-avatar-color: var(--ig-success-900);
 }
 
 .styling-item.pink igc-avatar {
diff --git a/samples/inputs/badge/styling/src/index.tsx b/samples/inputs/badge/styling/src/index.tsx
index ca4ee2ae91..daa7e74620 100644
--- a/samples/inputs/badge/styling/src/index.tsx
+++ b/samples/inputs/badge/styling/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const personIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>';
diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css
index 101b4607d2..d98898d2b6 100644
--- a/samples/inputs/badge/tailwind-styling/src/index.css
+++ b/samples/inputs/badge/tailwind-styling/src/index.css
@@ -11,12 +11,12 @@ igc-badge {
 
 igc-avatar {
     --size: 40px;
-    --ig-avatar-background: var(--ig-gray-700);
-    --ig-avatar-color: var(--ig-gray-50);
+    --ig-avatar-background: var(--ig-gray-400);
+    --ig-avatar-color: var(--ig-gray-800);
 }
 
 igc-avatar igc-icon {
-    color: var(--ig-gray-50);
+    color: var(--ig-gray-800);
 }
 
 .badge-close {
diff --git a/samples/inputs/badge/tailwind-styling/src/index.tsx b/samples/inputs/badge/tailwind-styling/src/index.tsx
index a34c17722e..06adaf37b9 100644
--- a/samples/inputs/badge/tailwind-styling/src/index.tsx
+++ b/samples/inputs/badge/tailwind-styling/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const personIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>';
diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css
index fa38411058..d6398f8cdf 100644
--- a/samples/inputs/badge/type/src/index.css
+++ b/samples/inputs/badge/type/src/index.css
@@ -51,7 +51,7 @@ igc-badge {
 }
 
 .badge-type-item span {
-  color: #556c86;
+  color: var(--ig-gray-600);
   font-family: "Aktiv Grotesk", sans-serif;
   font-size: 13px;
   font-weight: 400;
diff --git a/samples/inputs/badge/type/src/index.tsx b/samples/inputs/badge/type/src/index.tsx
index e5b881c715..38237b680f 100644
--- a/samples/inputs/badge/type/src/index.tsx
+++ b/samples/inputs/badge/type/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const checkIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css
index 96358179e2..c6c7bb27f2 100644
--- a/samples/inputs/badge/variants/src/index.css
+++ b/samples/inputs/badge/variants/src/index.css
@@ -10,13 +10,13 @@ igc-badge {
 
 igc-avatar {
 	--ig-size: var(--ig-size-small);
-	--ig-avatar-background: var(--ig-gray-700);
-	--ig-avatar-color: var(--ig-gray-50);
+	--ig-avatar-background: var(--ig-gray-400);
+	--ig-avatar-color: var(--ig-gray-800);
 }
 
 .variant-item:first-child igc-avatar igc-icon,
 .variant-item:nth-child(4) igc-avatar igc-icon {
-	color: var(--ig-gray-50);
+	color: var(--ig-gray-800);
 }
 
 .badge-variants {
@@ -36,7 +36,7 @@ igc-avatar {
 }
 
 .variant-item span {
-	color: #556c86;
+	color: var(--ig-gray-600);
 	font-family: "Aktiv Grotesk", sans-serif;
 	font-size: 13px;
 	font-weight: 400;
@@ -49,33 +49,3 @@ igc-avatar {
 	position: relative;
 	display: flex;
 }
-
-.badge-info-blue {
-	--ig-badge-background-color: #0057A9;
-}
-
-.badge-info-blue::part(base) {
-	background-color: #0057A9;
-}
-
-.badge-primary-blue {
-	--ig-badge-background-color: #0070BA;
-}
-
-.badge-primary-blue::part(base) {
-	background-color: #0070BA;
-}
-
-.badge-warning-black::part(base) {
-	background-color: #FAA419;
-	color: #000;
-}
-
-igc-badge::part(base),
-igc-badge igc-icon {
-	color: var(--ig-gray-50);
-}
-
-igc-badge igc-icon {
-	fill: var(--ig-gray-50);
-}
diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx
index 47cfdd62e8..7dec45fbc0 100644
--- a/samples/inputs/badge/variants/src/index.tsx
+++ b/samples/inputs/badge/variants/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/material.css';
 
 const checkIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
@@ -28,14 +28,14 @@ export default function BadgeVariants(): JSX.Element {
                     <IgrAvatar shape="circle">
                         <IgrIcon name="notifications" collection="material" />
                     </IgrAvatar>
-                    <IgrBadge outlined={true} variant="primary" className="badge-primary-blue">2</IgrBadge>
+                    <IgrBadge outlined={true} variant="primary">2</IgrBadge>
                 </div>
                 <span>Primary</span>
             </div>
             <div className="variant-item">
                 <div className="avatar-wrapper">
                     <IgrAvatar initials="AZ" shape="circle" />
-                    <IgrBadge outlined={true} variant="info" className="badge-info-blue">
+                    <IgrBadge outlined={true} variant="info">
                         <IgrIcon name="check" collection="material" />
                     </IgrBadge>
                 </div>
@@ -58,7 +58,7 @@ export default function BadgeVariants(): JSX.Element {
                     <IgrAvatar shape="circle">
                         <IgrIcon name="mail" collection="material" />
                     </IgrAvatar>
-                    <IgrBadge outlined={true} variant="warning" className="badge-warning-black">2</IgrBadge>
+                    <IgrBadge outlined={true} variant="warning">2</IgrBadge>
                 </div>
                 <span>Warn</span>
             </div>
diff --git a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css b/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css
deleted file mode 100644
index 3ba295daf3..0000000000
--- a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css
+++ /dev/null
@@ -1,39 +0,0 @@
-igc-ripple {
-    --color: gray;
-}
-
-.button-group-alignment {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 60px;
-    padding: 24px;
-}
-
-.button-group-alignment-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 16px;
-}
-
-.button-group-alignment-item igc-button-group {
-    width: 240px;
-}
-
-.button-group-alignment-item:first-child igc-button-group {
-    width: 320px;
-}
-
-.button-group-alignment-item span {
-    width: 100%;
-    text-align: center;
-    color: #556c86;
-    font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
-}
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/src/index.css b/samples/inputs/button-group/alignment/src/index.css
index 1f53b8aa05..7e486aa9f5 100644
--- a/samples/inputs/button-group/alignment/src/index.css
+++ b/samples/inputs/button-group/alignment/src/index.css
@@ -1,2 +1,34 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+.sbSwitch {
+    display: grid;
+    place-items: center;
+    height: 100vh;
+}
+
+.sample-layout {
+    display: flex;
+    gap: 2rem;
+    align-items: start;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.sample-inner-layout {
+    display: grid;
+    gap: 0.5rem;
+    align-items: start;
+}
+
+igc-button-group {
+    width: 17.5rem;
+}
+
+.sample-layout span {
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+    margin: 0.5rem;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/src/index.tsx b/samples/inputs/button-group/alignment/src/index.tsx
index aa28f9252e..6471cf624c 100644
--- a/samples/inputs/button-group/alignment/src/index.tsx
+++ b/samples/inputs/button-group/alignment/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupAlignment.css';
 import './index.css';
 
 const cities = ['Sofia', 'London', 'New York'];
@@ -11,9 +10,9 @@ const alignments: Array<'horizontal' | 'vertical'> = ['horizontal', 'vertical'];
 
 export default function ButtonGroupAlignment(): JSX.Element {
     return (
-        <div className="button-group-alignment">
+        <div className="sample-layout">
             {alignments.map((alignment) => (
-                <div className="button-group-alignment-item" key={alignment}>
+                <div className="sample-inner-layout" key={alignment}>
                     <span>{alignment.charAt(0).toUpperCase() + alignment.slice(1)}</span>
                     <IgrButtonGroup alignment={alignment}>
                         {cities.map((city) => (
diff --git a/samples/inputs/button-group/custom-toggle/src/index.css b/samples/inputs/button-group/custom-toggle/src/index.css
index 06a54b66a2..dd43f14e32 100644
--- a/samples/inputs/button-group/custom-toggle/src/index.css
+++ b/samples/inputs/button-group/custom-toggle/src/index.css
@@ -1,13 +1,9 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-
-igc-button-group {
-  display: inline-block;
-  width: 300px;
+.sbSwitch {
+  display: grid;
+  place-items: center;
+  height: 100vh;
 }
 
-.container.sample {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+igc-button-group {
+  max-width: 18.75rem;
 }
diff --git a/samples/inputs/button-group/custom-toggle/src/index.tsx b/samples/inputs/button-group/custom-toggle/src/index.tsx
index fe93f01e7f..283cba752b 100644
--- a/samples/inputs/button-group/custom-toggle/src/index.tsx
+++ b/samples/inputs/button-group/custom-toggle/src/index.tsx
@@ -20,14 +20,12 @@ icons.forEach(([name, text]) => registerIconFromText(name, text, 'material'));
 
 export default function ButtonGroupCustomToggle() {
   return (
-    <div className="container sample">
-      <IgrButtonGroup selectionMode="multi">
-        <IgrToggleButton selected={true}><IgrIcon name="border_top" collection="material" /></IgrToggleButton>
-        <IgrToggleButton><IgrIcon name="border_right" collection="material" /></IgrToggleButton>
-        <IgrToggleButton><IgrIcon name="border_bottom" collection="material" /></IgrToggleButton>
-        <IgrToggleButton><IgrIcon name="border_left" collection="material" /></IgrToggleButton>
-      </IgrButtonGroup>
-    </div>
+    <IgrButtonGroup selectionMode="multi">
+      <IgrToggleButton selected={true}><IgrIcon name="border_top" collection="material" /></IgrToggleButton>
+      <IgrToggleButton><IgrIcon name="border_right" collection="material" /></IgrToggleButton>
+      <IgrToggleButton><IgrIcon name="border_bottom" collection="material" /></IgrToggleButton>
+      <IgrToggleButton><IgrIcon name="border_left" collection="material" /></IgrToggleButton>
+    </IgrButtonGroup>
   );
 }
 
diff --git a/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css b/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css
deleted file mode 100644
index 0595d21413..0000000000
--- a/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css
+++ /dev/null
@@ -1,76 +0,0 @@
-igc-ripple {
-    --color: gray;
-}
-
-.button-group-states {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px;
-}
-
-.button-group-states-row {
-    display: grid;
-    grid-template-columns: 120px 164px 164px 164px;
-    align-items: center;
-    gap: 16px;
-}
-
-.button-group-states .row-label,
-.button-group-states .column-label {
-    color: #556c86;
-    font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
-}
-
-.button-group-states .column-label {
-    text-align: center;
-}
-
-.button-group-states igc-button-group {
-    width: 164px;
-}
-
-.button-group-states igc-toggle-button {
-    width: 100%;
-}
-
-.button-group-states igc-icon {
-    font-size: 16px;
-}
-
-.button-group-states igc-toggle-button[selected]::part(toggle) {
-    background: var(--item-active-background);
-    border-color: var(--item-active-border-color);
-    color: var(--item-hover-text-color);
-}
-
-.button-group-states igc-toggle-button.state-hover:not([selected])::part(toggle) {
-    background: var(--item-hover-background);
-    border-color: var(--item-hover-border-color);
-    color: var(--item-hover-text-color);
-}
-
-.button-group-states igc-toggle-button.state-focused:not([selected])::part(toggle) {
-    background: var(--item-focused-hover-background);
-    border-color: var(--item-focused-hover-border-color);
-    color: var(--item-focused-hover-text-color);
-}
-
-.button-group-states igc-toggle-button.state-hover[selected]::part(toggle) {
-    background: var(--item-selected-active-background);
-    border-color: var(--item-selected-active-border-color);
-    color: var(--item-selected-hover-text-color);
-}
-
-.button-group-states igc-toggle-button.state-focused[selected]::part(toggle) {
-    background: var(--item-selected-active-background);
-    border-color: var(--item-selected-active-border-color);
-    color: var(--item-focused-hover-text-color);
-}
\ No newline at end of file
diff --git a/samples/inputs/button-group/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css
index 1f53b8aa05..aaadcf3f91 100644
--- a/samples/inputs/button-group/interaction-states/src/index.css
+++ b/samples/inputs/button-group/interaction-states/src/index.css
@@ -1,2 +1,117 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+.sbSwitch {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    height: 100vh;
+}
+
+.states-matrix {
+    display: grid;
+    grid-template-columns: auto repeat(3, minmax(7.75rem, 1fr));
+    gap: 1rem;
+    inline-size: 100%;
+    max-inline-size: 42.5rem;
+    margin-inline: auto;
+}
+
+.states-row {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+}
+
+.row-label,
+.column-label,
+.cell-label {
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}
+
+.column-label,
+.cell-label {
+    text-align: center;
+}
+
+.cell-label {
+    display: none;
+}
+
+.state-cell {
+    display: grid;
+    gap: 0.25rem;
+}
+
+igc-icon {
+    --ig-icon-size: 1rem;
+}
+
+@container (width < 34rem) {
+    .states-matrix {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .states-row {
+        grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
+    }
+
+    header.states-row {
+        display: none;
+    }
+
+    .row-label {
+        grid-column: 1 / -1;
+    }
+
+    .cell-label {
+        display: block;
+        text-align: start;
+        margin-block-start: 1rem;
+    }
+
+    .state-cell {
+        margin-inline-end: 0.5rem;
+    }
+}
+
+/* WARNING START: Demo overrides only. Do not copy to production. */
+/* Forced state classes are used here solely to present all component states visually. */
+igc-button-group {
+    pointer-events: none;
+}
+
+igc-toggle-button[selected]::part(toggle) {
+    background: var(--item-active-background);
+    border-color: var(--item-active-border-color);
+    color: var(--item-hover-text-color);
+}
+
+igc-toggle-button.state-hover:not([selected])::part(toggle) {
+    background: var(--item-hover-background);
+    border-color: var(--item-hover-border-color);
+    color: var(--item-hover-text-color);
+}
+
+igc-toggle-button.state-focused:not([selected])::part(toggle) {
+    background: var(--item-focused-hover-background);
+    border-color: var(--item-focused-hover-border-color);
+    color: var(--item-focused-hover-text-color);
+}
+
+igc-toggle-button.state-hover[selected]::part(toggle) {
+    background: var(--item-selected-active-background);
+    border-color: var(--item-selected-active-border-color);
+    color: var(--item-selected-hover-text-color);
+}
+
+igc-toggle-button.state-focused[selected]::part(toggle) {
+    background: var(--item-selected-active-background);
+    border-color: var(--item-selected-active-border-color);
+    color: var(--item-focused-hover-text-color);
+}
+/* WARNING END */
\ No newline at end of file
diff --git a/samples/inputs/button-group/interaction-states/src/index.tsx b/samples/inputs/button-group/interaction-states/src/index.tsx
index d039104a6d..f809b7f822 100644
--- a/samples/inputs/button-group/interaction-states/src/index.tsx
+++ b/samples/inputs/button-group/interaction-states/src/index.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton } from 'igniteui-react';
+import {
+    IgrButtonGroup,
+    IgrIcon,
+    IgrRipple,
+    IgrToggleButton,
+    registerIconFromText
+} from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupStates.css';
 import './index.css';
 
 const rows: Array<{ label: string; selected: boolean }> = [
@@ -12,6 +17,12 @@ const rows: Array<{ label: string; selected: boolean }> = [
 
 const states = ['idle', 'hover', 'focused'];
 
+registerIconFromText(
+    'notifications',
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6v-5a7 7 0 0 0-5.5-6.84V3a1.5 1.5 0 0 0-3 0v1.16A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Z"/></svg>',
+    'material'
+);
+
 function StateButton({ selected, state }: { selected: boolean; state: string }): JSX.Element {
     return (
         <IgrToggleButton className={`state-${state}`} selected={selected} value="button">
@@ -25,22 +36,29 @@ function StateButton({ selected, state }: { selected: boolean; state: string }):
 
 export default function ButtonGroupStates(): JSX.Element {
     return (
-        <div className="button-group-states">
-            <div className="button-group-states-row">
+        <article className="states-matrix">
+            <header className="states-row">
                 <span className="row-label" />
                 {states.map((state) => (
                     <span className="column-label" key={state}>
                         {state.charAt(0).toUpperCase() + state.slice(1)}
                     </span>
                 ))}
-            </div>
+            </header>
             {rows.map((row) => (
-                <div className="button-group-states-row" key={row.label}>
+                <section className="states-row" key={row.label}>
                     <span className="row-label">{row.label}</span>
-                    {states.map((state) => <IgrButtonGroup key={state}><StateButton selected={row.selected} state={state} /></IgrButtonGroup>)}
-                </div>
+                    {states.map((state) => (
+                        <div className="state-cell" key={state}>
+                            <span className="cell-label">{state.charAt(0).toUpperCase() + state.slice(1)}</span>
+                            <IgrButtonGroup>
+                                <StateButton selected={row.selected} state={state} />
+                            </IgrButtonGroup>
+                        </div>
+                    ))}
+                </section>
             ))}
-        </div>
+        </article>
     );
 }
 
diff --git a/samples/inputs/button-group/layout/src/ButtonGroupLayout.css b/samples/inputs/button-group/layout/src/ButtonGroupLayout.css
deleted file mode 100644
index 936a3bc2f3..0000000000
--- a/samples/inputs/button-group/layout/src/ButtonGroupLayout.css
+++ /dev/null
@@ -1,19 +0,0 @@
-igc-ripple {
-    --color: gray;
-}
-
-.button-group-layout {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 80px;
-    min-height: 7rem;
-}
-
-.button-group-layout igc-toggle-button {
-    min-width: 100px;
-}
-
-.button-group-layout igc-icon {
-    --size: 20px;
-}
diff --git a/samples/inputs/button-group/layout/src/index.css b/samples/inputs/button-group/layout/src/index.css
index e41c7c710b..b4583727ba 100644
--- a/samples/inputs/button-group/layout/src/index.css
+++ b/samples/inputs/button-group/layout/src/index.css
@@ -1,11 +1,28 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+.sbSwitch {
+	display: grid;
+	place-items: center;
+	height: 100vh;
+}
+
+.sample-layout {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+    min-height: 5.5rem;
+}
 
 igc-button-group {
-  display: inline-block;
-  max-width: 400px;
+    display: inline-block;
+    max-width: 400px;
+}
+
+.sample-layout igc-toggle-button {
+    min-width: 100px;
 }
 
-igc-ripple {
-  --color: grey;
+.sample-layout igc-icon {
+    --ig-size: 20px;
+    --igc-icon-size: 20px;
 }
diff --git a/samples/inputs/button-group/layout/src/index.tsx b/samples/inputs/button-group/layout/src/index.tsx
index 3bc28e0a57..8c5fafd0ac 100644
--- a/samples/inputs/button-group/layout/src/index.tsx
+++ b/samples/inputs/button-group/layout/src/index.tsx
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupLayout.css';
 import './index.css';
 
 const alignLeftIcon =
@@ -26,7 +25,7 @@ export default function ButtonGroupLayout(): JSX.Element {
     }, []);
 
     return (
-        <div className="button-group-layout">
+        <div className="sample-layout">
             <IgrButtonGroup>
                 {layouts.map((layout) => (
                     <IgrToggleButton key={layout.value} value={layout.value}>
diff --git a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css b/samples/inputs/button-group/overview/src/ButtonGroupOverview.css
deleted file mode 100644
index 88a89a0721..0000000000
--- a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css
+++ /dev/null
@@ -1,40 +0,0 @@
- .container.sample {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 1rem;
-}
-
-igc-button-group {
-    display: block;
-    width: 280px;
-    max-width: 100%;
-}
-
-igc-ripple {
-    --color: gray;
-}
-
-.album {
-    margin-top: 8px;
-    width: 280px;
-    max-width: 100%;
-}
-
-.album-title {
-    display: inline-block;
-    margin-bottom: 8px;
-    color: #1f89d4;
-}
-
-.album-photos {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 4px;
-}
-
-.album-photos img {
-    width: 100%;
-    object-fit: cover;
-    display: block;
-}
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/src/index.css b/samples/inputs/button-group/overview/src/index.css
index 1f53b8aa05..2190c366e5 100644
--- a/samples/inputs/button-group/overview/src/index.css
+++ b/samples/inputs/button-group/overview/src/index.css
@@ -1,2 +1,36 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+.sbSwitch {
+    display: grid;
+    place-items: center;
+    height: 100vh;
+}
+
+.sample-layout {
+    display: grid;
+    width: 17.5rem;
+    gap: 0.5rem;
+}
+
+igc-button-group {
+    max-width: 17.5rem;
+}
+
+.album-title {
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.429;
+    letter-spacing: 0.0178571em;
+    margin-block: 0 0.5rem;
+    color: var(--ig-primary-500);
+}
+
+.album-photos {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.25rem;
+}
+
+.album-photos img {
+    width: 100%;
+    object-fit: cover;
+    display: block;
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/src/index.tsx b/samples/inputs/button-group/overview/src/index.tsx
index 923e753db6..9226483344 100644
--- a/samples/inputs/button-group/overview/src/index.tsx
+++ b/samples/inputs/button-group/overview/src/index.tsx
@@ -6,7 +6,6 @@ import {
     IgrToggleButton,
   } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupOverview.css';
 import './index.css';
 
 
@@ -36,7 +35,7 @@ export default function ButtonGroupOverview() {
     const album = albums[source];
 
     return (
-        <div className="container sample">
+        <div className="sample-layout">
             <IgrButtonGroup
                 selection="single-required"
                 onSelect={(e: CustomEvent<string | undefined>) => {
@@ -56,7 +55,7 @@ export default function ButtonGroupOverview() {
             </IgrButtonGroup>
 
             <div className="album">
-                <span className="album-title">{album.title}</span>
+                <p className="album-title">{album.title}</p>
                 <div className="album-photos">
                     {album.photos.map((photo) => (
                         <img key={photo} src={photo} alt={album.title} />
diff --git a/samples/inputs/button-group/selection/src/ButtonGroupSelection.css b/samples/inputs/button-group/selection/src/ButtonGroupSelection.css
deleted file mode 100644
index 6d0a1eb8a7..0000000000
--- a/samples/inputs/button-group/selection/src/ButtonGroupSelection.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.selection-samples {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 32px;
-    padding-left: 32px;
-}
-
-.selection-sample {
-    display: flex;
-    align-items: center;
-    gap: 30px;
-}
-
-.selection-sample > span {
-    width: 120px;
-    text-align: right;
-    color: #556c86;
-    font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
-}
-
-.selection-sample igc-button-group {
-    width: 200px;
-}
-
-igc-ripple {
-    --color: gray;
-}
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/src/index.css b/samples/inputs/button-group/selection/src/index.css
index 1f53b8aa05..55d7c524ad 100644
--- a/samples/inputs/button-group/selection/src/index.css
+++ b/samples/inputs/button-group/selection/src/index.css
@@ -1,2 +1,46 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+.sbSwitch {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    height: 100vh;
+}
+
+.selection-samples {
+    display: grid;
+    grid-template-columns: auto minmax(11.25rem, 1fr);
+    align-items: center;
+    gap: 1.5rem 2rem;
+    inline-size: 100%;
+    max-inline-size: 23.75rem;
+    margin-inline: auto;
+}
+
+.sample-label {
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+    text-align: end;
+}
+
+igc-button-group {
+    inline-size: 100%;
+}
+
+@container (width < 22rem) {
+    .selection-samples {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 0.25rem;
+    }
+
+    .sample-label {
+        text-align: start;
+    }
+
+    .sample-label:not(:first-of-type) {
+        margin-block-start: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/src/index.tsx b/samples/inputs/button-group/selection/src/index.tsx
index 684c40b64c..db3955c692 100644
--- a/samples/inputs/button-group/selection/src/index.tsx
+++ b/samples/inputs/button-group/selection/src/index.tsx
@@ -8,7 +8,6 @@ import {
     registerIconFromText,
   } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupSelection.css';
 import './index.css';
 
 const icons = [
@@ -34,10 +33,10 @@ export default function ButtonGroupSelectionSample() {
     }, [])
 
     return (
-        <div className="container sample selection-samples">
+        <div className="selection-samples">
             {(['single', 'single-required', 'multiple'] as const).map((selection) => (
-                <div className="selection-sample" key={selection}>
-                    <span>{selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)}</span>
+                <React.Fragment key={selection}>
+                    <span className="sample-label">{selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)}</span>
                     <IgrButtonGroup selection={selection}>
                         <IgrToggleButton value="bold" selected={selection === 'single-required' || selection === 'multiple'}>
                             <IgrIcon name="bold" collection="material" />
@@ -52,7 +51,7 @@ export default function ButtonGroupSelectionSample() {
                             <IgrRipple />
                         </IgrToggleButton>
                     </IgrButtonGroup>
-                </div>
+                </React.Fragment>
             ))}
       </div>
     );
diff --git a/samples/inputs/button-group/size/src/ButtonGroupSize.css b/samples/inputs/button-group/size/src/ButtonGroupSize.css
deleted file mode 100644
index 5a83e77d14..0000000000
--- a/samples/inputs/button-group/size/src/ButtonGroupSize.css
+++ /dev/null
@@ -1,33 +0,0 @@
-igc-ripple {
-    --color: gray;
-}
-
-.button-group-size {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 32px;
-    padding: 13px;
-    padding-left: 3rem;
-}
-
-.button-group-size-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 32px;
-}
-
-.button-group-size-item span {
-    width: 52px;
-    text-align: right;
-    color: #556c86;
-    font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
-}
diff --git a/samples/inputs/button-group/size/src/index.css b/samples/inputs/button-group/size/src/index.css
index 1f53b8aa05..1933c706c6 100644
--- a/samples/inputs/button-group/size/src/index.css
+++ b/samples/inputs/button-group/size/src/index.css
@@ -1,2 +1,54 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+.sbSwitch {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    place-items: center;
+    height: 100vh;
+}
+
+.button-group-size {
+    display: grid;
+    grid-template-columns: auto minmax(15rem, 1fr);
+    align-items: center;
+    gap: 1.5rem 2rem;
+    inline-size: 100%;
+    max-inline-size: 30rem;
+    margin-inline: auto;
+}
+
+.sample-label {
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+    text-align: end;
+}
+
+igc-button-group:nth-of-type(1n) {
+    --ig-size: var(--ig-size-small);
+}
+
+igc-button-group:nth-of-type(2n) {
+    --ig-size: var(--ig-size-medium);
+}
+
+igc-button-group:nth-of-type(3n) {
+    --ig-size: var(--ig-size-large);
+}
+
+@container (width < 22rem) {
+    .button-group-size {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 0.25rem;
+    }
+
+    .sample-label {
+        text-align: start;
+    }
+
+    .sample-label:not(:first-of-type) {
+        margin-block-start: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/src/index.tsx b/samples/inputs/button-group/size/src/index.tsx
index 28ce3d496c..0fc3b83870 100644
--- a/samples/inputs/button-group/size/src/index.tsx
+++ b/samples/inputs/button-group/size/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupSize.css';
 import './index.css';
 
 const cities = ['Sofia', 'London', 'New York'];
@@ -11,13 +10,11 @@ const sizes = ['small', 'medium', 'large'];
 
 export default function ButtonGroupSize(): JSX.Element {
     return (
-        <div className="button-group-size">
+        <article className="button-group-size">
             {sizes.map((size) => (
-                <div className="button-group-size-item" key={size}>
-                    <span>{size.charAt(0).toUpperCase() + size.slice(1)}</span>
-                    <IgrButtonGroup
-                        style={{ '--ig-size': `var(--ig-size-${size})` } as React.CSSProperties}
-                    >
+                <React.Fragment key={size}>
+                    <span className="sample-label">{size.charAt(0).toUpperCase() + size.slice(1)}</span>
+                    <IgrButtonGroup>
                         {cities.map((city) => (
                             <IgrToggleButton
                                 key={city}
@@ -28,9 +25,9 @@ export default function ButtonGroupSize(): JSX.Element {
                             </IgrToggleButton>
                         ))}
                     </IgrButtonGroup>
-                </div>
+                </React.Fragment>
             ))}
-        </div>
+        </article>
     );
 }
 
diff --git a/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css b/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css
deleted file mode 100644
index b64aef2ce9..0000000000
--- a/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css
+++ /dev/null
@@ -1,37 +0,0 @@
-igc-ripple {
-    --color: gray;
-}
-
-.button-group-interaction-states {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px;
-}
-
-.button-group-interaction-states-row {
-    display: grid;
-    grid-template-columns: 120px 160px 160px;
-    align-items: center;
-    gap: 16px;
-}
-
-.button-group-interaction-states .row-label,
-.button-group-interaction-states .column-label {
-    color: #556c86;
-    font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
-    text-align: center;
-}
-
-.button-group-interaction-states-row igc-button-group:not([disabled]) igc-toggle-button[selected]::part(toggle) {
-    background: var(--item-active-background);
-    border-color: var(--item-active-border-color);
-    color: var(--item-selected-text-color);
-}
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/src/index.css b/samples/inputs/button-group/states/src/index.css
index 1f53b8aa05..fde4086238 100644
--- a/samples/inputs/button-group/states/src/index.css
+++ b/samples/inputs/button-group/states/src/index.css
@@ -1,2 +1,88 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+.sbSwitch {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    height: 100vh;
+}
+
+.states-matrix {
+    --state-columns: 2;
+
+    display: grid;
+    grid-template-columns: auto repeat(var(--state-columns), minmax(7.5rem, 1fr));
+    gap: 1rem;
+    inline-size: 100%;
+    max-inline-size: 32.5rem;
+    margin-inline: auto;
+}
+
+.states-row {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+}
+
+.row-label,
+.column-label,
+.cell-label {
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}
+
+.column-label,
+.cell-label {
+    text-align: center;
+}
+
+.cell-label {
+    display: none;
+}
+
+.state-cell {
+    display: grid;
+    gap: 0.25rem;
+}
+
+@container (width < 24rem) {
+    .states-matrix {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .states-row {
+        grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
+        column-gap: 0.5rem;
+    }
+
+    header.states-row {
+        display: none;
+    }
+
+    .row-label {
+        grid-column: 1 / -1;
+    }
+
+    .cell-label {
+        display: block;
+        text-align: start;
+        margin-block-start: 1rem;
+    }
+}
+
+/* WARNING START: Demo overrides only. Do not copy to production. */
+/* Forced state classes are used here solely to present all component states visually. */
+igc-button-group {
+    pointer-events: none;
+}
+
+igc-toggle-button:not([disabled])[selected]::part(toggle) {
+    background: var(--item-active-background);
+    border-color: var(--item-active-border-color);
+    color: var(--item-selected-text-color);
+}
+/* WARNING END */
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/src/index.tsx b/samples/inputs/button-group/states/src/index.tsx
index 77e39628a2..9e9dedd08a 100644
--- a/samples/inputs/button-group/states/src/index.tsx
+++ b/samples/inputs/button-group/states/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupInteractionStates.css';
 import './index.css';
 
 const rows: Array<{ label: string; selected: boolean }> = [
@@ -12,32 +11,38 @@ const rows: Array<{ label: string; selected: boolean }> = [
 
 export default function ButtonGroupInteractionStates(): JSX.Element {
     return (
-        <div className="button-group-interaction-states">
-            <div className="button-group-interaction-states-row">
+        <article className="states-matrix">
+            <header className="states-row">
                 <span className="row-label" />
                 <span className="column-label">Enabled</span>
                 <span className="column-label">Disabled</span>
-            </div>
+            </header>
             {rows.map((row) => (
-                <div className="button-group-interaction-states-row" key={row.label}>
+                <section className="states-row" key={row.label}>
                     <span className="row-label">{row.label}</span>
-                    <IgrButtonGroup selection="multiple">
-                        <IgrToggleButton
-                            value="device"
-                            selected={row.label === 'Selected / On'}
-                        >
-                            Device
-                            <IgrRipple />
-                        </IgrToggleButton>
-                    </IgrButtonGroup>
-                    <IgrButtonGroup selection="multiple" disabled={true}>
-                        <IgrToggleButton value="cloud" selected={row.selected}>
-                            Cloud
-                        </IgrToggleButton>
-                    </IgrButtonGroup>
-                </div>
+                    <div className="state-cell">
+                        <span className="cell-label">Enabled</span>
+                        <IgrButtonGroup selection="multiple">
+                            <IgrToggleButton
+                                value="device"
+                                selected={row.selected}
+                            >
+                                Device
+                                <IgrRipple />
+                            </IgrToggleButton>
+                        </IgrButtonGroup>
+                    </div>
+                    <div className="state-cell">
+                        <span className="cell-label">Disabled</span>
+                        <IgrButtonGroup selection="multiple">
+                            <IgrToggleButton value="cloud" disabled={true} selected={row.selected}>
+                                Cloud
+                            </IgrToggleButton>
+                        </IgrButtonGroup>
+                    </div>
+                </section>
             ))}
-        </div>
+        </article>
     );
 }
 
diff --git a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css b/samples/inputs/button-group/styling/src/ButtonGroupStyling.css
deleted file mode 100644
index 22c9d20f42..0000000000
--- a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css
+++ /dev/null
@@ -1,32 +0,0 @@
-igc-ripple {
-    --color: gray;
-}
-
-.button-group-styling {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 7rem;
-}
-
-.button-group-styling igc-button-group {
-    width: 420px;
-    border: 2px solid #4da3e8;
-    border-radius: 4px;
-    overflow: hidden;
-}
-
-.button-group-styling igc-toggle-button::part(toggle) {
-    color: #4a5a66;
-    background: #cfe8fb;
-    border-color: #4da3e8;
-}
-
-.button-group-styling igc-toggle-button::part(toggle):hover {
-    background: #b3daf8;
-}
-
-.button-group-styling igc-toggle-button[selected]::part(toggle) {
-    color: #2f4d6a;
-    background: #6db3ea;
-}
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/src/index.css b/samples/inputs/button-group/styling/src/index.css
index 1f53b8aa05..e676fef095 100644
--- a/samples/inputs/button-group/styling/src/index.css
+++ b/samples/inputs/button-group/styling/src/index.css
@@ -1,2 +1,24 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+igc-button-group {
+    display: inline-block;
+    width: 100%;
+    max-width: 25rem;
+}
+
+.sbSwitch {
+    display: grid;
+    place-items: center;
+    height: 100vh;
+
+    --ig-button-group-border-radius: 4px;
+    --ig-button-group-item-text-color: #4a5a66;
+    --ig-button-group-item-background: #cfe8fb;
+    --ig-button-group-item-border-color: #4da3e8;
+    --ig-button-group-item-hover-text-color: #4a5a66;
+    --ig-button-group-item-hover-background: #b3daf8;
+    --ig-button-group-item-hover-border-color: #4da3e8;
+    --ig-button-group-item-selected-text-color: #2f4d6a;
+    --ig-button-group-item-selected-background: #6db3ea;
+    --ig-button-group-item-selected-border-color: #4da3e8;
+    --ig-button-group-item-selected-hover-text-color: #2f4d6a;
+    --ig-button-group-item-selected-hover-background: #6db3ea;
+}
diff --git a/samples/inputs/button-group/styling/src/index.tsx b/samples/inputs/button-group/styling/src/index.tsx
index 61f3d984f9..5949382503 100644
--- a/samples/inputs/button-group/styling/src/index.tsx
+++ b/samples/inputs/button-group/styling/src/index.tsx
@@ -2,27 +2,24 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/material.css';
-import './ButtonGroupStyling.css';
 import './index.css';
 
 const layouts = ['Left', 'Center', 'Right'];
 
 export default function ButtonGroupStyling(): JSX.Element {
     return (
-        <div className="button-group-styling">
-            <IgrButtonGroup>
-                {layouts.map((layout) => (
-                    <IgrToggleButton
-                        key={layout}
-                        value={layout.toLowerCase()}
-                        selected={layout === 'Left'}
-                    >
-                        {layout}
-                        <IgrRipple />
-                    </IgrToggleButton>
-                ))}
-            </IgrButtonGroup>
-        </div>
+        <IgrButtonGroup>
+            {layouts.map((layout) => (
+                <IgrToggleButton
+                    key={layout}
+                    value={layout.toLowerCase()}
+                    selected={layout === 'Left'}
+                >
+                    {layout}
+                    <IgrRipple />
+                </IgrToggleButton>
+            ))}
+        </IgrButtonGroup>
     );
 }
 
diff --git a/samples/inputs/button-group/tailwind-styling/src/index.css b/samples/inputs/button-group/tailwind-styling/src/index.css
index 6ff2900474..cfaa860e96 100644
--- a/samples/inputs/button-group/tailwind-styling/src/index.css
+++ b/samples/inputs/button-group/tailwind-styling/src/index.css
@@ -1,37 +1,15 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-
-@layer theme, base, components, utilities;
+@layer theme, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 
-igc-ripple {
-    --color: gray;
-}
-
-.button-group-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 7rem;
-}
-
-.button-group-style {
-    width: 420px;
-    max-width: 100%;
-}
-
-.button-group-style igc-toggle-button::part(toggle) {
-    color: var(--color-violet-700);
-    background: var(--color-white);
-    border-color: var(--color-violet-300);
-}
-
-.button-group-style igc-toggle-button::part(toggle):hover {
-    background: var(--color-fuchsia-100);
+.sbSwitch {
+    display: grid;
+    place-items: center;
+    height: 100vh;
 }
 
-.button-group-style igc-toggle-button[selected]::part(toggle) {
-    color: var(--color-white);
-    background: var(--color-violet-600);
+igc-button-group {
+    display: inline-block;
+    width: 100%;
+    max-width: 25rem;
 }
diff --git a/samples/inputs/button-group/tailwind-styling/src/index.tsx b/samples/inputs/button-group/tailwind-styling/src/index.tsx
index 3f4363a7c7..0a5a3a4d60 100644
--- a/samples/inputs/button-group/tailwind-styling/src/index.tsx
+++ b/samples/inputs/button-group/tailwind-styling/src/index.tsx
@@ -8,20 +8,18 @@ const views = ['Day', 'Week', 'Month'];
 
 export default function ButtonGroupTailwindStyling(): JSX.Element {
     return (
-        <div className="button-group-center box-border h-full min-h-28 w-full bg-violet-50 p-6">
-            <IgrButtonGroup className="button-group-style w-[420px] overflow-hidden">
-                {views.map((view) => (
-                    <IgrToggleButton
-                        key={view}
-                        value={view.toLowerCase()}
-                        selected={view === 'Week'}
-                    >
-                        {view}
-                        <IgrRipple />
-                    </IgrToggleButton>
-                ))}
-            </IgrButtonGroup>
-        </div>
+        <IgrButtonGroup className="![--elevation:0] ![--item-text-color:#6d28d9] ![--item-background:#ffffff] ![--item-border-color:#c4b5fd] ![--item-hover-text-color:#6d28d9] ![--item-hover-background:#fae8ff] ![--item-hover-border-color:#c4b5fd] ![--item-selected-text-color:#ffffff] ![--item-selected-background:#7c3aed] ![--item-selected-border-color:#c4b5fd] ![--item-selected-hover-text-color:#ffffff] ![--item-selected-hover-background:#7c3aed]">
+            {views.map((view) => (
+                <IgrToggleButton
+                    key={view}
+                    value={view.toLowerCase()}
+                    selected={view === 'Week'}
+                >
+                    {view}
+                    <IgrRipple />
+                </IgrToggleButton>
+            ))}
+        </IgrButtonGroup>
     );
 }