From 71b307117463946b4715c620907848981fbb6f9c 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 +-
 .../action-sheet-mobile.example.html          |   1 +
 .../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 ++--
 .../tests/__snapshots__/styles.test.ts.snap   | 251 +++++++++++-------
 packages/theming-preview/src/icon.html        | 163 ++++++++----
 11 files changed, 410 insertions(+), 269 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/action-sheet/action-sheet-mobile.example.html b/packages/styles/stories/Components/action-sheet/action-sheet-mobile.example.html
index 11d1c52683..6a5bfb00bf 100644
--- a/packages/styles/stories/Components/action-sheet/action-sheet-mobile.example.html
+++ b/packages/styles/stories/Components/action-sheet/action-sheet-mobile.example.html
@@ -1,5 +1,6 @@
 <div style="width: 350px; height: 600px; position: relative">
     <button class="fd-button fd-button--transparent"
+            style="z-index: 10;"
             aria-label="More Options" aria-controls="actionSheetPhone" aria-expanded="true"
             aria-haspopup="true" onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');">
         <i class="sap-icon--settings"></i>
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/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index 437199ea7a..02cd99385b 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -8516,6 +8516,7 @@ exports[`Check stories > Components/Action Bar > Story ResponsiveXL > Should mat
 exports[`Check stories > Components/Action Sheet > Story ActionSheetMobile > Should match snapshot 1`] = `
 "<div style=\\"width: 350px; height: 600px; position: relative\\">
     <button class=\\"fd-button fd-button--transparent\\"
+            style=\\"z-index: 10;\\"
             aria-label=\\"More Options\\" aria-controls=\\"actionSheetPhone\\" aria-expanded=\\"true\\"
             aria-haspopup=\\"true\\" onclick=\\"toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');\\">
         <i class=\\"sap-icon--settings\\"></i>
@@ -15011,28 +15012,45 @@ exports[`Check stories > Components/Card/Card > Story ExtendedHeader > Should ma
                 <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>
@@ -52560,26 +52578,44 @@ exports[`Check stories > Dev/Facets > Story Combined > Should match snapshot 1`]
         </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>
@@ -52808,27 +52844,45 @@ exports[`Check stories > Dev/Facets > Story ObjectPage > Should match snapshot 1
                             </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>
@@ -53170,33 +53224,6 @@ exports[`Check stories > Dev/Facets > Story ObjectPageMobile > Should match snap
 "
 `;
 
-exports[`Check stories > Dev/Facets > Story RatingIndicator > Should match snapshot 1`] = `
-"<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>
-"
-`;
-
 exports[`Check stories > Dev/Navigation Menu > Story NavigationMenuItem > Should match snapshot 1`] = `
 "<div class=\\"fd-navigation-menu\\">
     <div class=\\"fd-navigation-menu__item\\" tabindex=\\"0\\">
@@ -54805,27 +54832,45 @@ exports[`Check stories > Layouts/Dynamic Page > Story WithFacets > Should match
                             </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>