From 045ad25a3225af357f53ab05dae4d38916fa4815 Mon Sep 17 00:00:00 2001
From: Inna Atanasova <i.atanasova@sap.com>
Date: Wed, 18 Sep 2024 10:05:52 -0400
Subject: [PATCH] fix(styles): update examples using Rating Indicator [ci
 visual]

---
 packages/styles/src/facet.scss                |   1 +
 packages/styles/src/rating-indicator.scss     |   6 +-
 .../card/extended-header.example.html         |  57 +++---
 .../stories/Dev/facets/combined.example.html  |  54 ++++--
 .../stories/Dev/facets/facets.stories.js      |  11 --
 .../Dev/facets/object-page.example.html       |  56 ++++--
 .../Dev/facets/rating-indicator.example.html  |  23 ---
 .../dynamic-page/with-facets.example.html     |  56 ++++--
 packages/theming-preview/src/icon.html        | 163 ++++++++++++------
 9 files changed, 261 insertions(+), 166 deletions(-)
 delete mode 100644 packages/styles/stories/Dev/facets/rating-indicator.example.html

diff --git a/packages/styles/src/facet.scss b/packages/styles/src/facet.scss
index 52465d32f2..eb980608b6 100644
--- a/packages/styles/src/facet.scss
+++ b/packages/styles/src/facet.scss
@@ -46,6 +46,7 @@ $block: #{$fd-namespace}-facet;
 
     .#{$block}__container {
       flex-direction: column;
+      margin-block: 0;
     }
 
     .#{$block}__rating-container {
