From 3e97451aa9c25d698aed5b25813cdb0b9e7c321d Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Thu, 8 Oct 2026 15:23:44 +0300
Subject: [PATCH 1/4] feat(rating): update samples content

---
 browser/public/meta.json                      |  2 +-
 browser/src/navigation/SamplesBrowser.json    |  2 +-
 samples/inputs/rating/basic/src/index.css     |  5 --
 samples/inputs/rating/basic/src/index.tsx     | 24 ------
 samples/inputs/rating/custom/src/index.css    |  5 --
 samples/inputs/rating/custom/src/index.tsx    | 50 -------------
 samples/inputs/rating/empty/src/index.css     |  2 -
 samples/inputs/rating/empty/src/index.tsx     | 50 -------------
 .../.devcontainer/devcontainer.json           |  0
 .../.eslintrc.js                              |  0
 .../rating/interaction-states/README.md       | 56 ++++++++++++++
 .../rating/interaction-states/index.html      | 11 +++
 .../rating/interaction-states/package.json    | 42 +++++++++++
 .../sandbox.config.json                       |  0
 .../rating/interaction-states/src/index.css   | 33 ++++++++
 .../rating/interaction-states/src/index.tsx   | 26 +++++++
 .../tsconfig.json                             |  0
 .../vite.config.js                            |  0
 .../.devcontainer/devcontainer.json           |  0
 .../rating/{custom => layout}/.eslintrc.js    |  0
 .../rating/{custom => layout}/README.md       |  8 +-
 .../rating/{basic => layout}/index.html       |  2 +-
 .../rating/{custom => layout}/package.json    |  4 +-
 .../{custom => layout}/sandbox.config.json    |  0
 samples/inputs/rating/layout/src/index.css    | 32 ++++++++
 samples/inputs/rating/layout/src/index.tsx    | 26 +++++++
 .../rating/{custom => layout}/tsconfig.json   |  0
 .../rating/{custom => layout}/vite.config.js  |  0
 .../.devcontainer/devcontainer.json           |  0
 .../rating/{empty => overview}/.eslintrc.js   |  0
 samples/inputs/rating/overview/README.md      | 56 ++++++++++++++
 .../rating/{empty => overview}/index.html     |  2 +-
 .../package.json                              |  4 +-
 .../{empty => overview}/sandbox.config.json   |  0
 samples/inputs/rating/overview/src/index.css  | 19 +++++
 samples/inputs/rating/overview/src/index.tsx  | 25 +++++++
 .../rating/{empty => overview}/tsconfig.json  |  0
 .../rating/{empty => overview}/vite.config.js |  0
 .../rating/single-selection/src/index.css     |  2 -
 .../rating/single-selection/src/index.tsx     | 45 -----------
 .../.devcontainer/devcontainer.json           |  0
 .../{single-selection => size}/.eslintrc.js   |  0
 .../inputs/rating/{basic => size}/README.md   |  8 +-
 .../{single-selection => size}/index.html     |  2 +-
 .../rating/{basic => size}/package.json       |  4 +-
 .../sandbox.config.json                       |  0
 samples/inputs/rating/size/src/index.css      | 44 +++++++++++
 samples/inputs/rating/size/src/index.tsx      | 30 ++++++++
 .../{single-selection => size}/tsconfig.json  |  0
 .../{single-selection => size}/vite.config.js |  0
 .../states/.devcontainer/devcontainer.json    |  4 +
 samples/inputs/rating/states/.eslintrc.js     | 75 +++++++++++++++++++
 .../inputs/rating/{empty => states}/README.md |  8 +-
 .../rating/{custom => states}/index.html      |  2 +-
 .../rating/{empty => states}/package.json     |  4 +-
 .../inputs/rating/states/sandbox.config.json  |  5 ++
 samples/inputs/rating/states/src/index.css    | 32 ++++++++
 samples/inputs/rating/states/src/index.tsx    | 26 +++++++
 samples/inputs/rating/states/tsconfig.json    | 44 +++++++++++
 samples/inputs/rating/states/vite.config.js   | 12 +++
 samples/inputs/rating/styling/index.html      |  2 +-
 samples/inputs/rating/styling/package.json    |  4 +-
 samples/inputs/rating/styling/src/index.css   | 42 +++++++----
 samples/inputs/rating/styling/src/index.tsx   | 42 ++++++++---
 .../.devcontainer/devcontainer.json           |  4 +
 .../rating/tailwind-styling/.eslintrc.js      | 75 +++++++++++++++++++
 .../README.md                                 |  8 +-
 .../inputs/rating/tailwind-styling/index.html | 11 +++
 .../rating/tailwind-styling/package.json      | 44 +++++++++++
 .../tailwind-styling/sandbox.config.json      |  5 ++
 .../rating/tailwind-styling/src/index.css     | 19 +++++
 .../rating/tailwind-styling/src/index.tsx     | 47 ++++++++++++
 .../rating/tailwind-styling/tsconfig.json     | 44 +++++++++++
 .../rating/tailwind-styling/vite.config.js    | 13 ++++
 74 files changed, 949 insertions(+), 244 deletions(-)
 delete mode 100644 samples/inputs/rating/basic/src/index.css
 delete mode 100644 samples/inputs/rating/basic/src/index.tsx
 delete mode 100644 samples/inputs/rating/custom/src/index.css
 delete mode 100644 samples/inputs/rating/custom/src/index.tsx
 delete mode 100644 samples/inputs/rating/empty/src/index.css
 delete mode 100644 samples/inputs/rating/empty/src/index.tsx
 rename samples/inputs/rating/{basic => interaction-states}/.devcontainer/devcontainer.json (100%)
 rename samples/inputs/rating/{basic => interaction-states}/.eslintrc.js (100%)
 create mode 100644 samples/inputs/rating/interaction-states/README.md
 create mode 100644 samples/inputs/rating/interaction-states/index.html
 create mode 100644 samples/inputs/rating/interaction-states/package.json
 rename samples/inputs/rating/{basic => interaction-states}/sandbox.config.json (100%)
 create mode 100644 samples/inputs/rating/interaction-states/src/index.css
 create mode 100644 samples/inputs/rating/interaction-states/src/index.tsx
 rename samples/inputs/rating/{basic => interaction-states}/tsconfig.json (100%)
 rename samples/inputs/rating/{basic => interaction-states}/vite.config.js (100%)
 rename samples/inputs/rating/{custom => layout}/.devcontainer/devcontainer.json (100%)
 rename samples/inputs/rating/{custom => layout}/.eslintrc.js (100%)
 rename samples/inputs/rating/{custom => layout}/README.md (91%)
 rename samples/inputs/rating/{basic => layout}/index.html (87%)
 rename samples/inputs/rating/{custom => layout}/package.json (87%)
 rename samples/inputs/rating/{custom => layout}/sandbox.config.json (100%)
 create mode 100644 samples/inputs/rating/layout/src/index.css
 create mode 100644 samples/inputs/rating/layout/src/index.tsx
 rename samples/inputs/rating/{custom => layout}/tsconfig.json (100%)
 rename samples/inputs/rating/{custom => layout}/vite.config.js (100%)
 rename samples/inputs/rating/{empty => overview}/.devcontainer/devcontainer.json (100%)
 rename samples/inputs/rating/{empty => overview}/.eslintrc.js (100%)
 create mode 100644 samples/inputs/rating/overview/README.md
 rename samples/inputs/rating/{empty => overview}/index.html (87%)
 rename samples/inputs/rating/{single-selection => overview}/package.json (91%)
 rename samples/inputs/rating/{empty => overview}/sandbox.config.json (100%)
 create mode 100644 samples/inputs/rating/overview/src/index.css
 create mode 100644 samples/inputs/rating/overview/src/index.tsx
 rename samples/inputs/rating/{empty => overview}/tsconfig.json (100%)
 rename samples/inputs/rating/{empty => overview}/vite.config.js (100%)
 delete mode 100644 samples/inputs/rating/single-selection/src/index.css
 delete mode 100644 samples/inputs/rating/single-selection/src/index.tsx
 rename samples/inputs/rating/{single-selection => size}/.devcontainer/devcontainer.json (100%)
 rename samples/inputs/rating/{single-selection => size}/.eslintrc.js (100%)
 rename samples/inputs/rating/{basic => size}/README.md (86%)
 rename samples/inputs/rating/{single-selection => size}/index.html (87%)
 rename samples/inputs/rating/{basic => size}/package.json (87%)
 rename samples/inputs/rating/{single-selection => size}/sandbox.config.json (100%)
 create mode 100644 samples/inputs/rating/size/src/index.css
 create mode 100644 samples/inputs/rating/size/src/index.tsx
 rename samples/inputs/rating/{single-selection => size}/tsconfig.json (100%)
 rename samples/inputs/rating/{single-selection => size}/vite.config.js (100%)
 create mode 100644 samples/inputs/rating/states/.devcontainer/devcontainer.json
 create mode 100644 samples/inputs/rating/states/.eslintrc.js
 rename samples/inputs/rating/{empty => states}/README.md (86%)
 rename samples/inputs/rating/{custom => states}/index.html (86%)
 rename samples/inputs/rating/{empty => states}/package.json (87%)
 create mode 100644 samples/inputs/rating/states/sandbox.config.json
 create mode 100644 samples/inputs/rating/states/src/index.css
 create mode 100644 samples/inputs/rating/states/src/index.tsx
 create mode 100644 samples/inputs/rating/states/tsconfig.json
 create mode 100644 samples/inputs/rating/states/vite.config.js
 create mode 100644 samples/inputs/rating/tailwind-styling/.devcontainer/devcontainer.json
 create mode 100644 samples/inputs/rating/tailwind-styling/.eslintrc.js
 rename samples/inputs/rating/{single-selection => tailwind-styling}/README.md (91%)
 create mode 100644 samples/inputs/rating/tailwind-styling/index.html
 create mode 100644 samples/inputs/rating/tailwind-styling/package.json
 create mode 100644 samples/inputs/rating/tailwind-styling/sandbox.config.json
 create mode 100644 samples/inputs/rating/tailwind-styling/src/index.css
 create mode 100644 samples/inputs/rating/tailwind-styling/src/index.tsx
 create mode 100644 samples/inputs/rating/tailwind-styling/tsconfig.json
 create mode 100644 samples/inputs/rating/tailwind-styling/vite.config.js

