IgniteUI · Hristo313 · Aug 26, 2026 · Aug 26, 2026 · Aug 26, 2026 · Aug 27, 2026
diff --git a/browser/public/meta.json b/browser/public/meta.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-09-10 11:11:25","note":"this file is auto-generated"}
diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-09-10 11:11:25","note":"this file is auto-generated"}
diff --git 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/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/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 {
@@ -21,12 +21,6 @@ igc-avatar {
   inset-inline-end: -6px;
 }
 
-.step-marker igc-badge {
-  position: absolute;
-  inset-block-start: -1px;
-  inset-inline-end: -2px;
-}
-
 .outlined-example igc-badge {
   position: absolute;
   inset-block-start: -6px;
@@ -42,7 +36,8 @@ igc-avatar {
   align-items: center;
   justify-content: center;
   gap: 60px;
-  min-height: 7rem;
+  min-height: 100vh;
+  box-sizing: border-box;
 }
 
 .outlined-example {
@@ -65,23 +60,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);
@@ -92,53 +70,41 @@ igc-badge igc-icon {
 }
 
 .steps {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.step-marker {
+  width: 316px;
+}
+
+.steps,
+.steps igc-step {
+  --indicator-size: 24px;
+  --ig-stepper-step-separator-style: dashed;
+  --ig-stepper-step-separator-color: var(--ig-gray-400);
+  --border-radius-indicator: 50%;
+  --indicator-background: var(--ig-gray-200);
+  --indicator-color: var(--ig-gray-800);
+  --indicator-outline: var(--ig-gray-200);
+  --separator-size: 1px;
+  --separator-type: solid;
+  --step-separator-style: dashed;
+  --complete-indicator-background: var(--ig-gray-900);
+  --complete-indicator-color: var(--ig-gray-50);
+  --complete-step-separator-style: solid;
+  --complete-step-separator-color: var(--ig-gray-900);
+}
+
+.stepper-wrapper {
   position: relative;
-  display: flex;
-}
-
-.step-circle {
-  width: 26px;
-  height: 26px;
-  background: var(--ig-gray-900);
-  color: var(--ig-gray-50);
-  font-size: 12px;
+  align-self: center;
+  top: 18px;
 }
 
-.step-circle.pending {
-  background: var(--ig-gray-200);
-  color: var(--ig-gray-800);
-}
-
-.step-connector {
-  width: 56px;
-  margin-block-start: 13px;
-  border-block-start: 1px solid var(--ig-gray-900);
-}
-
-.step-connector.pending {
-  border-block-start-style: dashed;
-  border-block-start-color: var(--ig-gray-400);
+.flagged-badge {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-start: calc(50% - 1px);
+  transform: scale(1.2);
+  transform-origin: center;
 }
 
-.step-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;
+.steps::part(content) {
+  display: none;
 }
diff --git a/samples/inputs/badge/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx
@@ -1,24 +1,21 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react';
+import { IgrBadge, IgrAvatar, IgrIcon, IgrStepper, IgrStep, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.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>';
 const closeIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
 
-const steps = [
-  { index: 1, label: 'Orders', current: false, pending: false },
-  { index: 2, label: 'Payment', current: true, pending: false },
-  { index: 3, label: 'Shipping', current: false, pending: true }
-];
-
 export default function BadgeOutlined(): JSX.Element {
+  const stepperRef = useRef<IgrStepper>(null);
+
   useEffect(() => {
     registerIconFromText('favorite_border', favoriteBorderIcon, 'material');
     registerIconFromText('close', closeIcon, 'material');
+    stepperRef.current?.navigateTo(1);
   }, []);
 
   return (
@@ -27,33 +24,27 @@ 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" />
         <IgrBadge variant="danger" outlined={true}>
           <IgrIcon name="close" collection="material" />
         </IgrBadge>
       </div>
-      <div className="steps">
-        {steps.map((step, i) => (
-          <React.Fragment key={step.label}>
-            {i > 0 && (
-              <span className={step.pending ? 'step-connector pending' : 'step-connector'} />
-            )}
-            <div className="step">
-              <div className="step-marker">
-                <span className={step.pending ? 'step-circle pending' : 'step-circle'}>
-                  {step.index}
-                </span>
-                {step.current && (
-                  <IgrBadge dot={true} variant="info" outlined={true} className="payment-dot-blue" />
-                )}
-              </div>
-              <span className="step-label">{step.label}</span>
-            </div>
-          </React.Fragment>
-        ))}
+      <div className="stepper-wrapper">
+        <IgrStepper ref={stepperRef} className="steps" orientation="horizontal">
+        <IgrStep complete={true}>
+          <span slot="title">Orders</span>
+        </IgrStep>
+        <IgrStep>
+          <span slot="title">Payment</span>
+        </IgrStep>
+        <IgrStep>
+          <span slot="title">Shipping</span>
+        </IgrStep>
+        </IgrStepper>
+        <IgrBadge className="flagged-badge" dot={true} variant="info" outlined={true} />
       </div>
     </div>
   );

diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css
@@ -17,6 +17,15 @@ igc-badge {
   inset-inline-end: -0.15rem;
 }
 
+igc-badge::part(base),
+igc-badge igc-icon {
+  color: var(--ig-gray-50);
+}
+
+igc-badge igc-icon {
+  fill: var(--ig-gray-50);
+}
+
 .avatar-example igc-badge {
   inset-block-start: auto;
   inset-block-end: -0.15rem;
@@ -33,7 +42,6 @@ igc-badge {
 }
 
 .event-example igc-chip::part(base) {
-  background-color: #E0E0E0;
   border-radius: 999px;
 }
 
@@ -42,11 +50,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;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"}
		{"version":"23.2.915","date":"2026-09-10 11:11:25","note":"this file is auto-generated"}