diff --git a/packages/styles/src/rating-indicator.scss b/packages/styles/src/rating-indicator.scss
index 8652eef91c..ed0968e623 100644
--- a/packages/styles/src/rating-indicator.scss
+++ b/packages/styles/src/rating-indicator.scss
@@ -66,7 +66,7 @@ $block: #{$fd-namespace}-rating-indicator;
 
   &__list {
     @include fd-reset();
-    
+
     @include fd-inline-flex-vertical-center() {
       gap: var(--ratingIndicator_Item_Spacing);
     };
@@ -94,11 +94,11 @@ $block: #{$fd-namespace}-rating-indicator;
     position: absolute;
 
     &:first-child {
-      clip-path: inset(0 50% 0 0);
+      clip-path: inset(0 48% 0 0);
       left: 0;
 
       @include fd-rtl() {
-        clip-path: inset(0 0 0 50%);
+        clip-path: inset(0 0 0 48%);
         left: auto;
         right: 0;
       }
diff --git a/packages/styles/stories/Components/card/extended-header.example.html b/packages/styles/stories/Components/card/extended-header.example.html
index 572d8968d9..2b87b9e727 100644
--- a/packages/styles/stories/Components/card/extended-header.example.html
+++ b/packages/styles/stories/Components/card/extended-header.example.html
@@ -186,28 +186,45 @@
                 <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
                     <div class="fd-card__header-column fd-card__header-column--right-aligned">
                         <div class="fd-card__header-row">
-                            <div class="fd-rating-indicator fd-rating-indicator--sm">
-                                <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
-                                    <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-s-0" name="rating-s" value="0">
-                                    <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-s-0" aria-hidden="true"></label>
-                    
-                                    <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-s-1" name="rating-s" value="1">
-                                    <label class="fd-rating-indicator__label" for="rating-s-1"></label>
-                    
-                                    <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-s-2" name="rating-s" value="2" checked>
-                                    <label class="fd-rating-indicator__label" for="rating-s-2"></label>
-                    
-                                    <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-s-3" name="rating-s" value="3">
-                                    <label class="fd-rating-indicator__label" for="rating-s-3"></label>
-                    
-                                    <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-s-4" name="rating-s" value="4">
-                                    <label class="fd-rating-indicator__label" for="rating-s-4"></label>
-                    
-                                    <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-s-5" name="rating-s" value="5">
-                                    <label class="fd-rating-indicator__label" for="rating-s-5"></label>
+                            <div class="fd-rating-indicator">
+                                <div 
+                                    class="fd-rating-indicator__container"
+                                    title="Rating"
+                                    tabindex="0"
+                                    role="slider"
+                                    aria-orientation="horizontal"
+                                    aria-roledescription="Rating Indicator"
+                                    aria-valuemin="0"
+                                    aria-valuenow="2.5"
+                                    aria-valuemax="5"
+                                    aria-valuetext="2.5 of 5"
+                                    >
+                                    <ul class="fd-rating-indicator__list" aria-hidden="true">
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                    </ul>
                                 </div>
-                                <span class="fd-rating-indicator__dynamic-text">(205)</span>
+                                <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
                             </div>
+                            
                         </div>
                     </div>
                 </div>
diff --git a/packages/styles/stories/Dev/facets/combined.example.html b/packages/styles/stories/Dev/facets/combined.example.html
index 7749b7211b..53cceefddd 100644
--- a/packages/styles/stories/Dev/facets/combined.example.html
+++ b/packages/styles/stories/Dev/facets/combined.example.html
@@ -50,26 +50,44 @@ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle4">Pricin
         </div>
 
         <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle1">
-            <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle1">Average User Rating</h1>
-            <h2 class="fd-form-label">6 reviews</h2>
+            <span role="heading" aria-level="3" class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle1">Average User Rating</span>
             <div class="fd-rating-indicator fd-facet__container">
-                <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
-                <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-1" name="rating-max-value-5" value="1">
-                <label class="fd-rating-indicator__label" for="rating-max-value-5-1"></label>
-
-                <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-2" name="rating-max-value-5" value="2" checked>
-                <label class="fd-rating-indicator__label" for="rating-max-value-5-2"></label>
-
-                <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-3" name="rating-max-value-5" value="3">
-                <label class="fd-rating-indicator__label" for="rating-max-value-5-3"></label>
-
-                <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-4" name="rating-max-value-5" value="4">
-                <label class="fd-rating-indicator__label" for="rating-max-value-5-4"></label>
-
-                <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-5" name="rating-max-value-5" value="5">
-                <label class="fd-rating-indicator__label" for="rating-max-value-5-5"></label>
+                <div 
+                    class="fd-rating-indicator__container fd-facet__rating-container"
+                    title="Rating"
+                    tabindex="0"
+                    role="slider"
+                    aria-orientation="horizontal"
+                    aria-roledescription="Rating Indicator"
+                    aria-valuemin="0"
+                    aria-valuenow="2.5"
+                    aria-valuemax="5"
+                    aria-valuetext="2.5 of 5"
+                    >
+                    <ul class="fd-rating-indicator__list" aria-hidden="true">
+                        <li class="fd-rating-indicator__item">
+                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                        </li>
+                        <li class="fd-rating-indicator__item">
+                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                        </li>
+                        <li class="fd-rating-indicator__item">
+                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                        </li>
+                        <li class="fd-rating-indicator__item">
+                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                        </li>
+                        <li class="fd-rating-indicator__item">
+                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                        </li>
+                    </ul>
                 </div>
-                <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
+                <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text">(2.5 of 5)</span>
             </div>
         </div>
     </div>
diff --git a/packages/styles/stories/Dev/facets/facets.stories.js b/packages/styles/stories/Dev/facets/facets.stories.js
index 387d5e0b75..d65da241b7 100644
--- a/packages/styles/stories/Dev/facets/facets.stories.js
+++ b/packages/styles/stories/Dev/facets/facets.stories.js
@@ -1,7 +1,6 @@
 import objectPageMobileExampleHtml from "./object-page-mobile.example.html?raw";
 import objectPageExampleHtml from "./object-page.example.html?raw";
 import imageFacetExampleHtml from "./image-facet.example.html?raw";
-import ratingIndicatorExampleHtml from "./rating-indicator.example.html?raw";
 import formFacetLinkExampleHtml from "./form-facet-link.example.html?raw";
 import formFacetExampleHtml from "./form-facet.example.html?raw";
 import keyValueExampleHtml from "./key-value.example.html?raw";
@@ -71,16 +70,6 @@ FormFacetLink.parameters = {
     }
   }
 };
