feat(docs): update badge sample

browser/package.json

@@ -61,6 +61,7 @@
     "@babel/plugin-proposal-private-property-in-object": "~7.21.11",
     "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/gulp": "^4.0.6",
     "@types/jest": "^29.2.0",
     "@types/node": "^24.7.1",
@@ -99,6 +100,7 @@
     "remark-frontmatter": "^2.0.0",
     "run-sequence": "^2.2.1",
     "sass": "^1.97.3",
+    "tailwindcss": "^4.3.3",
     "ts-loader": "^9.5.4",
     "ts-node": "^10.9.2",
     "typescript": "^4.8.4",

browser/public/meta.json

@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"}

browser/src/index.css

@@ -1,3 +1,10 @@
+#root,
+html,
+body,
+main {
+    background: transparent;
+}
+
 .igx-grid__td img[src*="dl.infragistics.com/x/img/people"] {
     width: 62px;
     height: 62px;

browser/src/index.tsx

@@ -5,6 +5,7 @@ import { BrowserRouter } from "react-router-dom";
 import SamplesBrowser from "./navigation/SamplesBrowser";
 import RegisterServiceWorker from './serviceWorker';
 import { createRoot } from 'react-dom/client';
+import { initSampleSizeReporter } from './sample-size-reporter';
 
 import './index.css'; // styles shared between all samples
 
@@ -21,6 +22,10 @@ import './index.css'; // styles shared between all samples
    // );
 //  });
 
+// Lets docs samples embedded with <Sample fitContent> size their iframe to
+// their content. Dormant unless the docs host asks for it.
+initSampleSizeReporter();
+
 const container = document.getElementById('root');
 const root = createRoot(container);
 root.render(

browser/src/navigation/SamplesBrowser.json

@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"}

browser/src/sample-size-reporter.ts

@@ -0,0 +1,86 @@
+/**
+ * Demo-side half of the docs <Sample fitContent> contract
+ * (astro-components/src/scripts/sample-widget.ts).
+ *
+ * The docs host posts { type: 'igd-sample-fit', width?: boolean } into the
+ * iframe when it loads. In response we neutralize the viewport-bound sizing
+ * this app inherits (shared.v8.css pins #root/html/body/main to height: 100%,
+ * and the samples browser chrome plus the shared .container/.sample wrappers
+ * chain another height: 100% on top — all of which can only echo the iframe's
+ * own height back) and report the content's size with
+ * { type: 'igd-sample-height', height, width? } immediately and on every
+ * resize. Demos embedded at a fixed height never receive the enable message,
+ * so this stays dormant for them and their percentage layouts are untouched.
+ */
+const FIT_ENABLE = 'igd-sample-fit';
+const FIT_REPORT = 'igd-sample-height';
+
+export function initSampleSizeReporter(): void {
+    if (typeof window === 'undefined' || window.parent === window) {
+        return;
+    }
+
+    let reportWidth = false;
+    let observer: ResizeObserver | null = null;
+    let styled = false;
+    // Captured from the host's enable message so replies go back to that exact
+    // origin instead of being broadcast to any window that happens to listen.
+    let hostOrigin = '*';
+
+    // Right-most element edge, mirroring the host's same-origin measurement:
+    // block-level content stretches to the viewport width, so the intrinsic
+    // width has to come from the element boxes, not the body itself.
+    const measureWidth = (): number | undefined => {
+        const body = document.body;
+        const left = body.getBoundingClientRect().left;
+        let right = left;
+        body.querySelectorAll('*').forEach(el => {
+            right = Math.max(right, el.getBoundingClientRect().right);
+        });
+        if (right <= left) {
+            return undefined;
+        }
+        const cs = getComputedStyle(body);
+        return right - left + parseFloat(cs.paddingRight || '0') + parseFloat(cs.borderRightWidth || '0');
+    };
+
+    const report = () => {
+        const height = Math.max(
+            document.documentElement.offsetHeight,
+            document.body.offsetHeight,
+            document.body.scrollHeight,
+        );
+        window.parent.postMessage(
+            { type: FIT_REPORT, height, width: reportWidth ? measureWidth() : undefined },
+            hostOrigin,
+        );
+    };
+
+    window.addEventListener('message', (e: MessageEvent) => {
+        if (!e.data || e.data.type !== FIT_ENABLE) {
+            return;
+        }
+        reportWidth = Boolean(e.data.width);
+        hostOrigin = e.origin || '*';
+
+        if (!styled) {
+            styled = true;
+            const style = document.createElement('style');
+            // Every link in the height: 100% chain has to be released, otherwise
+            // the first one left pinned re-anchors everything below it to the
+            // iframe height. !important also beats SamplesBrowser's inline
+            // height: 100% on .sbSwitch.
+            style.textContent =
+                'html, body, #root, main { height: auto !important; overflow: visible !important; }' +
+                '.sbRoot, .sbContent, .sbSwitch { height: auto !important; overflow: visible !important; }' +
+                '.container, .sample { height: auto !important; overflow: visible !important; }';
+            document.head.appendChild(style);
+        }
+
+        report();
+        if ('ResizeObserver' in window && !observer) {
+            observer = new ResizeObserver(report);
+            observer.observe(document.body);
+        }
+    });
+}

browser/tasks/Transformer.ts

@@ -454,6 +454,15 @@ class Transformer {
             return ".." + sampleFullPath;
         }
 
+        // the repository was cloned into a folder that is not named after it,
+        // so fall back to the repository root, which is the parent of ./browser
+        let repositoryRoot = pathModule.dirname(process.cwd());
+        if (sampleFullPath.indexOf(repositoryRoot) === 0) {
+            let relativePath = sampleFullPath.substring(repositoryRoot.length);
+            relativePath = relativePath.split(pathModule.sep).join(process.env.PATH_SEP || '/');
+            return ".." + relativePath;
+        }
+
         console.log("failed on getRelative " + sampleFullPath);
         return sampleFullPath;
     }

browser/vite.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import path, { resolve } from 'path';
 
@@ -8,6 +9,7 @@ const jszipShimPath = path.resolve(__dirname, 'src/jszip-shim.js');
 export default defineConfig(({ mode }) => ({
   plugins: [
     react(),
+    tailwindcss(),
     tsconfigPaths()
   ],
   base: mode === 'production' ? '/react-demos/' : '/',

samples/inputs/badge/dot/src/index.css

@@ -1,2 +1,144 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-badge {
+	--ig-size: var(--ig-size-small);
+	--ig-badge-dot-size: 0.5rem;
+}
+
+igc-avatar {
+	--size: 40px;
+}
+
+.icon-example igc-badge,
+.avatar-example igc-badge,
+.nav-icon igc-badge {
+	position: absolute;
+}
+
+.icon-example igc-badge {
+	inset-block-start: 0;
+	inset-inline-end: 2px;
+}
+
+.avatar-example igc-badge {
+	inset-block-start: -0.25rem;
+	inset-inline-end: -2px;
+}
+
+.nav-icon igc-badge {
+	inset-block-start: -2px;
+	inset-inline-end: -6px;
+}
+
+.badge-dot {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 40px;
+	min-height: 7rem;
+}
+
+.dot-example {
+	position: relative;
+}
+
+.icon-example,
+.avatar-example,
+.icon-circle {
+	display: flex;
+	align-items: center;
+	width: 36px;
+	height: 36px;
+}
+
+.icon-circle {
+	justify-content: center;
+	border-radius: 50%;
+	background: var(--ig-gray-200);
+	color: var(--ig-gray-800);
+}
+
+.notifications-card,
+.nav-card {
+	background: var(--ig-surface-500);
+	border-radius: 4px;
+	box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12);
+}
+
+.notifications-card {
+	min-width: 272px;
+	padding: 8px 0;
+}
+
+.notification-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	font-size: 14px;
+	color: var(--ig-gray-900);
+}
+
+.row-indicator {
+	display: inline-flex;
+	justify-content: center;
+	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;
+}
+
+.row-time {
+	font-size: 13px;
+	color: var(--ig-gray-900);
+}
+
+.row-time.unread {
+	color: #0057A9;
+	font-weight: 600;
+}
+
+.row-chevron {
+	--ig-size: 1;
+
+	color: var(--ig-gray-600);
+	font-size: 18px;
+}
+
+.nav-card {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+}
+
+.nav-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	min-width: 56px;
+	color: var(--ig-gray-700);
+	font-size: 12px;
+}
+
+.nav-item.active {
+	color: #0075D2;
+}
+
+.nav-icon {
+	position: relative;
+	display: inline-flex;
+}