diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index e1ee662425..6104232102 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -9812,33 +9812,34 @@ exports[`Check stories > Components/Calendar > Story CalendarDays > Should match
         <div class=\\"docs_cal_item_wrapper\\">
             <div class=\\"fd-calendar__item  fd-calendar__item--side-helper \\">
                 <div class=\\"fd-calendar__text-wrapper\\">
-                    <span class=\\"fd-calendar__text\\">M</span>
+                    <span class=\\"fd-calendar__text\\">Mon</span>
                 </div>
             </div>
         </div>
         <div class=\\"docs_cal_item_wrapper\\">
             <div class=\\"fd-calendar__item  fd-calendar__item--side-helper\\">
                 <div class=\\"fd-calendar__text-wrapper\\">
-                    <span class=\\"fd-calendar__text\\">M</span>
+                    <span class=\\"fd-calendar__text\\">Mon</span>
                 </div>
             </div>
         </div>
         <div class=\\"docs_cal_item_wrapper\\">
             <div class=\\"fd-calendar__item  fd-calendar__item--side-helper\\">
                 <div class=\\"fd-calendar__text-wrapper\\">
-                    <span class=\\"fd-calendar__text\\">M</span>
+                    <span class=\\"fd-calendar__text\\">Mon</span>
                 </div>
             </div>
         </div>
         <div class=\\"docs_cal_item_wrapper\\">
             <div class=\\"fd-calendar__item  fd-calendar__item--side-helper\\">
                 <div class=\\"fd-calendar__text-wrapper\\">
-                    <span class=\\"fd-calendar__text\\">M</span>
+                    <span class=\\"fd-calendar__text\\">Mon</span>
                 </div>
             </div>
         </div>
     </div>
-</section>"
+</section>
+"
 `;
 
 exports[`Check stories > Components/Calendar > Story Days > Should match snapshot 1`] = `
@@ -9868,37 +9869,37 @@ exports[`Check stories > Components/Calendar > Story Days > Should match snapsho
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\"></th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">S</span>
+                            <span class=\\"fd-calendar__text\\">Sun</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">M</span>
+                            <span class=\\"fd-calendar__text\\">Mon</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">T</span>
+                            <span class=\\"fd-calendar__text\\">Tue</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">W</span>
+                            <span class=\\"fd-calendar__text\\">Wed</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">T</span>
+                            <span class=\\"fd-calendar__text\\">Thu</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">F</span>
+                            <span class=\\"fd-calendar__text\\">Fri</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">S</span>
+                            <span class=\\"fd-calendar__text\\">Sat</span>
                         </div>
                     </th>
                 </tr>
@@ -10144,37 +10145,37 @@ exports[`Check stories > Components/Calendar > Story Days > Should match snapsho
                 <tr class=\\"fd-calendar__row\\">
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">S</span>
+                            <span class=\\"fd-calendar__text\\">Sun</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">M</span>
+                            <span class=\\"fd-calendar__text\\">Mon</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">T</span>
+                            <span class=\\"fd-calendar__text\\">Tue</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">W</span>
+                            <span class=\\"fd-calendar__text\\">Wed</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">T</span>
+                            <span class=\\"fd-calendar__text\\">Thu</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">F</span>
+                            <span class=\\"fd-calendar__text\\">Fri</span>
                         </div>
                     </th>
                     <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                         <div class=\\"fd-calendar__text-wrapper\\">
-                            <span class=\\"fd-calendar__text\\">S</span>
+                            <span class=\\"fd-calendar__text\\">Sat</span>
                         </div>
                     </th>
                 </tr>
@@ -33569,57 +33570,417 @@ exports[`Check stories > Components/Rating Indicator > Story DifferentValues > S
 
 exports[`Check stories > Components/Rating Indicator > Story Disabled > Should match snapshot 1`] = `
 "<div class=\\"example-container\\">
+    <p>Default:</p>
     <div class=\\"fd-rating-indicator\\" aria-disabled=\\"true\\">
         <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-disabled-0\\" name=\\"rating-disabled\\" value=\\"0\\" disabled>
-            <label class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\" for=\\"rating-disabled-0\\" aria-hidden=\\"true\\"></label>
+            <input
+                aria-label=\\"0 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+                id=\\"rating-disabled-0\\"
+                name=\\"rating-disabled\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-disabled-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
 
-            <input aria-label=\\"1 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-1\\" name=\\"rating-disabled\\" value=\\"1\\" disabled>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
         <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
     </div>
 </div>
+<div class=\\"example-container\\">
+    <p>Default:</p>
+    <div class=\\"fd-rating-indicator fd-rating-indicator--half-star\\" aria-disabled=\\"true\\">
+        <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-disabled-half-0\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-disabled-half-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
+
+            <input
+                aria-label=\\"half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-05\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"0.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-05\\"></label>
+
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-1\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"1\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-1\\"></label>
+
+            <input
+                aria-label=\\"1 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-15\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"1.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-15\\"></label>
+
+            <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-half-2\\"
+            name=\\"rating-disabled-half\\" value=2\\">
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-2\\"></label>
+
+            <input
+                aria-label=\\"2 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-25\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"2.5\\"
+                checked
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-25\\"></label>
+
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-3\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"3\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-3\\"></label>
+
+            <input
+                aria-label=\\"3 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-35\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"3.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-35\\"></label>
+
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-4\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"4\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-4\\"></label>
+
+            <input
+                aria-label=\\"4 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-45\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"4.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-45\\"></label>
+
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-5\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-5\\"></label>
+        </div>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+    </div>
+</div>
 "
 `;
 
 exports[`Check stories > Components/Rating Indicator > Story DisplayMode > Should match snapshot 1`] = `
 "<div class=\\"example-container\\">
-        <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=\\"0 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\" id=\\"rating-display-mode-0\\" name=\\"rating-display-mode\\" value=\\"0\\" disabled>
-                <label class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\" for=\\"rating-display-mode-0\\" aria-hidden=\\"true\\"></label>
+    <p>Default:</p>
+    <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=\\"0 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+                id=\\"rating-display-mode-0\\"
+                name=\\"rating-display-mode\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-display-mode-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
 
-                <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=\\"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=\\"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=\\"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=\\"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>
-            <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+            <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>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+    </div>
+</div>
+<div class=\\"example-container\\">
+    <p>Half values:</p>
+    <div class=\\"fd-rating-indicator fd-rating-indicator--half-star fd-rating-indicator--display-mode\\">
+        <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-display-mode-half-0\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-display-mode-half-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
+
+            <input
+                aria-label=\\"half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-05\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"0.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-05\\"></label>
+
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-1\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"1\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-1\\"></label>
+
+            <input
+                aria-label=\\"1 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-15\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"1.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-15\\"></label>
+
+            <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-display-mode-half-2\\"
+            name=\\"rating-display-mode-half\\" value=2\\">
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-2\\"></label>
+
+            <input
+                aria-label=\\"2 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-25\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"2.5\\"
+                checked
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-25\\"></label>
+
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-3\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"3\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-3\\"></label>
+
+            <input
+                aria-label=\\"3 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-35\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"3.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-35\\"></label>
+
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-4\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"4\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-4\\"></label>
+
+            <input
+                aria-label=\\"4 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-45\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"4.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-45\\"></label>
+
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-5\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-5\\"></label>
         </div>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2.5 of 5)</span>
     </div>
+</div>
 "
 `;
 
@@ -33811,29 +34172,210 @@ exports[`Check stories > Components/Rating Indicator > Story HalfValues > Should
 
 exports[`Check stories > Components/Rating Indicator > Story NonInteractive > Should match snapshot 1`] = `
 "<div class=\\"example-container\\">
-        <div class=\\"fd-rating-indicator fd-rating-indicator--non-interactive\\">
-            <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-non-interactive-mode-0\\" name=\\"rating-non-interactive-mode\\" value=\\"0\\" disabled>
-                <label class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\" for=\\"rating-non-interactive-mode-0\\" aria-hidden=\\"true\\"></label>
+  <p>Default:</p>
+    <div class=\\"fd-rating-indicator fd-rating-indicator--non-interactive\\">
+        <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-non-interactive-mode-0\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-non-interactive-mode-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
 
-                <input aria-label=\\"1 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-1\\" name=\\"rating-non-interactive-mode\\" value=\\"1\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-1\\"></label>
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-1\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"1\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-1\\"></label>
 
-                <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-2\\" name=\\"rating-non-interactive-mode\\" value=\\"2\\" disabled checked>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-2\\"></label>
+            <input
+                aria-label=\\"2 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-2\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"2\\"
+                disabled
+                checked
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-2\\"></label>
 
-                <input aria-label=\\"3 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-3\\" name=\\"rating-non-interactive-mode\\" value=\\"3\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-3\\"></label>
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-3\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"3\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-3\\"></label>
 
-                <input aria-label=\\"4 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-4\\" name=\\"rating-non-interactive-mode\\" value=\\"4\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-4\\"></label>
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-4\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"4\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-4\\"></label>
 
-                <input aria-label=\\"5 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-5\\" name=\\"rating-non-interactive-mode\\" value=\\"5\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-5\\"></label>
-            </div>
-            <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-5\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-5\\"></label>
         </div>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
     </div>
+</div>
+
+<div class=\\"example-container\\">
+  <p>Half values:</p>
+  <div class=\\"fd-rating-indicator fd-rating-indicator--half-star fd-rating-indicator--non-interactive\\">
+      <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-non-interactive-mode-half-0\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"0\\"
+              disabled
+          />
+          <label
+              class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+              for=\\"rating-non-interactive-mode-half-0\\"
+              aria-hidden=\\"true\\"
+          ></label>
+
+          <input
+              aria-label=\\"half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-05\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"0.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-05\\"></label>
+
+          <input
+              aria-label=\\"1 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-1\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"1\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-1\\"></label>
+
+          <input
+              aria-label=\\"1 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-15\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"1.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-15\\"></label>
+
+          <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-half-2\\"
+          name=\\"rating-non-interactive-mode-half\\" value=2\\">
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-2\\"></label>
+
+          <input
+              aria-label=\\"2 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-25\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"2.5\\"
+              checked
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-25\\"></label>
+
+          <input
+              aria-label=\\"3 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-3\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"3\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-3\\"></label>
+
+          <input
+              aria-label=\\"3 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-35\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"3.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-35\\"></label>
+
+          <input
+              aria-label=\\"4 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-4\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"4\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-4\\"></label>
+
+          <input
+              aria-label=\\"4 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-45\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"4.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-45\\"></label>
+
+          <input
+              aria-label=\\"5 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-5\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-5\\"></label>
+      </div>
+      <span class=\\"fd-rating-indicator__dynamic-text\\">(2.5 of 5)</span>
+  </div>
+</div>
 "
 `;
 
@@ -54133,37 +54675,37 @@ exports[`Check stories > Patterns/Date Picker > Story MobileLandscape > Should m
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\"></th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">S</span>
+                      <span class=\\"fd-calendar__text\\">Sun</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">M</span>
+                      <span class=\\"fd-calendar__text\\">Mon</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">T</span>
+                      <span class=\\"fd-calendar__text\\">Tue</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">W</span>
+                      <span class=\\"fd-calendar__text\\">Wed</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">T</span>
+                      <span class=\\"fd-calendar__text\\">Thu</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">F</span>
+                      <span class=\\"fd-calendar__text\\">Fri</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">S</span>
+                      <span class=\\"fd-calendar__text\\">Sat</span>
                   </div>
               </th>
           </tr>
@@ -54453,37 +54995,37 @@ exports[`Check stories > Patterns/Date Picker > Story MobilePortrait > Should ma
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\"></th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">S</span>
+                      <span class=\\"fd-calendar__text\\">Sun</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">M</span>
+                      <span class=\\"fd-calendar__text\\">Mon</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">T</span>
+                      <span class=\\"fd-calendar__text\\">Tue</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">W</span>
+                      <span class=\\"fd-calendar__text\\">Wed</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">T</span>
+                      <span class=\\"fd-calendar__text\\">Thu</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">F</span>
+                      <span class=\\"fd-calendar__text\\">Fri</span>
                   </div>
               </th>
               <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                   <div class=\\"fd-calendar__text-wrapper\\">
-                      <span class=\\"fd-calendar__text\\">S</span>
+                      <span class=\\"fd-calendar__text\\">Sat</span>
                   </div>
               </th>
           </tr>
@@ -54787,37 +55329,37 @@ exports[`Check stories > Patterns/Date Picker > Story TodayNavigationButton > Sh
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\"></th>
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                     <div class=\\"fd-calendar__text-wrapper\\">
-                        <span class=\\"fd-calendar__text\\">S</span>
+                        <span class=\\"fd-calendar__text\\">Sun</span>
                     </div>
                 </th>
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                     <div class=\\"fd-calendar__text-wrapper\\">
-                        <span class=\\"fd-calendar__text\\">M</span>
+                        <span class=\\"fd-calendar__text\\">Mon</span>
                     </div>
                 </th>
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                     <div class=\\"fd-calendar__text-wrapper\\">
-                        <span class=\\"fd-calendar__text\\">T</span>
+                        <span class=\\"fd-calendar__text\\">Tue</span>
                     </div>
                 </th>
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                     <div class=\\"fd-calendar__text-wrapper\\">
-                        <span class=\\"fd-calendar__text\\">W</span>
+                        <span class=\\"fd-calendar__text\\">Wed</span>
                     </div>
                 </th>
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                     <div class=\\"fd-calendar__text-wrapper\\">
-                        <span class=\\"fd-calendar__text\\">T</span>
+                        <span class=\\"fd-calendar__text\\">Thu</span>
                     </div>
                 </th>
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                     <div class=\\"fd-calendar__text-wrapper\\">
-                        <span class=\\"fd-calendar__text\\">F</span>
+                        <span class=\\"fd-calendar__text\\">Fri</span>
                     </div>
                 </th>
                 <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
                     <div class=\\"fd-calendar__text-wrapper\\">
-                        <span class=\\"fd-calendar__text\\">S</span>
+                        <span class=\\"fd-calendar__text\\">Sat</span>
                     </div>
                 </th>
             </tr>
@@ -55099,37 +55641,37 @@ exports[`Check stories > Patterns/Date Picker > Story TodaySelectionButton > Sho
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\"></th>
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
               <div class=\\"fd-calendar__text-wrapper\\">
-                <span class=\\"fd-calendar__text\\">S</span>
+                <span class=\\"fd-calendar__text\\">Sun</span>
               </div>
             </th>
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
               <div class=\\"fd-calendar__text-wrapper\\">
-                <span class=\\"fd-calendar__text\\">M</span>
+                <span class=\\"fd-calendar__text\\">Mon</span>
               </div>
             </th>
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
               <div class=\\"fd-calendar__text-wrapper\\">
-                  <span class=\\"fd-calendar__text\\">T</span>
+                  <span class=\\"fd-calendar__text\\">Tue</span>
               </div>
             </th>
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
               <div class=\\"fd-calendar__text-wrapper\\">
-                <span class=\\"fd-calendar__text\\">W</span>
+                <span class=\\"fd-calendar__text\\">Wed</span>
               </div>
             </th>
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
               <div class=\\"fd-calendar__text-wrapper\\">
-                <span class=\\"fd-calendar__text\\">T</span>
+                <span class=\\"fd-calendar__text\\">Thu</span>
               </div>
             </th>
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
               <div class=\\"fd-calendar__text-wrapper\\">
-                <span class=\\"fd-calendar__text\\">F</span>
+                <span class=\\"fd-calendar__text\\">Fri</span>
               </div>
             </th>
             <th class=\\"fd-calendar__item fd-calendar__item--side-helper\\">
               <div class=\\"fd-calendar__text-wrapper\\">
-                <span class=\\"fd-calendar__text\\">S</span>
+                <span class=\\"fd-calendar__text\\">Sat</span>
               </div>
             </th>
           </tr>