-export const RatingIndicator = () => ratingIndicatorExampleHtml;
-RatingIndicator.storyName = 'Rating Indicator Facet';
-RatingIndicator.parameters = {
-  docs: {
-    description: {
-      story: `The Rating Indicator Facet displays a **Rating Indicator**. It consists of a mandatory title, optional supplementary texts
-        like a subtitle or a dynamic text, and the rating indicator.`
-    }
-  }
-};
 export const ImageFacet = () => imageFacetExampleHtml;
 ImageFacet.storyName = 'Image/Avatar Facet';
 ImageFacet.parameters = {
diff --git a/packages/styles/stories/Dev/facets/object-page.example.html b/packages/styles/stories/Dev/facets/object-page.example.html
index 4ebce5379f..25498cdc01 100644
--- a/packages/styles/stories/Dev/facets/object-page.example.html
+++ b/packages/styles/stories/Dev/facets/object-page.example.html
@@ -130,27 +130,45 @@ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle12">Prici
                             </span>
                         </div>
 
-                        <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md  fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle3">
-                            <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</h1>
-                            <h2 class="fd-form-label">6 reviews</h2>
+                        <div class="fd-facet fd-facet--rating-indicator">
+                            <div role="heading" aria-level="3" class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</div>
                             <div class="fd-rating-indicator fd-facet__container">
-                                <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
-                                <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-1" name="2-rating-max-value-5" value="1">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-1"></label>
-
-                                <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-2" name="2-rating-max-value-5" value="2" checked>
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-2"></label>
-
-                                <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-3" name="2-rating-max-value-5" value="3">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-3"></label>
-
-                                <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-4" name="2-rating-max-value-5" value="4">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-4"></label>
-
-                                <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-5" name="2-rating-max-value-5" value="5">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-5"></label>
+                                <div 
+                                    class="fd-rating-indicator__container fd-facet__rating-container"
+                                    title="Rating"
+                                    tabindex="0"
+                                    role="slider"
+                                    aria-orientation="horizontal"
+                                    aria-roledescription="Rating Indicator"
+                                    aria-valuemin="0"
+                                    aria-valuenow="2.5"
+                                    aria-valuemax="5"
+                                    aria-valuetext="2.5 of 5"
+                                    >
+                                    <ul class="fd-rating-indicator__list" aria-hidden="true">
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                    </ul>
                                 </div>
-                                <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
+                                <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text">(2.5 of 5)</span>
                             </div>
                         </div>
                     </div>
diff --git a/packages/styles/stories/Dev/facets/rating-indicator.example.html b/packages/styles/stories/Dev/facets/rating-indicator.example.html
deleted file mode 100644
index 7e20cfcce4..0000000000
--- a/packages/styles/stories/Dev/facets/rating-indicator.example.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle2">
-        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle2">Average User Rating</h1>
-        <h2 class="fd-form-label">6 reviews</h2>
-        <div class="fd-rating-indicator fd-facet__container">
-            <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
-            <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-1" name="1-rating-max-value-5" value="1">
-            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-1"></label>
-
-            <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-2" name="1-rating-max-value-5" value="2">
-            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-2"></label>
-
-            <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-3" name="1-rating-max-value-5" value="3">
-            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-3"></label>
-
-            <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-4" name="1-rating-max-value-5" value="4" checked>
-            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-4"></label>
-
-            <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-5" name="1-rating-max-value-5" value="5">
-            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-5"></label>
-            </div>
-            <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(4 of 5)</span>
-        </div>
-    </div>
diff --git a/packages/styles/stories/Layouts/dynamic-page/with-facets.example.html b/packages/styles/stories/Layouts/dynamic-page/with-facets.example.html
index 5f7f577467..d8c1e8023e 100644
--- a/packages/styles/stories/Layouts/dynamic-page/with-facets.example.html
+++ b/packages/styles/stories/Layouts/dynamic-page/with-facets.example.html
@@ -145,27 +145,45 @@ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle12">Prici
                             </span>
                         </div>
 
-                        <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md  fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle3">
-                            <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</h1>
-                            <h2 class="fd-form-label">6 reviews</h2>
+                        <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle1">
+                            <span role="heading" aria-level="3" class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle1">Average User Rating</span>
                             <div class="fd-rating-indicator fd-facet__container">
-                                <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
-                                <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-1" name="2-rating-max-value-5" value="1">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-1"></label>
-
-                                <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-2" name="2-rating-max-value-5" value="2" checked>
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-2"></label>
-
-                                <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-3" name="2-rating-max-value-5" value="3">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-3"></label>
-
-                                <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-4" name="2-rating-max-value-5" value="4">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-4"></label>
-
-                                <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-5" name="2-rating-max-value-5" value="5">
-                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-5"></label>
+                                <div 
+                                    class="fd-rating-indicator__container fd-facet__rating-container"
+                                    title="Rating"
+                                    tabindex="0"
+                                    role="slider"
+                                    aria-orientation="horizontal"
+                                    aria-roledescription="Rating Indicator"
+                                    aria-valuemin="0"
+                                    aria-valuenow="2.5"
+                                    aria-valuemax="5"
+                                    aria-valuetext="2.5 of 5"
+                                    >
+                                    <ul class="fd-rating-indicator__list" aria-hidden="true">
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                        <li class="fd-rating-indicator__item">
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                            <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                        </li>
+                                    </ul>
                                 </div>
-                                <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
+                                <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text">(2.5 of 5)</span>
                             </div>
                         </div>
                     </div>
diff --git a/packages/theming-preview/src/icon.html b/packages/theming-preview/src/icon.html
index 3549f63657..9645a22c80 100644
--- a/packages/theming-preview/src/icon.html
+++ b/packages/theming-preview/src/icon.html
@@ -92,64 +92,121 @@ <h4 class="fd-panel__title">Rating Indicator</h4>
             </div>
             <div class="fd-panel__content fd-theming__flex">
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <div class="fd-rating-indicator fd-rating-indicator--hide-dynamic-text">
-                        <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
-                            <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-1" name="rating" value="1">  
-                            <label class="fd-rating-indicator__label" for="rating-1"></label>
-                            
-                            <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-2" name="rating" value="2" checked>
-                            <label class="fd-rating-indicator__label" for="rating-2"></label>
-                
-                            <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-3" name="rating" value="3">
-                            <label class="fd-rating-indicator__label" for="rating-3"></label>            
-                
-                            <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-4" name="rating" value="4">
-                            <label class="fd-rating-indicator__label" for="rating-4"></label>
-                
-                            <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-5" name="rating" value="5">
-                            <label class="fd-rating-indicator__label" for="rating-5"></label>
+                    <div class="fd-rating-indicator">
+                        <div 
+                            class="fd-rating-indicator__container"
+                            title="Rating"
+                            tabindex="0"
+                            role="slider"
+                            aria-orientation="horizontal"
+                            aria-roledescription="Rating Indicator"
+                            aria-valuemin="0"
+                            aria-valuenow="2.5"
+                            aria-valuemax="5"
+                            aria-valuetext="2.5 of 5"
+                            >
+                            <ul class="fd-rating-indicator__list" aria-hidden="true">
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                    <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                    <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                            </ul>
                         </div>
-                        <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
+                        <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
                     </div>
-                    <br>
-                    <div class="fd-rating-indicator" aria-disabled="true">
-                        <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
-                            <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-1" name="rating-disabled" value="1" disabled>  
-                            <label class="fd-rating-indicator__label" for="rating-disabled-1"></label>
-                            
-                            <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-2" name="rating-disabled" value="2" disabled checked>
-                            <label class="fd-rating-indicator__label" for="rating-disabled-2"></label>
-                            
-                            <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-3" name="rating-disabled" value="3" disabled>
-                            <label class="fd-rating-indicator__label" for="rating-disabled-3"></label>
-                            
-                            <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-4" name="rating-disabled" value="4" disabled>
-                            <label class="fd-rating-indicator__label" for="rating-disabled-4"></label>
-                            
-                            <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-5" name="rating-disabled" value="5" disabled>
-                            <label class="fd-rating-indicator__label" for="rating-disabled-5"></label>
+
+                    <div class="fd-rating-indicator is-readonly">
+                        <div 
+                            class="fd-rating-indicator__container"
+                            title="Rating"
+                            tabindex="0"
+                            role="slider"
+                            aria-orientation="horizontal"
+                            aria-roledescription="Rating Indicator"
+                            aria-valuemin="0"
+                            aria-valuenow="2.5"
+                            aria-valuemax="5"
+                            aria-valuetext="2.5 of 5"
+                            >
+                            <ul class="fd-rating-indicator__list" aria-hidden="true">
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                            </ul>
                         </div>
-                        <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
+                        <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
                     </div>
-                    <br>
-                    <div class="fd-rating-indicator fd-rating-indicator--display-mode">
-                        <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
-                            <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-1" name="rating-display-mode" value="1" disabled>  
-                            <label class="fd-rating-indicator__label" for="rating-display-mode-1"></label>
-                            
-                            <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-2" name="rating-display-mode" value="2" disabled checked>
-                            <label class="fd-rating-indicator__label" for="rating-display-mode-2"></label>
-                            
-                            <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-3" name="rating-display-mode" value="3" disabled>
-                            <label class="fd-rating-indicator__label" for="rating-display-mode-3"></label>
-                            
-                            <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-4" name="rating-display-mode" value="4" disabled>
-                            <label class="fd-rating-indicator__label" for="rating-display-mode-4"></label>
-                            
-                            <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-5" name="rating-display-mode" value="5" disabled>
-                            <label class="fd-rating-indicator__label" for="rating-display-mode-5"></label>
+
+                    <div class="fd-rating-indicator is-disabled">
+                        <div 
+                            class="fd-rating-indicator__container"
+                            title="Rating"
+                            tabindex="0"
+                            role="slider"
+                            aria-orientation="horizontal"
+                            aria-roledescription="Rating Indicator"
+                            aria-valuemin="0"
+                            aria-valuenow="2.5"
+                            aria-valuemax="5"
+                            aria-valuetext="2.5 of 5"
+                            >
+                            <ul class="fd-rating-indicator__list" aria-hidden="true">
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                                    <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                                <li class="fd-rating-indicator__item">
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                    <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                                </li>
+                            </ul>
                         </div>
-                        <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
+                        <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
                     </div>
                 </div>
             </div>