diff --git a/packages/styles/src/calendar.scss b/packages/styles/src/calendar.scss
index 99cce6d6d0..8802eb0150 100644
--- a/packages/styles/src/calendar.scss
+++ b/packages/styles/src/calendar.scss
@@ -145,7 +145,6 @@ $fd-calendar-special-days: (
 
   overflow: hidden;
   position: relative;
-  height: var(--fdCalendar_Item_Height);
   margin: var(--fdCalendar_Item_Spacing);
   min-width: var(--fdCalendar_Item_Width);
   border-radius: var(--fdCalendar_Border_Radius);
@@ -247,6 +246,8 @@ $fd-calendar-special-days: (
   &__item {
     @extend %fd-calendar-item;
 
+    height: var(--fdCalendar_Item_Height);
+
     @include fd-hover() {
       --fdCalendar_Item_Background: var(--sapList_Hover_Background);
     }
@@ -370,7 +371,6 @@ $fd-calendar-special-days: (
 
     &-button {
       min-width: 100%;
-      min-height: 100%;
       padding: 0;
     }
 
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
index 9bc45ff35a..e7a385d39c 100644
--- a/packages/styles/src/theming/sap_horizon.scss
+++ b/packages/styles/src/theming/sap_horizon.scss
@@ -126,7 +126,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
index 2bcfbda93d..ddd37312f3 100644
--- a/packages/styles/src/theming/sap_horizon_dark.scss
+++ b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -135,7 +135,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
index 287029e403..c12f1dbc7a 100644
--- a/packages/styles/src/theming/sap_horizon_hcb.scss
+++ b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -125,7 +125,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
index 5d83d0c95a..f7ce0e2d29 100644
--- a/packages/styles/src/theming/sap_horizon_hcw.scss
+++ b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -126,7 +126,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/stories/Components/calendar/cal.html b/packages/styles/stories/Components/calendar/cal.html
index 179fe91fc9..91cb9754c3 100644
--- a/packages/styles/stories/Components/calendar/cal.html
+++ b/packages/styles/stories/Components/calendar/cal.html
@@ -494,30 +494,30 @@
         <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>
\ No newline at end of file
+</section>
diff --git a/packages/styles/stories/Components/calendar/days.example.html b/packages/styles/stories/Components/calendar/days.example.html
index 911f7c5a01..e3042911ef 100644
--- a/packages/styles/stories/Components/calendar/days.example.html
+++ b/packages/styles/stories/Components/calendar/days.example.html
@@ -24,37 +24,37 @@
                     <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>
@@ -300,37 +300,37 @@
                 <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>
diff --git a/packages/styles/stories/Patterns/datepicker/mobile-landscape.example.html b/packages/styles/stories/Patterns/datepicker/mobile-landscape.example.html
index aa74019207..c9c5fe27c7 100644
--- a/packages/styles/stories/Patterns/datepicker/mobile-landscape.example.html
+++ b/packages/styles/stories/Patterns/datepicker/mobile-landscape.example.html
@@ -45,37 +45,37 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-2">
               <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>
diff --git a/packages/styles/stories/Patterns/datepicker/mobile-portrait.example.html b/packages/styles/stories/Patterns/datepicker/mobile-portrait.example.html
index 706e88c455..bc2e80f1d5 100644
--- a/packages/styles/stories/Patterns/datepicker/mobile-portrait.example.html
+++ b/packages/styles/stories/Patterns/datepicker/mobile-portrait.example.html
@@ -51,37 +51,37 @@ <h3 class="fd-title fd-title--h5">
               <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>
diff --git a/packages/styles/stories/Patterns/datepicker/today-navigation-button.example.html b/packages/styles/stories/Patterns/datepicker/today-navigation-button.example.html
index 7d0170e8d8..d433a43cb0 100644
--- a/packages/styles/stories/Patterns/datepicker/today-navigation-button.example.html
+++ b/packages/styles/stories/Patterns/datepicker/today-navigation-button.example.html
@@ -64,37 +64,37 @@
                 <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>
diff --git a/packages/styles/stories/Patterns/datepicker/today-selection-button.example.html b/packages/styles/stories/Patterns/datepicker/today-selection-button.example.html
index 99309710aa..35e842a649 100644
--- a/packages/styles/stories/Patterns/datepicker/today-selection-button.example.html
+++ b/packages/styles/stories/Patterns/datepicker/today-selection-button.example.html
@@ -51,37 +51,37 @@
             <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>
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>
diff --git a/packages/theming-preview/src/calendar.html b/packages/theming-preview/src/calendar.html
index 61bf7fbf3a..bc813cb48b 100644
--- a/packages/theming-preview/src/calendar.html
+++ b/packages/theming-preview/src/calendar.html
@@ -55,37 +55,37 @@ <h4 class="fd-panel__title">Calendar</h4>
                                     <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>
@@ -404,9 +404,9 @@ <h4 class="fd-panel__title">Calendar</h4>
                         </div>
                     </section>
                 </div>
-                    
-                &nbsp &nbsp         
-    
+
+                &nbsp &nbsp
+
                 <div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;">
                     <section class="fd-calendar" style="margin-bottom: 1rem;">
                         <header class="fd-calendar__navigation">
@@ -541,5 +541,5 @@ <h4 class="fd-panel__title">Calendar</h4>
                 </div>
             </div>
         </div>
-    </div>    
+    </div>
 </body>