diff --git a/browser/public/meta.json b/browser/public/meta.json
index abc53cbbe5..e233022d83 100644
--- a/browser/public/meta.json
+++ b/browser/public/meta.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-10-08 15:22:14","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 abc53cbbe5..e233022d83 100644
--- a/browser/src/navigation/SamplesBrowser.json
+++ b/browser/src/navigation/SamplesBrowser.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-10-08 15:22:14","note":"this file is auto-generated"}
\ No newline at end of file
diff --git a/samples/inputs/rating/basic/src/index.css b/samples/inputs/rating/basic/src/index.css
deleted file mode 100644
index 8f7f70c8e0..0000000000
--- a/samples/inputs/rating/basic/src/index.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-.size-large {
-    --ig-size: var(--ig-size-large);
-}
\ No newline at end of file
diff --git a/samples/inputs/rating/basic/src/index.tsx b/samples/inputs/rating/basic/src/index.tsx
deleted file mode 100644
index 1ef035a618..0000000000
--- a/samples/inputs/rating/basic/src/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import { IgrRating } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-export default class RatingOverview extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);           
-    }       
-
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">                
-                    <IgrRating className="size-large" label="Rate Experience" max={5} step={.5} hoverPreview={true}></IgrRating>                                    
-            </div>
-        );
-    }  
-}
-
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<RatingOverview/>);
diff --git a/samples/inputs/rating/custom/src/index.css b/samples/inputs/rating/custom/src/index.css
deleted file mode 100644
index 8f7f70c8e0..0000000000
--- a/samples/inputs/rating/custom/src/index.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-.size-large {
-    --ig-size: var(--ig-size-large);
-}
\ No newline at end of file
diff --git a/samples/inputs/rating/custom/src/index.tsx b/samples/inputs/rating/custom/src/index.tsx
deleted file mode 100644
index 2ddfd5cff2..0000000000
--- a/samples/inputs/rating/custom/src/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-const emptyHeart = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="#fff"/> </g> </svg>';
-const heartIcon = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="#e60000"/> </g> </svg>';
-
-export default class RatingCustomSymbols extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);
-        registerIconFromText("heart", heartIcon, "material");
-        registerIconFromText("emptyHeart", emptyHeart, "material");
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">
-                <IgrRating className="size-large" label="Rate Experience" step={.5} value={3} hoverPreview={true}>
-                    <IgrRatingSymbol>
-                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
-                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div> 
-                    </IgrRatingSymbol>
-                        <IgrRatingSymbol>
-                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
-                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
-                    </IgrRatingSymbol>
-                    <IgrRatingSymbol>
-                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
-                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
-                    </IgrRatingSymbol>
-                    <IgrRatingSymbol>
-                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
-                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
-                    </IgrRatingSymbol>
-                    <IgrRatingSymbol>
-                        <div><IgrIcon name='heart' collection="material"></IgrIcon></div>
-                        <div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
-                    </IgrRatingSymbol>
-                </IgrRating>
-            </div>
-        );
-    }
-}
-
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<RatingCustomSymbols/>);
diff --git a/samples/inputs/rating/empty/src/index.css b/samples/inputs/rating/empty/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/inputs/rating/empty/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/rating/empty/src/index.tsx b/samples/inputs/rating/empty/src/index.tsx
deleted file mode 100644
index 14e2c0c761..0000000000
--- a/samples/inputs/rating/empty/src/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-const bandageIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bdbandage-desc bdbandage-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bdbandage-title">Bandage Icon</title><desc id="bdbandage-desc">A picture depicting a bandage.</desc><path d="M3.212 10.03a3 3 0 010-4.242l2.576-2.576a3 3 0 014.242 0l.556.556-6.818 6.818zm17.5.334L10.364 20.707a4 4 0 01-5.657 0l-1.414-1.414a4 4 0 010-5.657L13.636 3.293a4 4 0 015.657 0l1.414 1.414a4 4 0 010 5.657zM14 5a1 1 0 101-1 1 1 0 00-1 1zm-2.5 2.5a1 1 0 101-1 1 1 0 00-1 1zM9 10a1 1 0 101-1 1 1 0 00-1 1zm-4 6a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm.75 3.25a1 1 0 10-1-1 1 1 0 001 1zM10 19a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM15 14a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM20 9a1 1 0 10-1 1 1 1 0 001-1zm.232 4.414l-6.818 6.818.556.556a3 3 0 004.242 0l2.576-2.576a3 3 0 000-4.242z"></path></svg>';
-const bacteriaIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bcbacteria-desc bcbacteria-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bcbacteria-title">Bacteria Icon</title><desc id="bcbacteria-desc">A picture depicting a bacteria.</desc><path d="M20.867 7.664h-1.3a4.439 4.439 0 00-.467-1.157l.914-.915a1.132 1.132 0 00-1.6-1.6l-.915.914a4.477 4.477 0 00-1.157-.478V3.133a1.133 1.133 0 10-2.265 0v1.294a4.491 4.491 0 00-1.157.478L12 3.991a1.132 1.132 0 00-1.6 1.6l.8.8L9.6 8l-.8-.8a1.133 1.133 0 10-1.6 1.6l.8.8-1.6 1.6-.8-.8A1.132 1.132 0 004 12l.914.914a4.453 4.453 0 00-.477 1.157H3.133a1.133 1.133 0 100 2.265h1.3a4.439 4.439 0 00.477 1.157l-.914.915a1.132 1.132 0 001.6 1.6l.915-.914a4.439 4.439 0 001.157.477v1.3a1.133 1.133 0 102.265 0v-1.3a4.453 4.453 0 001.157-.477l.914.914a1.132 1.132 0 001.6-1.6l-.8-.8 1.6-1.6.8.8a1.133 1.133 0 101.6-1.6l-.8-.8 1.6-1.6.8.8a1.132 1.132 0 101.6-1.6l-.914-.914a4.453 4.453 0 00.477-1.157h1.3a1.133 1.133 0 100-2.265zM15 11a2 2 0 112-2 2 2 0 01-2 2zm-5.5 5a1.5 1.5 0 111.5-1.5A1.5 1.5 0 019.5 16z"></path></svg>';
-
-export default class RatingEmptyAndSelected extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);
-        registerIconFromText("bandage", bandageIcon, "material");
-        registerIconFromText("bacteria", bacteriaIcon,"material");
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">                
-                    <IgrRating>
-                        <IgrRatingSymbol>
-                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
-                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div> 
-                        </IgrRatingSymbol>
-                         <IgrRatingSymbol>
-                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
-                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
-                        </IgrRatingSymbol>
-                        <IgrRatingSymbol>
-                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
-                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
-                        </IgrRatingSymbol>
-                        <IgrRatingSymbol>
-                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
-                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
-                        </IgrRatingSymbol> 
-                        <IgrRatingSymbol>
-                            <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
-                            <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>                           
-                        </IgrRatingSymbol>
-                    </IgrRating>                                                      
-            </div>
-        );
-    }
-}
-
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<RatingEmptyAndSelected/>);
diff --git a/samples/inputs/rating/basic/.devcontainer/devcontainer.json b/samples/inputs/rating/interaction-states/.devcontainer/devcontainer.json
similarity index 100%
rename from samples/inputs/rating/basic/.devcontainer/devcontainer.json
rename to samples/inputs/rating/interaction-states/.devcontainer/devcontainer.json
diff --git a/samples/inputs/rating/basic/.eslintrc.js b/samples/inputs/rating/interaction-states/.eslintrc.js
similarity index 100%
rename from samples/inputs/rating/basic/.eslintrc.js
rename to samples/inputs/rating/interaction-states/.eslintrc.js
diff --git a/samples/inputs/rating/interaction-states/README.md b/samples/inputs/rating/interaction-states/README.md
new file mode 100644
index 0000000000..382cabff5c
--- /dev/null
+++ b/samples/inputs/rating/interaction-states/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Interaction States feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/interaction-states" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/interaction-states?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/rating/interaction-states
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/rating/interaction-states/index.html b/samples/inputs/rating/interaction-states/index.html
new file mode 100644
index 0000000000..1cbb958ef9
--- /dev/null
+++ b/samples/inputs/rating/interaction-states/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>RatingInteractionStates</title>
+    <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/rating/interaction-states/package.json b/samples/inputs/rating/interaction-states/package.json
new file mode 100644
index 0000000000..999eb75140
--- /dev/null
+++ b/samples/inputs/rating/interaction-states/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "react-rating-interaction-states",
+  "description": "This project provides example of Rating Interaction States using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^1.17.0",
+    "igniteui-react": "19.9.0",
+    "igniteui-react-core": "19.6.0",
+    "igniteui-webcomponents": "^7.4.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/rating/basic/sandbox.config.json b/samples/inputs/rating/interaction-states/sandbox.config.json
similarity index 100%
rename from samples/inputs/rating/basic/sandbox.config.json
rename to samples/inputs/rating/interaction-states/sandbox.config.json
diff --git a/samples/inputs/rating/interaction-states/src/index.css b/samples/inputs/rating/interaction-states/src/index.css
new file mode 100644
index 0000000000..2a8fb3ad05
--- /dev/null
+++ b/samples/inputs/rating/interaction-states/src/index.css
@@ -0,0 +1,33 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.states {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.state {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.state-label {
+    font: 400 14px / 24px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+    --ig-rating-disabled-label-color: var(--ig-gray-500);
+}
diff --git a/samples/inputs/rating/interaction-states/src/index.tsx b/samples/inputs/rating/interaction-states/src/index.tsx
new file mode 100644
index 0000000000..366e9331bc
--- /dev/null
+++ b/samples/inputs/rating/interaction-states/src/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrRating } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function RatingInteractionStates(): JSX.Element {
+    return (
+        <div className="sample">
+            <div className="states">
+                <div className="state">
+                    <span className="state-label">Enabled</span>
+                    <IgrRating label="Rate your experience" />
+                </div>
+                <div className="state">
+                    <span className="state-label">Disabled</span>
+                    <IgrRating label="Rate your experience" disabled={true} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<RatingInteractionStates/>);
diff --git a/samples/inputs/rating/basic/tsconfig.json b/samples/inputs/rating/interaction-states/tsconfig.json
similarity index 100%
rename from samples/inputs/rating/basic/tsconfig.json
rename to samples/inputs/rating/interaction-states/tsconfig.json
diff --git a/samples/inputs/rating/basic/vite.config.js b/samples/inputs/rating/interaction-states/vite.config.js
similarity index 100%
rename from samples/inputs/rating/basic/vite.config.js
rename to samples/inputs/rating/interaction-states/vite.config.js
diff --git a/samples/inputs/rating/custom/.devcontainer/devcontainer.json b/samples/inputs/rating/layout/.devcontainer/devcontainer.json
similarity index 100%
rename from samples/inputs/rating/custom/.devcontainer/devcontainer.json
rename to samples/inputs/rating/layout/.devcontainer/devcontainer.json
diff --git a/samples/inputs/rating/custom/.eslintrc.js b/samples/inputs/rating/layout/.eslintrc.js
similarity index 100%
rename from samples/inputs/rating/custom/.eslintrc.js
rename to samples/inputs/rating/layout/.eslintrc.js
diff --git a/samples/inputs/rating/custom/README.md b/samples/inputs/rating/layout/README.md
similarity index 91%
rename from samples/inputs/rating/custom/README.md
rename to samples/inputs/rating/layout/README.md
index 0db594b880..86d4267433 100644
--- a/samples/inputs/rating/custom/README.md
+++ b/samples/inputs/rating/layout/README.md
@@ -1,7 +1,7 @@
 <!-- NOTE: do not change this file because it's auto re-generated from template: -->
 <!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
 
-This folder contains implementation of React application with example of Custom feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of Layout feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
 
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Custom
         <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
         </a>
-        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/custom" rel="noopener noreferrer">
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/layout" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
         </a>
-        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/custom?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/layout?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
         </a>
     </body>
@@ -34,7 +34,7 @@ Follow these instructions to run this example:
 git clone https://github.com/IgniteUI/igniteui-react-examples.git
 git checkout master
 cd ./igniteui-react-examples
-cd ./samples/inputs/rating/custom
+cd ./samples/inputs/rating/layout
 ```
 
 open above folder in VS Code or type:
diff --git a/samples/inputs/rating/basic/index.html b/samples/inputs/rating/layout/index.html
similarity index 87%
rename from samples/inputs/rating/basic/index.html
rename to samples/inputs/rating/layout/index.html
index ebd5a6e42e..b0071e526f 100644
--- a/samples/inputs/rating/basic/index.html
+++ b/samples/inputs/rating/layout/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Rating Overview</title>
+    <title>RatingLayout</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/inputs/rating/custom/package.json b/samples/inputs/rating/layout/package.json
similarity index 87%
rename from samples/inputs/rating/custom/package.json
rename to samples/inputs/rating/layout/package.json
index 795695786c..9bdc9cc55d 100644
--- a/samples/inputs/rating/custom/package.json
+++ b/samples/inputs/rating/layout/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-button-overview",
-  "description": "This project provides example of Button Overview using Infragistics React components",
+  "name": "react-rating-layout",
+  "description": "This project provides example of Rating Layout using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/inputs/rating/custom/sandbox.config.json b/samples/inputs/rating/layout/sandbox.config.json
similarity index 100%
rename from samples/inputs/rating/custom/sandbox.config.json
rename to samples/inputs/rating/layout/sandbox.config.json
diff --git a/samples/inputs/rating/layout/src/index.css b/samples/inputs/rating/layout/src/index.css
new file mode 100644
index 0000000000..63ea945eb1
--- /dev/null
+++ b/samples/inputs/rating/layout/src/index.css
@@ -0,0 +1,32 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.layouts {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.layout {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.layout-label {
+    font: 500 14px / 24px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+}
diff --git a/samples/inputs/rating/layout/src/index.tsx b/samples/inputs/rating/layout/src/index.tsx
new file mode 100644
index 0000000000..69d0294a56
--- /dev/null
+++ b/samples/inputs/rating/layout/src/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrRating } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function RatingLayout(): JSX.Element {
+    return (
+        <div className="sample">
+            <div className="layouts">
+                <div className="layout">
+                    <span className="layout-label">Label / On</span>
+                    <IgrRating label="Rate your experience" value={3} />
+                </div>
+                <div className="layout">
+                    <span className="layout-label">Label / Off</span>
+                    <IgrRating aria-label="Rate your experience" value={3} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<RatingLayout/>);
diff --git a/samples/inputs/rating/custom/tsconfig.json b/samples/inputs/rating/layout/tsconfig.json
similarity index 100%
rename from samples/inputs/rating/custom/tsconfig.json
rename to samples/inputs/rating/layout/tsconfig.json
diff --git a/samples/inputs/rating/custom/vite.config.js b/samples/inputs/rating/layout/vite.config.js
similarity index 100%
rename from samples/inputs/rating/custom/vite.config.js
rename to samples/inputs/rating/layout/vite.config.js
diff --git a/samples/inputs/rating/empty/.devcontainer/devcontainer.json b/samples/inputs/rating/overview/.devcontainer/devcontainer.json
similarity index 100%
rename from samples/inputs/rating/empty/.devcontainer/devcontainer.json
rename to samples/inputs/rating/overview/.devcontainer/devcontainer.json
diff --git a/samples/inputs/rating/empty/.eslintrc.js b/samples/inputs/rating/overview/.eslintrc.js
similarity index 100%
rename from samples/inputs/rating/empty/.eslintrc.js
rename to samples/inputs/rating/overview/.eslintrc.js
diff --git a/samples/inputs/rating/overview/README.md b/samples/inputs/rating/overview/README.md
new file mode 100644
index 0000000000..ad686fd25f
--- /dev/null
+++ b/samples/inputs/rating/overview/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/rating/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/rating/empty/index.html b/samples/inputs/rating/overview/index.html
similarity index 87%
rename from samples/inputs/rating/empty/index.html
rename to samples/inputs/rating/overview/index.html
index 7332773b51..e1a9491016 100644
--- a/samples/inputs/rating/empty/index.html
+++ b/samples/inputs/rating/overview/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Empty & Selected</title>
+    <title>RatingOverview</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/inputs/rating/single-selection/package.json b/samples/inputs/rating/overview/package.json
similarity index 91%
rename from samples/inputs/rating/single-selection/package.json
rename to samples/inputs/rating/overview/package.json
index 795695786c..092b2fc672 100644
--- a/samples/inputs/rating/single-selection/package.json
+++ b/samples/inputs/rating/overview/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-button-overview",
-  "description": "This project provides example of Button Overview using Infragistics React components",
+  "name": "react-rating-overview",
+  "description": "This project provides example of Rating Overview using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/inputs/rating/empty/sandbox.config.json b/samples/inputs/rating/overview/sandbox.config.json
similarity index 100%
rename from samples/inputs/rating/empty/sandbox.config.json
rename to samples/inputs/rating/overview/sandbox.config.json
diff --git a/samples/inputs/rating/overview/src/index.css b/samples/inputs/rating/overview/src/index.css
new file mode 100644
index 0000000000..721696166b
--- /dev/null
+++ b/samples/inputs/rating/overview/src/index.css
@@ -0,0 +1,19 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.rating-card {
+    width: 14rem;
+}
+
+.rating-card igc-card-content {
+    display: flex;
+    padding-bottom: 0.5rem;
+}
diff --git a/samples/inputs/rating/overview/src/index.tsx b/samples/inputs/rating/overview/src/index.tsx
new file mode 100644
index 0000000000..d1fd4ece6e
--- /dev/null
+++ b/samples/inputs/rating/overview/src/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrCard, IgrCardContent, IgrCardHeader, IgrRating } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function RatingOverview(): JSX.Element {
+    return (
+        <div className="sample">
+            <IgrCard className="rating-card" elevated={true}>
+                <IgrCardHeader>
+                    <span slot="title">Rate this product</span>
+                    <span slot="subtitle">Your opinion matters to us!</span>
+                </IgrCardHeader>
+                <IgrCardContent>
+                    <IgrRating aria-label="Rate this product" hoverPreview={true} />
+                </IgrCardContent>
+            </IgrCard>
+        </div>
+    );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<RatingOverview/>);
diff --git a/samples/inputs/rating/empty/tsconfig.json b/samples/inputs/rating/overview/tsconfig.json
similarity index 100%
rename from samples/inputs/rating/empty/tsconfig.json
rename to samples/inputs/rating/overview/tsconfig.json
diff --git a/samples/inputs/rating/empty/vite.config.js b/samples/inputs/rating/overview/vite.config.js
similarity index 100%
rename from samples/inputs/rating/empty/vite.config.js
rename to samples/inputs/rating/overview/vite.config.js
diff --git a/samples/inputs/rating/single-selection/src/index.css b/samples/inputs/rating/single-selection/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/inputs/rating/single-selection/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/rating/single-selection/src/index.tsx b/samples/inputs/rating/single-selection/src/index.tsx
deleted file mode 100644
index 8eba75660d..0000000000
--- a/samples/inputs/rating/single-selection/src/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import { IgrRating, IgrRatingSymbol } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-export default class RatingSingleSelection extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">                
-                    <IgrRating label="Rate Experience" single={true}>
-                        <IgrRatingSymbol>                           
-                            <span>😣</span>
-                            <span slot="empty">😣</span>
-                        </IgrRatingSymbol>
-                        <IgrRatingSymbol>                           
-                            <span>😔</span>
-                            <span slot="empty">😔</span>
-                        </IgrRatingSymbol>
-                        <IgrRatingSymbol>                           
-                            <span>😐</span>
-                            <span slot="empty">😐</span>
-                        </IgrRatingSymbol>
-                        <IgrRatingSymbol>                           
-                            <span>🙂</span>
-                            <span slot="empty">🙂</span>
-                        </IgrRatingSymbol>
-                        <IgrRatingSymbol>                           
-                            <span>😆</span>
-                            <span slot="empty">😆</span>
-                        </IgrRatingSymbol>                         
-                    </IgrRating>                                                      
-            </div>
-        );
-    }
-}
-
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<RatingSingleSelection/>);
diff --git a/samples/inputs/rating/single-selection/.devcontainer/devcontainer.json b/samples/inputs/rating/size/.devcontainer/devcontainer.json
similarity index 100%
rename from samples/inputs/rating/single-selection/.devcontainer/devcontainer.json
rename to samples/inputs/rating/size/.devcontainer/devcontainer.json
diff --git a/samples/inputs/rating/single-selection/.eslintrc.js b/samples/inputs/rating/size/.eslintrc.js
similarity index 100%
rename from samples/inputs/rating/single-selection/.eslintrc.js
rename to samples/inputs/rating/size/.eslintrc.js
diff --git a/samples/inputs/rating/basic/README.md b/samples/inputs/rating/size/README.md
similarity index 86%
rename from samples/inputs/rating/basic/README.md
rename to samples/inputs/rating/size/README.md
index 570397f923..0945342078 100644
--- a/samples/inputs/rating/basic/README.md
+++ b/samples/inputs/rating/size/README.md
@@ -1,7 +1,7 @@
 <!-- NOTE: do not change this file because it's auto re-generated from template: -->
 <!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
 
-This folder contains implementation of React application with example of Basic feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of Size feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
 
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Basic f
         <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
         </a>
-        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/basic" rel="noopener noreferrer">
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/size" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
         </a>
-        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/basic?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/size?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
         </a>
     </body>
@@ -34,7 +34,7 @@ Follow these instructions to run this example:
 git clone https://github.com/IgniteUI/igniteui-react-examples.git
 git checkout master
 cd ./igniteui-react-examples
-cd ./samples/inputs/rating/basic
+cd ./samples/inputs/rating/size
 ```
 
 open above folder in VS Code or type:
diff --git a/samples/inputs/rating/single-selection/index.html b/samples/inputs/rating/size/index.html
similarity index 87%
rename from samples/inputs/rating/single-selection/index.html
rename to samples/inputs/rating/size/index.html
index a60019c75a..0ee48c86f0 100644
--- a/samples/inputs/rating/single-selection/index.html
+++ b/samples/inputs/rating/size/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Single Selection</title>
+    <title>RatingSize</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/inputs/rating/basic/package.json b/samples/inputs/rating/size/package.json
similarity index 87%
rename from samples/inputs/rating/basic/package.json
rename to samples/inputs/rating/size/package.json
index 795695786c..e8b28199cf 100644
--- a/samples/inputs/rating/basic/package.json
+++ b/samples/inputs/rating/size/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-button-overview",
-  "description": "This project provides example of Button Overview using Infragistics React components",
+  "name": "react-rating-size",
+  "description": "This project provides example of Rating Size using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/inputs/rating/single-selection/sandbox.config.json b/samples/inputs/rating/size/sandbox.config.json
similarity index 100%
rename from samples/inputs/rating/single-selection/sandbox.config.json
rename to samples/inputs/rating/size/sandbox.config.json
diff --git a/samples/inputs/rating/size/src/index.css b/samples/inputs/rating/size/src/index.css
new file mode 100644
index 0000000000..e781b2e477
--- /dev/null
+++ b/samples/inputs/rating/size/src/index.css
@@ -0,0 +1,44 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.sizes {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.size {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.size-label {
+    font: 500 14px / 24px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+}
+
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
diff --git a/samples/inputs/rating/size/src/index.tsx b/samples/inputs/rating/size/src/index.tsx
new file mode 100644
index 0000000000..b1e67a7d18
--- /dev/null
+++ b/samples/inputs/rating/size/src/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrRating } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function RatingSize(): JSX.Element {
+    return (
+        <div className="sample">
+            <div className="sizes">
+                <div className="size">
+                    <span className="size-label">Small</span>
+                    <IgrRating className="size-small" label="Rate your experience" value={5} />
+                </div>
+                <div className="size">
+                    <span className="size-label">Medium</span>
+                    <IgrRating className="size-medium" label="Rate your experience" value={5} />
+                </div>
+                <div className="size">
+                    <span className="size-label">Large</span>
+                    <IgrRating className="size-large" label="Rate your experience" value={5} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<RatingSize/>);
diff --git a/samples/inputs/rating/single-selection/tsconfig.json b/samples/inputs/rating/size/tsconfig.json
similarity index 100%
rename from samples/inputs/rating/single-selection/tsconfig.json
rename to samples/inputs/rating/size/tsconfig.json
diff --git a/samples/inputs/rating/single-selection/vite.config.js b/samples/inputs/rating/size/vite.config.js
similarity index 100%
rename from samples/inputs/rating/single-selection/vite.config.js
rename to samples/inputs/rating/size/vite.config.js
diff --git a/samples/inputs/rating/states/.devcontainer/devcontainer.json b/samples/inputs/rating/states/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..e0b8e9c925
--- /dev/null
+++ b/samples/inputs/rating/states/.devcontainer/devcontainer.json
@@ -0,0 +1,4 @@
+{
+    "name": "Node.js",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}
\ No newline at end of file
diff --git a/samples/inputs/rating/states/.eslintrc.js b/samples/inputs/rating/states/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/rating/states/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/inputs/rating/empty/README.md b/samples/inputs/rating/states/README.md
similarity index 86%
rename from samples/inputs/rating/empty/README.md
rename to samples/inputs/rating/states/README.md
index 697a303f08..129bf6d0c7 100644
--- a/samples/inputs/rating/empty/README.md
+++ b/samples/inputs/rating/states/README.md
@@ -1,7 +1,7 @@
 <!-- NOTE: do not change this file because it's auto re-generated from template: -->
 <!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
 
-This folder contains implementation of React application with example of Empty feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of States feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
 
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Empty f
         <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
         </a>
-        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/empty" rel="noopener noreferrer">
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/states" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
         </a>
-        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/empty?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/states?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
         </a>
     </body>
@@ -34,7 +34,7 @@ Follow these instructions to run this example:
 git clone https://github.com/IgniteUI/igniteui-react-examples.git
 git checkout master
 cd ./igniteui-react-examples
-cd ./samples/inputs/rating/empty
+cd ./samples/inputs/rating/states
 ```
 
 open above folder in VS Code or type:
diff --git a/samples/inputs/rating/custom/index.html b/samples/inputs/rating/states/index.html
similarity index 86%
rename from samples/inputs/rating/custom/index.html
rename to samples/inputs/rating/states/index.html
index 3352f7c248..424c8ae128 100644
--- a/samples/inputs/rating/custom/index.html
+++ b/samples/inputs/rating/states/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Using Custom Symbols</title>
+    <title>RatingStates</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/inputs/rating/empty/package.json b/samples/inputs/rating/states/package.json
similarity index 87%
rename from samples/inputs/rating/empty/package.json
rename to samples/inputs/rating/states/package.json
index 795695786c..0010915a16 100644
--- a/samples/inputs/rating/empty/package.json
+++ b/samples/inputs/rating/states/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-button-overview",
-  "description": "This project provides example of Button Overview using Infragistics React components",
+  "name": "react-rating-states",
+  "description": "This project provides example of Rating States using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/inputs/rating/states/sandbox.config.json b/samples/inputs/rating/states/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/rating/states/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/inputs/rating/states/src/index.css b/samples/inputs/rating/states/src/index.css
new file mode 100644
index 0000000000..2c90ebd459
--- /dev/null
+++ b/samples/inputs/rating/states/src/index.css
@@ -0,0 +1,32 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.states {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.state {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.state-label {
+    font: 500 14px / 24px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+}
diff --git a/samples/inputs/rating/states/src/index.tsx b/samples/inputs/rating/states/src/index.tsx
new file mode 100644
index 0000000000..e5705faf38
--- /dev/null
+++ b/samples/inputs/rating/states/src/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrRating } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function RatingStates(): JSX.Element {
+    return (
+        <div className="sample">
+            <div className="states">
+                <div className="state">
+                    <span className="state-label">Empty State</span>
+                    <IgrRating label="Rate your experience" value={0} readOnly={true} />
+                </div>
+                <div className="state">
+                    <span className="state-label">Full State</span>
+                    <IgrRating label="Rate your experience" value={5} readOnly={true} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<RatingStates/>);
diff --git a/samples/inputs/rating/states/tsconfig.json b/samples/inputs/rating/states/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/inputs/rating/states/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/inputs/rating/states/vite.config.js b/samples/inputs/rating/states/vite.config.js
new file mode 100644
index 0000000000..1744dbc719
--- /dev/null
+++ b/samples/inputs/rating/states/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build'
+  },
+  server: {
+    open: false
+  },
+});
\ No newline at end of file
diff --git a/samples/inputs/rating/styling/index.html b/samples/inputs/rating/styling/index.html
index 32270cc1a2..805c2ba96f 100644
--- a/samples/inputs/rating/styling/index.html
+++ b/samples/inputs/rating/styling/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Styling</title>
+    <title>RatingStyling</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/inputs/rating/styling/package.json b/samples/inputs/rating/styling/package.json
index 795695786c..29bbce020a 100644
--- a/samples/inputs/rating/styling/package.json
+++ b/samples/inputs/rating/styling/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-button-overview",
-  "description": "This project provides example of Button Overview using Infragistics React components",
+  "name": "react-rating-styling",
+  "description": "This project provides example of Rating Styling using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/inputs/rating/styling/src/index.css b/samples/inputs/rating/styling/src/index.css
index 9c67266cbe..78c59c2777 100644
--- a/samples/inputs/rating/styling/src/index.css
+++ b/samples/inputs/rating/styling/src/index.css
@@ -1,28 +1,38 @@
 /* shared styles are loaded from: */
 /* https://dl.infragistics.com/x/css/samples/shared.v8.css */
 
-igc-rating {
-    --symbol-size: 44px;
-    --symbol-full-color: hsla(var(--ig-warn-A400), var(--ig-warn-a));
-    --symbol-empty-color: hsla(var(--ig-warn-A400), var(--ig-warn-a));
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
 }
 
-igc-rating[disabled] {
-    --symbol-full-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-    --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+.examples {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
 }
 
-igc-rating::part(label) {
-    font-size: 18px;
-    font-weight: 600;
-    text-transform: var(--ig-overline-text-transform);
-    color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+.example {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
 }
 
-igc-rating::part(symbols) {
-    gap: 8px; 
+.example-label {
+    font: 500 14px / 24px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.1px;
+    color: #556c86;
 }
 
-.size-large {
-    --ig-size: var(--ig-size-large);
+.heart-rating {
+    --ig-rating-symbol-full-color: #d9357f;
+    --ig-rating-symbol-empty-color: #d9357f;
+}
+
+.star-rating {
+    --ig-rating-symbol-full-color: #faa419;
+    --ig-rating-symbol-empty-color: #8a8a8a;
 }
diff --git a/samples/inputs/rating/styling/src/index.tsx b/samples/inputs/rating/styling/src/index.tsx
index bb41096530..5e1820f730 100644
--- a/samples/inputs/rating/styling/src/index.tsx
+++ b/samples/inputs/rating/styling/src/index.tsx
@@ -1,22 +1,40 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRating } from 'igniteui-react';
+import { IgrIcon, IgrRating, IgrRatingSymbol, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-export default class RatingStyling extends React.Component<any, any> {
+const icons = [
+    { name: 'favorite', text: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>' },
+    { name: 'favorite_border', text: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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.55l-.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>' },
+];
 
-    constructor(props: any) {
-        super(props);           
-    }       
+export default function RatingStyling(): JSX.Element {
+    useEffect(() => {
+        icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material'));
+    }, []);
 
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">                
-                <IgrRating className="size-large" label="Styled Rating" value={2.5} step={.5} hoverPreview={true}></IgrRating>                                    
+    return (
+        <div className="sample">
+            <div className="examples">
+                <div className="example">
+                    <span className="example-label">Custom icon and color</span>
+                    <IgrRating className="heart-rating" aria-label="Rate your experience" value={3}>
+                        {[1, 2, 3, 4, 5].map((symbol) => (
+                            <IgrRatingSymbol key={symbol}>
+                                <IgrIcon name="favorite" collection="material" />
+                                <IgrIcon slot="empty" name="favorite_border" collection="material" />
+                            </IgrRatingSymbol>
+                        ))}
+                    </IgrRating>
+                </div>
+                <div className="example">
+                    <span className="example-label">10 stars</span>
+                    <IgrRating className="star-rating" aria-label="Rate your experience" max={10} value={5} />
+                </div>
             </div>
-        );
-    }  
+        </div>
+    );
 }
 
 // rendering above class to the React DOM
diff --git a/samples/inputs/rating/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/rating/tailwind-styling/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..ff434ecd44
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/.devcontainer/devcontainer.json
@@ -0,0 +1,4 @@
+{
+    "name": "Node.js",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}
diff --git a/samples/inputs/rating/tailwind-styling/.eslintrc.js b/samples/inputs/rating/tailwind-styling/.eslintrc.js
new file mode 100644
index 0000000000..ea01229020
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
diff --git a/samples/inputs/rating/single-selection/README.md b/samples/inputs/rating/tailwind-styling/README.md
similarity index 91%
rename from samples/inputs/rating/single-selection/README.md
rename to samples/inputs/rating/tailwind-styling/README.md
index ae7cd8ac41..5c955b6001 100644
--- a/samples/inputs/rating/single-selection/README.md
+++ b/samples/inputs/rating/tailwind-styling/README.md
@@ -1,7 +1,7 @@
 <!-- NOTE: do not change this file because it's auto re-generated from template: -->
 <!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
 
-This folder contains implementation of React application with example of Single Selection feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of Tailwind Styling feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
 
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Single
         <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
         </a>
-        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/single-selection" rel="noopener noreferrer">
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/rating/tailwind-styling" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
         </a>
-        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/single-selection?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/rating/tailwind-styling?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
         </a>
     </body>
@@ -34,7 +34,7 @@ Follow these instructions to run this example:
 git clone https://github.com/IgniteUI/igniteui-react-examples.git
 git checkout master
 cd ./igniteui-react-examples
-cd ./samples/inputs/rating/single-selection
+cd ./samples/inputs/rating/tailwind-styling
 ```
 
 open above folder in VS Code or type:
diff --git a/samples/inputs/rating/tailwind-styling/index.html b/samples/inputs/rating/tailwind-styling/index.html
new file mode 100644
index 0000000000..c1db140e73
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>RatingTailwindStyling</title>
+    <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/samples/inputs/rating/tailwind-styling/package.json b/samples/inputs/rating/tailwind-styling/package.json
new file mode 100644
index 0000000000..b36d23989c
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "react-rating-tailwind-styling",
+  "description": "This project provides example of Rating Tailwind Styling using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^1.17.0",
+    "igniteui-react": "19.9.0",
+    "igniteui-react-core": "19.6.0",
+    "igniteui-webcomponents": "^7.4.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "tailwindcss": "^4.1.14",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/rating/tailwind-styling/sandbox.config.json b/samples/inputs/rating/tailwind-styling/sandbox.config.json
new file mode 100644
index 0000000000..20199570e4
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+  "infiniteLoopProtection": false,
+  "hardReloadOnChange": false,
+  "view": "browser"
+}
diff --git a/samples/inputs/rating/tailwind-styling/src/index.css b/samples/inputs/rating/tailwind-styling/src/index.css
new file mode 100644
index 0000000000..f71efdc7ab
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/src/index.css
@@ -0,0 +1,19 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import url("https://use.typekit.net/bng2zgw.css");
+@source "./index.tsx";
+
+@theme {
+    --color-product-ink: #00142b;
+    --color-product-muted: #556c86;
+    --color-product-border: #d2dbe8;
+    --color-product-primary: #0176ff;
+    --color-product-primary-hover: #005dcc;
+    --color-product-primary-active: #004699;    --color-rating-full: #faa419;
+    --color-rating-empty: #8a8a8a;
+    --color-rating-label: #616161;
+}
diff --git a/samples/inputs/rating/tailwind-styling/src/index.tsx b/samples/inputs/rating/tailwind-styling/src/index.tsx
new file mode 100644
index 0000000000..f39bb7439b
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/src/index.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrButton, IgrIcon, IgrRating, registerIconFromText } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const headphonesIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/></svg>';
+
+export default function RatingTailwindStyling(): JSX.Element {
+    useEffect(() => {
+        registerIconFromText('headphones', headphonesIcon, 'material');
+    }, []);
+
+    return (
+        <div className="sample flex items-center justify-center">
+            <div className="w-[328px] rounded-xl border border-product-border bg-white p-2 font-[aktiv-grotesk,sans-serif] [--ig-font-family:aktiv-grotesk,sans-serif]">
+                <div className="flex items-center gap-4 px-4 py-2">
+                    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-linear-to-b from-[#d2f7ff] to-[#8fb0cf]">
+                        <IgrIcon className="text-[#5f83a7] [--ig-icon-size:1.75rem]" name="headphones" collection="material" />
+                    </div>
+                    <div className="flex-1">
+                        <span className="block text-sm leading-5 font-medium text-product-ink">Wireless Headphones</span>
+                        <span className="block max-w-36 text-xs leading-4 font-semibold text-product-muted">Great sound quality and battery life!</span>
+                    </div>
+                    <span className="text-xl text-product-primary">$89</span>
+                </div>
+                <div className="flex items-end justify-between border-t border-product-border p-2">
+                    <IgrRating
+                        className="[--ig-rating-label-color:var(--color-rating-label)] [--ig-rating-symbol-empty-color:var(--color-rating-empty)] [--ig-rating-symbol-full-color:var(--color-rating-full)] [&::part(label)]:font-['Titillium_Web',sans-serif] [&::part(label)]:text-xs [&::part(label)]:leading-4 [&::part(label)]:font-normal [&::part(label)]:tracking-[0.4px]"
+                        label="Rate this product"
+                        hoverPreview={true}
+                    />
+                    <IgrButton
+                        className="[--ig-contained-button-active-background:var(--color-product-primary-active)] [--ig-contained-button-background:var(--color-product-primary)] [--ig-contained-button-border-radius:0.375rem] [--ig-contained-button-focus-background:var(--color-product-primary-active)] [--ig-contained-button-focus-hover-background:var(--color-product-primary-hover)] [--ig-contained-button-focus-visible-background:var(--color-product-primary)] [--ig-contained-button-hover-background:var(--color-product-primary-hover)] [--ig-contained-button-size:1.875rem] [&::part(base)]:px-4 [&::part(base)]:text-sm [&::part(base)]:font-medium [&::part(base)]:tracking-[0.1px] [&::part(base)]:normal-case"
+                        variant="contained"
+                    >
+                        Submit review
+                    </IgrButton>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<RatingTailwindStyling/>);
diff --git a/samples/inputs/rating/tailwind-styling/tsconfig.json b/samples/inputs/rating/tailwind-styling/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/inputs/rating/tailwind-styling/vite.config.js b/samples/inputs/rating/tailwind-styling/vite.config.js
new file mode 100644
index 0000000000..4043727956
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  build: {
+    outDir: 'build',
+  },
+  server: {
+    open: false,
+  },
+});

From 22ce07f474d9b33ac2c4cd418b765d1bc6b64c83 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Fri, 9 Oct 2026 12:14:20 +0300
Subject: [PATCH 2/4] fix(rating): update samples styling

---
 browser/public/meta.json                               | 2 +-
 browser/src/navigation/SamplesBrowser.json             | 2 +-
 samples/inputs/rating/interaction-states/src/index.tsx | 4 ++--
 samples/inputs/rating/overview/src/index.css           | 3 ++-
 samples/inputs/rating/overview/src/index.tsx           | 2 +-
 samples/inputs/rating/tailwind-styling/src/index.css   | 3 ++-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/browser/public/meta.json b/browser/public/meta.json
index 0ad2db3012..04dd164e73 100644
--- a/browser/public/meta.json
+++ b/browser/public/meta.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-10-08 15:22:14","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-10-09 10:33:50","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 0ad2db3012..04dd164e73 100644
--- a/browser/src/navigation/SamplesBrowser.json
+++ b/browser/src/navigation/SamplesBrowser.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-10-08 15:22:14","note":"this file is auto-generated"}
+{"version":"23.2.915","date":"2026-10-09 10:33:50","note":"this file is auto-generated"}
\ No newline at end of file
diff --git a/samples/inputs/rating/interaction-states/src/index.tsx b/samples/inputs/rating/interaction-states/src/index.tsx
index 366e9331bc..dfcfee3fc8 100644
--- a/samples/inputs/rating/interaction-states/src/index.tsx
+++ b/samples/inputs/rating/interaction-states/src/index.tsx
@@ -10,11 +10,11 @@ export default function RatingInteractionStates(): JSX.Element {
             <div className="states">
                 <div className="state">
                     <span className="state-label">Enabled</span>
-                    <IgrRating label="Rate your experience" />
+                    <IgrRating label="Rate your experience" value={1} />
                 </div>
                 <div className="state">
                     <span className="state-label">Disabled</span>
-                    <IgrRating label="Rate your experience" disabled={true} />
+                    <IgrRating label="Rate your experience" value={1} disabled={true} />
                 </div>
             </div>
         </div>
diff --git a/samples/inputs/rating/overview/src/index.css b/samples/inputs/rating/overview/src/index.css
index 721696166b..a927098155 100644
--- a/samples/inputs/rating/overview/src/index.css
+++ b/samples/inputs/rating/overview/src/index.css
@@ -10,7 +10,8 @@
 }
 
 .rating-card {
-    width: 14rem;
+    width: 15rem;
+    box-shadow: var(--ig-elevation-2);
 }
 
 .rating-card igc-card-content {
diff --git a/samples/inputs/rating/overview/src/index.tsx b/samples/inputs/rating/overview/src/index.tsx
index d1fd4ece6e..1577efcc26 100644
--- a/samples/inputs/rating/overview/src/index.tsx
+++ b/samples/inputs/rating/overview/src/index.tsx
@@ -7,7 +7,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 export default function RatingOverview(): JSX.Element {
     return (
         <div className="sample">
-            <IgrCard className="rating-card" elevated={true}>
+            <IgrCard className="rating-card">
                 <IgrCardHeader>
                     <span slot="title">Rate this product</span>
                     <span slot="subtitle">Your opinion matters to us!</span>
diff --git a/samples/inputs/rating/tailwind-styling/src/index.css b/samples/inputs/rating/tailwind-styling/src/index.css
index f71efdc7ab..f5ef415d38 100644
--- a/samples/inputs/rating/tailwind-styling/src/index.css
+++ b/samples/inputs/rating/tailwind-styling/src/index.css
@@ -13,7 +13,8 @@
     --color-product-border: #d2dbe8;
     --color-product-primary: #0176ff;
     --color-product-primary-hover: #005dcc;
-    --color-product-primary-active: #004699;    --color-rating-full: #faa419;
+    --color-product-primary-active: #004699;
+    --color-rating-full: #faa419;
     --color-rating-empty: #8a8a8a;
     --color-rating-label: #616161;
 }

From 47637749262c707c24088aba0f62ad20aeccbd40 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Tue, 20 Oct 2026 13:17:55 +0300
Subject: [PATCH 3/4] fix(rating): update tailwind sample picture

---
 browser/public/meta.json                           |  2 +-
 browser/src/navigation/SamplesBrowser.json         |  2 +-
 .../inputs/rating/tailwind-styling/src/index.tsx   | 14 +++-----------
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/browser/public/meta.json b/browser/public/meta.json
index 04dd164e73..536835e555 100644
--- a/browser/public/meta.json
+++ b/browser/public/meta.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-10-09 10:33:50","note":"this file is auto-generated"}
\ No newline at end of file
+{"version":"23.2.915","date":"2026-10-20 13:14: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 04dd164e73..536835e555 100644
--- a/browser/src/navigation/SamplesBrowser.json
+++ b/browser/src/navigation/SamplesBrowser.json
@@ -1 +1 @@
-{"version":"23.2.915","date":"2026-10-09 10:33:50","note":"this file is auto-generated"}
\ No newline at end of file
+{"version":"23.2.915","date":"2026-10-20 13:14:13","note":"this file is auto-generated"}
\ No newline at end of file
diff --git a/samples/inputs/rating/tailwind-styling/src/index.tsx b/samples/inputs/rating/tailwind-styling/src/index.tsx
index f39bb7439b..947049198b 100644
--- a/samples/inputs/rating/tailwind-styling/src/index.tsx
+++ b/samples/inputs/rating/tailwind-styling/src/index.tsx
@@ -1,23 +1,15 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrButton, IgrIcon, IgrRating, registerIconFromText } from 'igniteui-react';
+import { IgrButton, IgrRating } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-const headphonesIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/></svg>';
-
 export default function RatingTailwindStyling(): JSX.Element {
-    useEffect(() => {
-        registerIconFromText('headphones', headphonesIcon, 'material');
-    }, []);
-
     return (
         <div className="sample flex items-center justify-center">
             <div className="w-[328px] rounded-xl border border-product-border bg-white p-2 font-[aktiv-grotesk,sans-serif] [--ig-font-family:aktiv-grotesk,sans-serif]">
                 <div className="flex items-center gap-4 px-4 py-2">
-                    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-linear-to-b from-[#d2f7ff] to-[#8fb0cf]">
-                        <IgrIcon className="text-[#5f83a7] [--ig-icon-size:1.75rem]" name="headphones" collection="material" />
-                    </div>
+                    <img className="size-10 shrink-0 rounded-lg object-cover" src="https://dl.infragistics.com/x/img/rating/rating-headphones.png" alt="Wireless headphones" />
                     <div className="flex-1">
                         <span className="block text-sm leading-5 font-medium text-product-ink">Wireless Headphones</span>
                         <span className="block max-w-36 text-xs leading-4 font-semibold text-product-muted">Great sound quality and battery life!</span>

From 823e78b55c51a62ce77ffdaa8fea5af0b76d3cb1 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Fri, 23 Oct 2026 09:59:01 +0300
Subject: [PATCH 4/4] fix(rating): load the Aktiv Grotesk font in the Tailwind
 sample

The font @import came after the Tailwind imports. Tailwind's output
then places it after style rules, where browsers ignore it, so the
sample lost its font when run standalone and in the StackBlitz project
the docs open. The samples browser hoisted it, which hid this.

Put it between the @layer statement and the Tailwind imports, the order
chip/tailwind-styling uses, which works in both pipelines.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 samples/inputs/rating/tailwind-styling/src/index.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/samples/inputs/rating/tailwind-styling/src/index.css b/samples/inputs/rating/tailwind-styling/src/index.css
index f5ef415d38..0514ec0b79 100644
--- a/samples/inputs/rating/tailwind-styling/src/index.css
+++ b/samples/inputs/rating/tailwind-styling/src/index.css
@@ -1,10 +1,13 @@
 /* shared styles are loaded from: */
 /* https://dl.infragistics.com/x/css/samples/shared.v8.css */
 
+/* Keep this order. An @import after the Tailwind imports is dropped, and in
+   the samples browser one before the @layer statement drops the Tailwind
+   imports, so Aktiv Grotesk goes between them. */
 @layer theme, base, components, utilities;
+@import url("https://use.typekit.net/bng2zgw.css");
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
-@import url("https://use.typekit.net/bng2zgw.css");
 @source "./index.tsx";
 
 @theme {