diff --git a/packages/theming-preview/src/button.html b/packages/theming-preview/src/button.html
index e8c5020a93..db6d1b5171 100644
--- a/packages/theming-preview/src/button.html
+++ b/packages/theming-preview/src/button.html
@@ -19,7 +19,7 @@
     <script src="theme-manager.js"></script>
 </head>
 <body>
-    <div class="fd-theming">
+    <div class="fd-theming is-cozy">
         <div class="fd-panel fd-panel--fixed">
             <div class="fd-panel__header">
                 <h4 class="fd-panel__title">Button</h4>
@@ -217,28 +217,28 @@ <h4 class="fd-panel__title">Segmented Button</h4>
             <div class="fd-panel__content fd-theming__flex">
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-segmented-button" role="group" aria-label="Group label">
-                        <button aria-label="Survey" class="fd-button"><i class="sap-icon--survey"></i></button>
+                        <button aria-label="Survey" class="fd-button" aria-pressed="false"><i class="sap-icon--survey"></i></button>
                         <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true"><i class="sap-icon--pie-chart"></i></button>
-                        <button aria-label="Pool" class="fd-button"><i class="sap-icon--pool"></i></button>
+                        <button aria-label="Pool" class="fd-button" aria-pressed="false"><i class="sap-icon--pool"></i></button>
                     </div>
                     <br>
                     <div class="fd-segmented-button" role="group" aria-label="Group label">
-                        <button aria-label="Survey" class="fd-button" disabled><i class="sap-icon--survey"></i></button>
+                        <button aria-label="Survey" class="fd-button" aria-pressed="false" disabled><i class="sap-icon--survey"></i></button>
                         <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true" disabled><i class="sap-icon--pie-chart"></i></button>
-                        <button aria-label="Pool" class="fd-button" disabled><i class="sap-icon--pool"></i></button>
+                        <button aria-label="Pool" class="fd-button" aria-pressed="false" disabled><i class="sap-icon--pool"></i></button>
                     </div>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-segmented-button" role="group" aria-label="Group label">
                         <button class="fd-button is-selected" aria-pressed="true">Left</button>
-                        <button class="fd-button">Middle</button>
-                        <button class="fd-button">Right</button>
+                        <button class="fd-button" aria-pressed="false">Middle</button>
+                        <button class="fd-button" aria-pressed="false">Right</button>
                     </div>
                     <br>
                     <div class="fd-segmented-button" role="group" aria-label="Group label">
                         <button class="fd-button is-selected" aria-pressed="true" disabled>Left</button>
-                        <button class="fd-button" disabled>Middle</button>
-                        <button class="fd-button" disabled>Right</button>
+                        <button class="fd-button" aria-pressed="false" disabled>Middle</button>
+                        <button class="fd-button" aria-pressed="false" disabled>Right</button>
                     </div>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column">
@@ -247,11 +247,11 @@ <h4 class="fd-panel__title">Segmented Button</h4>
                             <i class="sap-icon--employee-approvals"></i>
                             <span class="fd-button__text">Approve</span>
                         </button>
-                        <button class="fd-button">
+                        <button class="fd-button" aria-pressed="false">
                             <i class="sap-icon--employee-rejections"></i>
                             <span class="fd-button__text">Reject</span>
                         </button>
-                        <button class="fd-button">
+                        <button class="fd-button" aria-pressed="false">
                             <i class="sap-icon--employee-lookup"></i>
                             <span class="fd-button__text">Lookup</span>
                         </button>
@@ -262,11 +262,11 @@ <h4 class="fd-panel__title">Segmented Button</h4>
                             <i class="sap-icon--employee-approvals"></i>
                             <span class="fd-button__text">Approve</span>
                         </button>
-                        <button class="fd-button" disabled>
+                        <button class="fd-button" aria-pressed="false" disabled>
                             <i class="sap-icon--employee-rejections"></i>
                             <span class="fd-button__text">Reject</span>
                         </button>
-                        <button class="fd-button" disabled>
+                        <button class="fd-button" aria-pressed="false" disabled>
                             <i class="sap-icon--employee-lookup"></i>
                             <span class="fd-button__text">Lookup</span>
                         </button>
@@ -290,18 +290,6 @@ <h4 class="fd-panel__title">Menu Button</h4>
                         <span class="fd-button__text">Default</span>
                         <i class="sap-icon--slim-arrow-down"></i>
                     </button>
-                    <br>
-                    <button class="fd-button fd-button--menu">
-                        <i class="sap-icon--thumb-up"></i>
-                        <span class="fd-button__text">Default</span>
-                        <i class="sap-icon--slim-arrow-down"></i>
-                    </button>
-                    <br>
-                    <button class="fd-button fd-button--menu" disabled>
-                        <i class="sap-icon--thumb-up"></i>
-                        <span class="fd-button__text">Default</span>
-                        <i class="sap-icon--slim-arrow-down"></i>
-                    </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
@@ -321,69 +309,151 @@ <h4 class="fd-panel__title">Menu Button</h4>
                             <i class="sap-icon--slim-arrow-down"></i>
                         </button>
                     </div>
+                </div>
+                <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
+                    <button class="fd-button fd-button--attention fd-button--menu">
+                        <span class="fd-button__text">Attention</span>
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </button>
                     <br>
+                    <button class="fd-button fd-button--attention fd-button--menu" disabled>
+                        <span class="fd-button__text">Attention</span>
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </button>
+                </div>
+                <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button" aria-label="button">
-                            <i class="sap-icon--thumb-up"></i>
-                            <span class="fd-button-split__text">Split Default</span>
+                        <button class="fd-button fd-button--attention" aria-label="button">
+                            <span class="fd-button__text">Split Attention</span>
                         </button>
-                        <button class="fd-button" aria-controls="t4c0o273">
+                        <button class="fd-button fd-button--attention" aria-controls="t4c0o273">
                             <i class="sap-icon--slim-arrow-down"></i>
                         </button>
                     </div>
                     <br>
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button" aria-label="button" disabled>
-                            <i class="sap-icon--thumb-up"></i>
-                            <span class="fd-button-split__text">Split Default</span>
+                        <button class="fd-button fd-button--attention" aria-label="button" disabled>
+                            <span class="fd-button__text">Split Attention</span>
                         </button>
-                        <button class="fd-button" aria-controls="t4c0o273" disabled>
+                        <button class="fd-button fd-button--attention" aria-controls="t4c0o273" disabled>
                             <i class="sap-icon--slim-arrow-down"></i>
                         </button>
                     </div>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--attention fd-button--menu">
-                        <span class="fd-button__text">Attention</span>
+                    <button class="fd-button fd-button--positive fd-button--menu">
+                        <span class="fd-button__text">Accept</span>
                         <i class="sap-icon--slim-arrow-down"></i>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--attention fd-button--menu" disabled>
-                        <span class="fd-button__text">Attention</span>
+                    <button class="fd-button fd-button--positive fd-button--menu" disabled>
+                        <span class="fd-button__text">Accept</span>
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </button>
+                </div>
+                <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
+                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
+                        <button class="fd-button fd-button--positive" aria-label="button">                    
+                        <span class="fd-button__text">Split Accept</span>
+                        </button>
+                        <button class="fd-button fd-button--positive" aria-controls="t4c0o273">
+                            <i class="sap-icon--slim-arrow-down"></i>
+                        </button>
+                        <br>
+                    </div>
+                    <br>
+                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
+                        <button class="fd-button fd-button--positive" aria-label="button" disabled>
+                            <span class="fd-button__text">Split Accept</span>
+                        </button>
+                        <button class="fd-button fd-button--positive" aria-controls="t4c0o273" disabled>
+                            <i class="sap-icon--slim-arrow-down"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
+                    <button class="fd-button fd-button--negative fd-button--menu">
+                        <span class="fd-button__text">Reject</span>
                         <i class="sap-icon--slim-arrow-down"></i>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--attention fd-button--menu">
+                    <button class="fd-button fd-button--negative fd-button--menu" disabled>
+                        <span class="fd-button__text">Reject</span>
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </button>
+                </div>                
+                <div class="fd-theming__flex fd-theming__flex-column">
+                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
+                        <button class="fd-button fd-button--negative" aria-label="button">                    
+                        <span class="fd-button__text">Split Reject</span>
+                        </button>
+                        <button class="fd-button fd-button--negative" aria-controls="t4c0o273">
+                            <i class="sap-icon--slim-arrow-down"></i>
+                        </button>
+                        <br>
+                    </div>
+                    <br>
+                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
+                        <button class="fd-button fd-button--negative" aria-label="button" disabled>
+                            <span class="fd-button__text">Split Reject</span>
+                        </button>
+                        <button class="fd-button fd-button--negative" aria-controls="t4c0o273" disabled>
+                            <i class="sap-icon--slim-arrow-down"></i>
+                        </button>
+                        <br>
+                    </div>
+                    <br>
+                </div>
+            </div>
+            <div class="fd-panel__content fd-theming__flex">
+                <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
+                    <button class="fd-button fd-button--menu">
                         <i class="sap-icon--thumb-up"></i>
-                        <span class="fd-button__text">Attention</span>
+                        <span class="fd-button__text">Default</span>
                         <i class="sap-icon--slim-arrow-down"></i>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--attention fd-button--menu" disabled>
+                    <button class="fd-button fd-button--menu" disabled>
                         <i class="sap-icon--thumb-up"></i>
-                        <span class="fd-button__text">Attention</span>
+                        <span class="fd-button__text">Default</span>
                         <i class="sap-icon--slim-arrow-down"></i>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button fd-button--attention" aria-label="button">
-                            <span class="fd-button__text">Split Attention</span>
+                        <button class="fd-button" aria-label="button">
+                            <i class="sap-icon--thumb-up"></i>
+                            <span class="fd-button-split__text">Split Default</span>
                         </button>
-                        <button class="fd-button fd-button--attention" aria-controls="t4c0o273">
+                        <button class="fd-button" aria-controls="t4c0o273">
                             <i class="sap-icon--slim-arrow-down"></i>
                         </button>
                     </div>
                     <br>
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button fd-button--attention" aria-label="button" disabled>
-                            <span class="fd-button__text">Split Attention</span>
+                        <button class="fd-button" aria-label="button" disabled>
+                            <i class="sap-icon--thumb-up"></i>
+                            <span class="fd-button-split__text">Split Default</span>
                         </button>
-                        <button class="fd-button fd-button--attention" aria-controls="t4c0o273" disabled>
+                        <button class="fd-button" aria-controls="t4c0o273" disabled>
                             <i class="sap-icon--slim-arrow-down"></i>
                         </button>
                     </div>
+                </div>
+                <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
+                    <button class="fd-button fd-button--attention fd-button--menu">
+                        <i class="sap-icon--thumb-up"></i>
+                        <span class="fd-button__text">Attention</span>
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </button>
                     <br>
+                    <button class="fd-button fd-button--attention fd-button--menu" disabled>
+                        <i class="sap-icon--thumb-up"></i>
+                        <span class="fd-button__text">Attention</span>
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </button>
+                </div>
+                <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
                         <button class="fd-button fd-button--attention" aria-label="button">
                             <i class="sap-icon--thumb-up"></i>
@@ -405,16 +475,6 @@ <h4 class="fd-panel__title">Menu Button</h4>
                     </div>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--positive fd-button--menu">
-                        <span class="fd-button__text">Accept</span>
-                        <i class="sap-icon--slim-arrow-down"></i>
-                    </button>
-                    <br>
-                    <button class="fd-button fd-button--positive fd-button--menu" disabled>
-                        <span class="fd-button__text">Accept</span>
-                        <i class="sap-icon--slim-arrow-down"></i>
-                    </button>
-                    <br>
                     <button class="fd-button fd-button--positive fd-button--menu">
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Accept</span>
@@ -428,26 +488,6 @@ <h4 class="fd-panel__title">Menu Button</h4>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button fd-button--positive" aria-label="button">                    
-                        <span class="fd-button__text">Split Accept</span>
-                        </button>
-                        <button class="fd-button fd-button--positive" aria-controls="t4c0o273">
-                            <i class="sap-icon--slim-arrow-down"></i>
-                        </button>
-                        <br>
-                    </div>
-                    <br>
-                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button fd-button--positive" aria-label="button" disabled>
-                            <span class="fd-button__text">Split Accept</span>
-                        </button>
-                        <button class="fd-button fd-button--positive" aria-controls="t4c0o273" disabled>
-                            <i class="sap-icon--slim-arrow-down"></i>
-                        </button>
-                        <br>
-                    </div>
-                    <br>
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
                         <button class="fd-button fd-button--positive" aria-label="button">
                             <i class="sap-icon--thumb-up"></i>
@@ -471,16 +511,6 @@ <h4 class="fd-panel__title">Menu Button</h4>
                     </div>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--negative fd-button--menu">
-                        <span class="fd-button__text">Reject</span>
-                        <i class="sap-icon--slim-arrow-down"></i>
-                    </button>
-                    <br>
-                    <button class="fd-button fd-button--negative fd-button--menu" disabled>
-                        <span class="fd-button__text">Reject</span>
-                        <i class="sap-icon--slim-arrow-down"></i>
-                    </button>
-                    <br>
                     <button class="fd-button fd-button--negative fd-button--menu">
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Reject</span>
@@ -494,26 +524,6 @@ <h4 class="fd-panel__title">Menu Button</h4>
                     </button>
                 </div>                
                 <div class="fd-theming__flex fd-theming__flex-column">
-                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button fd-button--negative" aria-label="button">                    
-                        <span class="fd-button__text">Split Reject</span>
-                        </button>
-                        <button class="fd-button fd-button--negative" aria-controls="t4c0o273">
-                            <i class="sap-icon--slim-arrow-down"></i>
-                        </button>
-                        <br>
-                    </div>
-                    <br>
-                    <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-                        <button class="fd-button fd-button--negative" aria-label="button" disabled>
-                            <span class="fd-button__text">Split Reject</span>
-                        </button>
-                        <button class="fd-button fd-button--negative" aria-controls="t4c0o273" disabled>
-                            <i class="sap-icon--slim-arrow-down"></i>
-                        </button>
-                        <br>
-                    </div>
-                    <br>
                     <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
                         <button class="fd-button fd-button--negative" aria-label="button">
                             <i class="sap-icon--thumb-up"></i>
@@ -545,118 +555,118 @@ <h4 class="fd-panel__title">Toggle Button</h4>
             </div>
             <div class="fd-panel__content fd-theming__flex">
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button">Unpressed</button>
+                    <button class="fd-button" aria-pressed="false">Unpressed</button>
                     <br>
-                    <button class="fd-button" disabled>Unpressed</button>
+                    <button class="fd-button" aria-pressed="false" disabled>Unpressed</button>
                     <br>
-                    <button class="fd-button">
+                    <button class="fd-button" aria-pressed="false">
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text">Unpressed</span>
                     </button>
                     <br>
-                    <button class="fd-button" disabled>
+                    <button class="fd-button" aria-pressed="false" disabled>
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text">Unpressed</span>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--toggled">Pressed</button>
+                    <button class="fd-button fd-button--toggled" aria-pressed="true">Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--toggled" disabled>Pressed</button>
+                    <button class="fd-button fd-button--toggled" aria-pressed="true" disabled>Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--toggled">
+                    <button class="fd-button fd-button--toggled" aria-pressed="true">
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text">Pressed</span>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--toggled" disabled>
+                    <button class="fd-button fd-button--toggled" aria-pressed="true" disabled>
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text">Pressed</span>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--attention">Attention Unpressed</button>
+                    <button class="fd-button fd-button--attention" aria-pressed="false">Attention Unpressed</button>
                     <br>
-                    <button class="fd-button fd-button--attention" disabled> Attention Unpressed</button>
+                    <button class="fd-button fd-button--attention" aria-pressed="false" disabled> Attention Unpressed</button>
                     <br>
-                    <button class="fd-button fd-button--attention">
+                    <button class="fd-button fd-button--attention" aria-pressed="false">
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text"> Attention Unpressed</span>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--attention" disabled>
+                    <button class="fd-button fd-button--attention" aria-pressed="false" disabled>
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text">Attention Unpressed</span>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--attention fd-button--toggled">Attention Pressed</button>
+                    <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true">Attention Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--attention fd-button--toggled" disabled>Attention Pressed</button>
+                    <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true" disabled>Attention Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--attention fd-button--toggled">
+                    <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true">
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text">Attention Pressed</span>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--attention fd-button--toggled" disabled>
+                    <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true" disabled>
                         <i class="sap-icon--home"></i>
                         <span class="fd-button__text">Attention Pressed</span>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--positive">Accept Unpressed</button>
+                    <button class="fd-button fd-button--positive" aria-pressed="false">Accept Unpressed</button>
                     <br>
-                    <button class="fd-button fd-button--positive" disabled>Accept Unpressed</button>
+                    <button class="fd-button fd-button--positive" aria-pressed="false" disabled>Accept Unpressed</button>
                     <br>
-                    <button class="fd-button fd-button--positive">
+                    <button class="fd-button fd-button--positive" aria-pressed="false">
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Accept Unpressed</span>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--positive" disabled>
+                    <button class="fd-button fd-button--positive" aria-pressed="false" disabled>
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Accept Unpressed</span>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--positive fd-button--toggled">Accept Pressed</button>
+                    <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true">Accept Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--positive fd-button--toggled" disabled>Accept Pressed</button>
+                    <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true" disabled>Accept Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--positive fd-button--toggled">
+                    <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true">
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Accept Unpressed</span>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--positive fd-button--toggled" disabled>
+                    <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true" disabled>
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Accept Unpressed</span>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
-                    <button class="fd-button fd-button--negative">Reject Unpressed</button>
+                    <button class="fd-button fd-button--negative" aria-pressed="false">Reject Unpressed</button>
                     <br>
-                    <button class="fd-button fd-button--negative" disabled>Reject Unpressed</button>
+                    <button class="fd-button fd-button--negative" aria-pressed="false" disabled>Reject Unpressed</button>
                     <br>
-                    <button class="fd-button fd-button--negative">
+                    <button class="fd-button fd-button--negative" aria-pressed="false">
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Reject Unpressed</span>
                     </button>
                     <br>
-                    <button class="fd-button fd-button--negative" disabled>
+                    <button class="fd-button fd-button--negative" aria-pressed="false" disabled>
                         <i class="sap-icon--thumb-up"></i>
                         <span class="fd-button__text">Reject Unpressed</span>
                     </button>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column">
-                    <button class="fd-button fd-button--negative fd-button--toggled">Reject Pressed</button>
+                    <button class="fd-button fd-button--negative fd-button--toggled" aria-pressed="true">Reject Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--negative fd-button--toggled" disabled>Reject Pressed</button>
+                    <button class="fd-button fd-button--negative fd-button--toggled" aria-pressed="true" disabled>Reject Pressed</button>
                     <br>
-                    <button class="fd-button fd-button--negative fd-button--toggled">
+                    <button class="fd-button fd-button--negative fd-button--toggled" aria-pressed="true">
                         <i class="sap-icon--thumb-up"></i>
-                        <span class="fd-button__text">Reject Pressed</span>
+                        <span class="fd-button__text" aria-pressed="true">Reject Pressed</span>
                     </button>
                     <br>
                     <button class="fd-button fd-button--negative fd-button--toggled" disabled>
diff --git a/packages/theming-preview/src/calendar.html b/packages/theming-preview/src/calendar.html
index 14bc8e8b5f..61bf7fbf3a 100644
--- a/packages/theming-preview/src/calendar.html
+++ b/packages/theming-preview/src/calendar.html
@@ -309,7 +309,7 @@ <h4 class="fd-panel__title">Calendar</h4>
                     </section>
                 </div>
                 &nbsp &nbsp
-    
+
                 <div style="display: flex; justify-content: space-around;">
                     <section class="fd-calendar">
                         <header class="fd-calendar__navigation">
@@ -318,9 +318,6 @@ <h4 class="fd-panel__title">Calendar</h4>
                                     <i class="sap-icon--slim-arrow-left"></i>
                                 </button>
                             </div>
-                            <div class="fd-calendar__action">
-                                <button type="button" class="fd-button fd-button--transparent">January</button>
-                            </div>
                             <div class="fd-calendar__action">
                                 <button type="button" class="fd-button fd-button--transparent">2018</button>
                             </div>
@@ -333,47 +330,71 @@ <h4 class="fd-panel__title">Calendar</h4>
                         <table class="fd-calendar__content fd-calendar__content--months" id="1jjVw927" role="grid">
                             <tbody class="fd-calendar__group">
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item fd-calendar__item--current">
-                                        <span class="fd-calendar__text" role="button">January</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">January</span>
+                                        </button>
                                     </td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">February</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">February</span>
+                                        </button>
                                     </td>
-                                    <td aria-selected="true" role="gridcell" class="fd-calendar__item is-active">
-                                        <span class="fd-calendar__text" role="button">March</span>
+                                    <td aria-selected="true" role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-button--toggled fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">March</span>
+                                        </button>
                                     </td>
                                 </tr>
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">April</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">April</span>
+                                        </button>
                                     </td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">May</span>
+                                        <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">May</span>
+                                        </button>
                                     </td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">June</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">June</span>
+                                        </button>
                                     </td>
                                 </tr>
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">July</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">July</span>
+                                        </button>
                                     </td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">August</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">August</span>
+                                        </button>
                                     </td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">September</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">September</span>
+                                        </button>
                                     </td>
                                 </tr>
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">October</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">October</span>
+                                        </button>
                                     </td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">November</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">November</span>
+                                        </button>
                                     </td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">December</span>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">December</span>
+                                        </button>
                                     </td>
                                 </tr>
                             </tbody>
@@ -383,6 +404,7 @@ <h4 class="fd-panel__title">Calendar</h4>
                         </div>
                     </section>
                 </div>
+                    
                 &nbsp &nbsp         
     
                 <div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;">
@@ -394,10 +416,7 @@ <h4 class="fd-panel__title">Calendar</h4>
                                 </button>
                             </div>
                             <div class="fd-calendar__action">
-                                <button type="button" class="fd-button fd-button--transparent">January</button>
-                            </div>
-                            <div class="fd-calendar__action">
-                                <button type="button" class="fd-button fd-button--transparent">2018</button>
+                                <button type="button" class="fd-button fd-button--transparent">2018 - 2037</button>
                             </div>
                             <div class="fd-calendar__action fd-calendar__action--arrow-right">
                                 <button type="button" class="fd-button fd-button--transparent" aria-label="Next">
@@ -408,52 +427,112 @@ <h4 class="fd-panel__title">Calendar</h4>
                         <table class="fd-calendar__content fd-calendar__content--years " id="57YUZ521" role="grid">
                             <tbody class="fd-calendar__group">
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item fd-calendar__item--current">
-                                        <span class="fd-calendar__text" role="button">2018</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2019</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2020</span></td>
-                                    <td role="gridcell" class="fd-calendar__item is-selected">
-                                        <span class="fd-calendar__text" role="button">2021</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2022</span></td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2018</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2019</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2020</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item is-selected">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2021</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2022</span>
+                                        </button>
+                                    </td>
                                 </tr>
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2023</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2024</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2025</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2026</span></td>
-                                    <td aria-selected="true" role="gridcell" class="fd-calendar__item is-active">
-                                        <span class="fd-calendar__text" role="button">2027</span></td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2023</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2024</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2025</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2026</span>
+                                        </button>
+                                    </td>
+                                    <td aria-selected="true" role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button is-active" type="button">
+                                            <span class="fd-calendar__text">2027</span>
+                                        </button>
+                                    </td>
                                 </tr>
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2028</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2029</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2030</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2031</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2032</span></td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2028</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2029</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2030</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2031</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2032</span>
+                                        </button>
+                                    </td>
                                 </tr>
                                 <tr class="fd-calendar__row">
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2033</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2034</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2035</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2036</span></td>
-                                    <td role="gridcell" class="fd-calendar__item">
-                                        <span class="fd-calendar__text" role="button">2037</span></td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2033</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2034</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2035</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2036</span>
+                                        </button>
+                                    </td>
+                                    <td role="gridcell" class="fd-calendar__my-item">
+                                        <button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
+                                            <span class="fd-calendar__text">2037</span>
+                                        </button>
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>
diff --git a/packages/theming-preview/src/form.html b/packages/theming-preview/src/form.html
index d0c5303d61..e339203159 100644
--- a/packages/theming-preview/src/form.html
+++ b/packages/theming-preview/src/form.html
@@ -27,19 +27,19 @@ <h4 class="fd-panel__title">Read-Only Form</h4>
             <div class="fd-panel__content fd-theming__flex" style="width: 1000px;">
                 <div class="fd-container fd-form-layout-grid-container">
                     <div class="fd-row">
-                        <div class="fd-col fd-col--4">
-                        <label class="fd-form-label" for="input-13-compact">Name: </label>
+                        <div class="fd-col fd-col-md--4">
+                        <label class="fd-form-label" for="input-13-name">Name: </label>
                         </div>
                         <span>John Smith</span>
                     </div>
                     <div class="fd-row">
-                        <div class="fd-col fd-col--4">
-                        <label class="fd-form-label" for="input-13b-compact">Street/no: </label>
+                        <div class="fd-col fd-col-md--4">
+                        <label class="fd-form-label" for="input-13b-street">Street/no: </label>
                         </div>
                         <span>123 Front St.</span>
                     </div>
                     <div class="fd-row" role="group" aria-labelledby="groupLabel-compact">
-                        <div class="fd-col fd-col--4">
+                        <div class="fd-col fd-col-md--4">
                         <label class="fd-form-label"  id="groupLabel-compact">ZIP Code/City: </label>
                         </div>
                         <span>12345 Montreal</span>
@@ -54,40 +54,40 @@ <h4 class="fd-panel__title">Editable Form</h4>
             </div>
             <div class="fd-panel__content fd-theming__flex" style="width: 1000px;">
                 <div class="fd-container fd-form-layout-grid-container">
-                    <div class="fd-row">
-                        <div class="fd-col fd-col--4">
-                        <label class="fd-form-label" for="input-13-compact">Name: </label>
+                    <div class="fd-row fd-form-item">
+                        <div class="fd-col fd-col-md--4">
+                        <label class="fd-form-label" for="input-13-name">Name: </label>
                         </div>
-                        <div class="fd-col fd-col--7">
-                            <input class="fd-input fd-input--compact" type="text" id="input-13-compact" placeholder="Name">
+                        <div class="fd-col fd-col-md--7">
+                            <input class="fd-input" type="text" id="input-13-name" placeholder="Name">
                         </div>
                     </div>
-                    <div class="fd-row">
-                        <div class="fd-col fd-col--4">
-                        <label class="fd-form-label" for="input-13b-compact">Street/no: </label>
+                    <div class="fd-row fd-form-item">
+                        <div class="fd-col fd-col-md--4">
+                        <label class="fd-form-label fd-form-label--required" for="input-13b-street">Street/no: </label>
                         </div>
-                        <div class="fd-col fd-col--7">
+                        <div class="fd-col fd-col-md--7">
                             <div class="fd-row">
-                                <div class="fd-col fd-col--6">
-                                    <input class="fd-input fd-input--compact" type="text" id="input1-of-2-compact" aria-label="input1-of-2-compact" placeholder="Street Address">
+                                <div class="fd-col fd-col-md--6">
+                                    <input class="fd-input" type="text" id="input1-of-2-street-address" aria-label="input1-of-2-street-address" placeholder="Street Address">
                                 </div>
-                                <div class="fd-col fd-col--6">
-                                    <input class="fd-input fd-input--compact" type="text" id="input2-of-2-compact" aria-label="input2-of-2-compact" placeholder="Street Number">
+                                <div class="fd-col fd-col-md--6">
+                                    <input class="fd-input" type="text" id="input2-of-2-street-number" aria-label="input2-of-2-street-number" placeholder="Street Number">
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="fd-row" role="group" aria-labelledby="groupLabel-compact">
-                        <div class="fd-col fd-col--4">
-                        <label class="fd-form-label"  id="groupLabel-compact">ZIP Code/City: </label>
+                    <div class="fd-row fd-form-item" role="group" aria-labelledby="groupLabel">
+                        <div class="fd-col fd-col-md--4">
+                        <label class="fd-form-label fd-form-label--required"  id="groupLabel-city">ZIP Code/City: </label>
                         </div>
-                        <div class="fd-col fd-col--7">
+                        <div class="fd-col fd-col-md--7">
                             <div class="fd-row">
-                                <div class="fd-col fd-col--6">
-                                    <input class="fd-input fd-input--compact" type="text" id="input1-of-2-compact" aria-label="input1-of-2-compact" placeholder="Zip Code">
+                                <div class="fd-col fd-col-md--6">
+                                    <input class="fd-input" type="text" id="input1-of-2-zip" aria-label="input1-of-2-zip" placeholder="Zip Code">
                                 </div>
-                                <div class="fd-col fd-col--6">
-                                    <input class="fd-input fd-input--compact" type="text" id="input2-of-2-compact" aria-label="input2-of-2-compact" placeholder="City">
+                                <div class="fd-col fd-col-md--6">
+                                    <input class="fd-input" type="text" id="input2-of-2-city" aria-label="input2-of-2-city" placeholder="City">
                                 </div>
                             </div>
                         </div>
diff --git a/packages/theming-preview/src/header-footer.html b/packages/theming-preview/src/header-footer.html
index 74f12bdcec..70582baebb 100644
--- a/packages/theming-preview/src/header-footer.html
+++ b/packages/theming-preview/src/header-footer.html
@@ -28,17 +28,17 @@ <h4 class="fd-panel__title">Header and Footer</h4>
                 <div class="fd-bar fd-bar--header" style="position: absolute; top: 50px; left: 0; width: 100%;">
                     <div class="fd-bar__left">
                         <div class="fd-bar__element">
-                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
+                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
                                 <i class="sap-icon--navigation-left-arrow"></i>
                             </button>
                         </div>
                         <div class="fd-bar__element">
-                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
+                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
                                 <i class="sap-icon--home"></i>
                             </button>
                         </div>
                         <div class="fd-bar__element">
-                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
+                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
                                 <i class="sap-icon--account"></i>
                             </button>
                         </div>
@@ -46,13 +46,13 @@ <h4 class="fd-panel__title">Header and Footer</h4>
                     <div class="fd-bar__middle">
                         <div class="fd-bar__element">
                             <div class="fd-segmented-button" role="group" aria-label="Group label">
-                                <button aria-label="button" class="fd-button fd-button--compact" aria-pressed="true">
+                                <button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="true">
                                     <i class="sap-icon--email"></i>
                                 </button>
-                                <button aria-label="button" class="fd-button fd-button--compact">
+                                <button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="true">
                                     <i class="sap-icon--iphone"></i>
                                 </button>
-                                <button aria-label="button" class="fd-button fd-button--compact">
+                                <button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="false">
                                     <i class="sap-icon--notification-2"></i>
                                 </button>
                             </div>
@@ -67,7 +67,7 @@ <h4 class="fd-panel__title">Header and Footer</h4>
                             </div>
                         </div>
                         <div class="fd-bar__element">
-                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
+                            <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
                                 <i class="sap-icon--grid"></i>
                             </button>
                         </div>
@@ -95,28 +95,28 @@ <h5 class="fd-title fd-title--h4">Title</h5>
                                 <span>Text</span>
                             </div>
                             <div class="fd-bar__element">
-                                <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">Default</button>
+                                <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">Default</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact" disabled>Default</button>
+                                <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy" disabled>Default</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button class="fd-button fd-button--emphasized fd-button--compact">Emphasized</button>
+                                <button class="fd-button fd-button--emphasized fd-button--cozy">Emphasized</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button class="fd-button fd-button--emphasized fd-button--compact" disabled>Emphasized</button>
+                                <button class="fd-button fd-button--emphasized fd-button--cozy" disabled>Emphasized</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button class="fd-button fd-button--positive fd-button--compact">Accept</button>
+                                <button class="fd-button fd-button--positive fd-button--cozy">Accept</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button class="fd-button fd-button--positive fd-button--compact" disabled>Accept</button>
+                                <button class="fd-button fd-button--positive fd-button--cozy" disabled>Accept</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button class="fd-button fd-button--negative fd-button--compact">Reject</button>
+                                <button class="fd-button fd-button--negative fd-button--cozy">Reject</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button class="fd-button fd-button--negative fd-button--compact" disabled>Reject</button>
+                                <button class="fd-button fd-button--negative fd-button--cozy" disabled>Reject</button>
                             </div>
                         </div>
                     </div>
diff --git a/packages/theming-preview/src/icon.html b/packages/theming-preview/src/icon.html
index 2ae96b4e19..3549f63657 100644
--- a/packages/theming-preview/src/icon.html
+++ b/packages/theming-preview/src/icon.html
@@ -74,15 +74,15 @@ <h4 class="fd-panel__title">Button with Icon</h4>
                 </button>
                 &nbsp; &nbsp;
                 <div class="fd-segmented-button" role="group" aria-label="Group label">
-                    <button aria-label="Survey" class="fd-button"><i class="sap-icon--survey"></i></button>
+                    <button aria-label="Survey" class="fd-button" aria-pressed="false"><i class="sap-icon--survey"></i></button>
                     <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true"><i class="sap-icon--pie-chart"></i></button>
-                    <button aria-label="Pool" class="fd-button"><i class="sap-icon--pool"></i></button>
+                    <button aria-label="Pool" class="fd-button" aria-pressed="false"><i class="sap-icon--pool"></i></button>
                 </div>
                 &nbsp; &nbsp;
                 <div class="fd-segmented-button" role="group" aria-label="Group label">
-                    <button aria-label="Survey" class="fd-button" disabled><i class="sap-icon--survey"></i></button>
+                    <button aria-label="Survey" class="fd-button" disabled aria-pressed="false"><i class="sap-icon--survey"></i></button>
                     <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true" disabled><i class="sap-icon--pie-chart"></i></button>
-                    <button aria-label="Pool" class="fd-button" disabled><i class="sap-icon--pool"></i></button>
+                    <button aria-label="Pool" class="fd-button" disabled aria-pressed="false"><i class="sap-icon--pool"></i></button>
                 </div>
             </div>
         </div>
@@ -132,7 +132,7 @@ <h4 class="fd-panel__title">Rating Indicator</h4>
                         <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
                     </div>
                     <br>
-                    <div class="fd-rating-indicator is-display-mode">
+                    <div class="fd-rating-indicator fd-rating-indicator--display-mode">
                         <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
                             <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-1" name="rating-display-mode" value="1" disabled>  
                             <label class="fd-rating-indicator__label" for="rating-display-mode-1"></label>
diff --git a/packages/theming-preview/src/input.html b/packages/theming-preview/src/input.html
index 0ff0e94c89..af63447599 100644
--- a/packages/theming-preview/src/input.html
+++ b/packages/theming-preview/src/input.html
@@ -56,7 +56,7 @@ <h4 class="fd-panel__title">Input</h4>
             <div class="fd-panel__header">
                 <h4 class="fd-panel__title">Multi-Input</h4>
             </div>
-            <div class="fd-panel__content fd-theming__flex" style="height: 300px; overflow-x: hidden;">
+            <div class="fd-panel__content fd-theming__flex" style="overflow-x: hidden;">
                 <!-- column 1 -->
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-popover" style="display:flex;flex-direction:column">
@@ -903,248 +903,328 @@ <h4 class="fd-panel__title">Checkbox</h4>
                     <input type="checkbox" class="fd-checkbox" id="1">
                     <label class="fd-checkbox__label" for="1">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Enabled</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Enabled</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information" id="2">
                     <label class="fd-checkbox__label" for="2">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success" id="3">
                     <label class="fd-checkbox__label" for="3">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning" id="4">
                     <label class="fd-checkbox__label" for="4">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error" id="5">
                     <label class="fd-checkbox__label" for="5">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="checkbox" class="fd-checkbox" id="6" checked>
                     <label class="fd-checkbox__label" for="6">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Enabled</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Enabled</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information" id="7" checked>
                     <label class="fd-checkbox__label" for="7">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success" id="8" checked>
                     <label class="fd-checkbox__label" for="8">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning" id="9" checked>
                     <label class="fd-checkbox__label" for="9">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error" id="10" checked>
                     <label class="fd-checkbox__label" for="10">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="checkbox" class="fd-checkbox tristate" id="tristate1" checked>
                     <label class="fd-checkbox__label" for="tristate1">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Enabled</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Enabled</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information tristate" id="tristate2" checked>
                     <label class="fd-checkbox__label" for="tristate2">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success tristate" id="tristate3" checked>
                     <label class="fd-checkbox__label" for="tristate3">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning tristate" id="tristate4" checked>
                     <label class="fd-checkbox__label" for="tristate4">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error tristate" id="tristate5" checked>
                     <label class="fd-checkbox__label" for="tristate5">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                             <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="checkbox" class="fd-checkbox" id="16" disabled>
                     <label class="fd-checkbox__label" for="16">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Disabled</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Disabled</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information" id="17" disabled>
                     <label class="fd-checkbox__label" for="17">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success" id="18" disabled>
                     <label class="fd-checkbox__label" for="18">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning" id="19" disabled>
                     <label class="fd-checkbox__label" for="19">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error" id="20" disabled>
                     <label class="fd-checkbox__label" for="20">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="checkbox" class="fd-checkbox" id="21" checked disabled>
                     <label class="fd-checkbox__label" for="16">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Disabled</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Disabled</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information" id="22" checked disabled>
                     <label class="fd-checkbox__label" for="17">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success" id="23" checked disabled>
                     <label class="fd-checkbox__label" for="18">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div> 
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning" id="24" checked disabled>
                     <label class="fd-checkbox__label" for="19">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error" id="25" checked disabled>
                     <label class="fd-checkbox__label" for="20">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="checkbox" class="fd-checkbox tristate" id="tristate6" checked disabled>
                     <label class="fd-checkbox__label" for="tristate6">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Disabled</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Disabled</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information tristate" id="tristate7" checked disabled>
                     <label class="fd-checkbox__label" for="tristate7">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>        
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success tristate" id="tristate8" checked disabled>
                     <label class="fd-checkbox__label" for="tristate8">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning tristate" id="tristate9" checked disabled>
                     <label class="fd-checkbox__label" for="tristate9">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error tristate" id="tristate10" checked disabled>
                     <label class="fd-checkbox__label" for="tristate10">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="checkbox" class="fd-checkbox" id="31" readonly>
                     <label class="fd-checkbox__label" for="16">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Read-Only</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Read-Only</span>
+                        </div> 
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information" id="32" readonly>
                     <label class="fd-checkbox__label" for="17">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success" id="33" readonly>
                     <label class="fd-checkbox__label" for="18">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning" id="34" readonly>
                     <label class="fd-checkbox__label" for="19">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error" id="35" readonly>
                     <label class="fd-checkbox__label" for="20">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column">
                     <input type="checkbox" class="fd-checkbox" id="31" readonly checked>
                     <label class="fd-checkbox__label" for="16">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Read-Only</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Read-Only</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-information" id="32" readonly checked>
                     <label class="fd-checkbox__label" for="17">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Information</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Information</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-success" id="33" readonly checked>
                     <label class="fd-checkbox__label" for="18">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Success</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Success</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-warning" id="34" readonly checked>
                     <label class="fd-checkbox__label" for="19">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Warning</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Warning</span>
+                        </div>
                     </label>
     
                     <input type="checkbox" class="fd-checkbox is-error" id="35" readonly checked>
                     <label class="fd-checkbox__label" for="20">
                         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
-                        <span class="fd-checkbox__text">Error</span>
+                        <div class="fd-checkbox__label-container">
+                            <span class="fd-checkbox__text">Error</span>
+                        </div>
                     </label>
                 </div>
             </div>
@@ -1158,89 +1238,89 @@ <h4 class="fd-panel__title">Radio</h4>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="radio" class="fd-radio" id="iSpDidh761" name="radio5">
                     <label class="fd-radio__label" for="iSpDidh761">
-                        Enabled
+                        <span class="fd-radio__text">Enabled</span>
                     </label>
                     <input type="radio" class="fd-radio is-success" id="iSpDidh7612" name="radio5">
                     <label class="fd-radio__label" for="iSpDidh7612">
-                        Success
+                        <span class="fd-radio__text">Success</span>
                     </label>
                     <input type="radio" class="fd-radio is-error" id="iSpDidh7613" name="radio5">
                     <label class="fd-radio__label" for="iSpDidh7613">
-                        Error
+                        <span class="fd-radio__text">Error</span>
                     </label>
                     <input type="radio" class="fd-radio is-warning" id="iSpDidh7614" name="radio5">
                     <label class="fd-radio__label" for="iSpDidh7614">
-                        Warning
+                        <span class="fd-radio__text">Warning</span>
                     </label>
                     <input type="radio" class="fd-radio is-information" id="iSpDidh7615" name="radio5">
                     <label class="fd-radio__label" for="iSpDidh7615">
-                        Information
+                        <span class="fd-radio__text">Information</span>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="radio" class="fd-radio" id="checked1" name="checked1" checked>
                     <label class="fd-radio__label" for="checked1">
-                        Enabled
+                        <span class="fd-radio__text">Enabled</span>
                     </label>
                     <input type="radio" class="fd-radio is-success" id="checked2" name="checked2" checked>
                     <label class="fd-radio__label" for="checked2">
-                        Success
+                        <span class="fd-radio__text">Success</span>
                     </label>
                     <input type="radio" class="fd-radio is-error" id="checked3" name="checked3" checked>
                     <label class="fd-radio__label" for="checked3">
-                        Error
+                        <span class="fd-radio__text">Error</span>
                     </label>
                     <input type="radio" class="fd-radio is-warning" id="checked4" name="checked4" checked>
                     <label class="fd-radio__label" for="checked4">
-                        Warning
+                        <span class="fd-radio__text">Warning</span>
                     </label>
                     <input type="radio" class="fd-radio is-information" id="checked5" name="checked5" checked>
                     <label class="fd-radio__label" for="checked5">
-                        Information
+                        <span class="fd-radio__text">Information</span>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="radio" class="fd-radio" id="iSpDidh761" name="radio5" disabled>
                     <label class="fd-radio__label" for="iSpDidh761">
-                        Disabled
+                        <span class="fd-radio__text">Disabled</span>
                     </label>
                     <input type="radio" class="fd-radio is-success" id="iSpDidh7612" name="radio5" disabled>
                     <label class="fd-radio__label" for="iSpDidh7612">
-                        Success
+                        <span class="fd-radio__text">Success</span>
                     </label>
                     <input type="radio" class="fd-radio is-error" id="iSpDidh7613" name="radio5" disabled>
                     <label class="fd-radio__label" for="iSpDidh7613">
-                        Error
+                        <span class="fd-radio__text">Error</span>
                     </label>
                     <input type="radio" class="fd-radio is-warning" id="iSpDidh7614" name="radio5" disabled>
                     <label class="fd-radio__label" for="iSpDidh7614">
-                        Warning
+                        <span class="fd-radio__text">Warning</span>
                     </label>
                     <input type="radio" class="fd-radio is-information" id="iSpDidh7615" name="radio5" disabled>
                     <label class="fd-radio__label" for="iSpDidh7615">
-                        Information
+                        <span class="fd-radio__text">Information</span>
                     </label>
                 </div>
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <input type="radio" class="fd-radio" id="41" name="41" checked disabled>
                     <label class="fd-radio__label" for="41">
-                        Disabled
+                        <span class="fd-radio__text">Disabled</span>
                     </label>
                     <input type="radio" class="fd-radio is-success" id="42" name="42" checked disabled> 
                     <label class="fd-radio__label" for="42">
-                        Success
+                        <span class="fd-radio__text">Success</span>
                     </label>
                     <input type="radio" class="fd-radio is-error" id="43" name="43" checked disabled>
                     <label class="fd-radio__label" for="43">
-                        Error
+                        <span class="fd-radio__text">Error</span>
                     </label>
                     <input type="radio" class="fd-radio is-warning" id="44" name="44" checked disabled>
                     <label class="fd-radio__label" for="44">
-                        Warning
+                        <span class="fd-radio__text">Warning</span>
                     </label>
                     <input type="radio" class="fd-radio is-information" id="45" name="45" checked disabled>
                     <label class="fd-radio__label" for="45">
-                        Information
+                        <span class="fd-radio__text">Information</span>
                     </label>
                 </div>                
             </div>
diff --git a/packages/theming-preview/src/object-header.html b/packages/theming-preview/src/object-header.html
index 383c866a5f..cc760375bf 100644
--- a/packages/theming-preview/src/object-header.html
+++ b/packages/theming-preview/src/object-header.html
@@ -19,7 +19,7 @@
     <script src="theme-manager.js"></script>
 </head>
 <body>
-    <div class="fd-theming">
+    <div class="fd-theming is-cozy">
         <div class="fd-panel fd-panel--fixed">
             <div class="fd-panel__header">
                 <h4 class="fd-panel__title">Object Header</h4>
@@ -79,10 +79,10 @@ <h4 class="fd-panel__title">Object Header</h4>
                     <footer class="fd-bar fd-bar--floating-footer" style="position:relative">
                         <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
                             <div class="fd-bar__element">
-                                <button aria-label="button" class="fd-button fd-button--emphasized fd-button--compact">Save</button>
+                                <button aria-label="button" class="fd-button fd-button--emphasized fd-button--cozy">Save</button>
                             </div>
                             <div class="fd-bar__element">
-                                <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">Cancel</button>
+                                <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">Cancel</button>
                             </div>
                         </div>
                     </footer>
diff --git a/packages/theming-preview/src/panel.html b/packages/theming-preview/src/panel.html
index b1c8af8d68..3b25ed5940 100644
--- a/packages/theming-preview/src/panel.html
+++ b/packages/theming-preview/src/panel.html
@@ -29,7 +29,7 @@ <h4 class="fd-panel__title">Panel</h4>
                     <div class="fd-panel__header">
                         <h4 class="fd-panel__title">Panel Header</h4>
                     </div>
-                    <div role="region" aria-labelledby="jhqDKYrt" class="fd-panel__content">
+                    <div role="region" aria-labelledby="__pane-1" class="fd-panel__content">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus 
                         et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. 
                         Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. 
@@ -49,9 +49,9 @@ <h4 class="fd-panel__title">Panel Header</h4>
                                 <i class="sap-icon--slim-arrow-right"></i>
                             </button>
                         </div>
-                        <h4 class="fd-panel__title" id="asdASD123">Panel Header Collapsed</h4>
+                        <h4 class="fd-panel__title" id="__pane-2">Panel Header Collapsed</h4>
                     </div>
-                    <div role="region" aria-labelledby="jhqDKYdf" class="fd-panel__content" aria-hidden="true" id="fghqwe321">
+                    <div role="region" aria-labelledby="__pane-2" class="fd-panel__content" aria-hidden="true" id="fghqwe321">
                         <span>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus 
                             et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. 
@@ -71,9 +71,9 @@ <h4 class="fd-panel__title" id="asdASD123">Panel Header Collapsed</h4>
                                 <i class="sap-icon--slim-arrow-down"></i>
                             </button>
                         </div>
-                        <h4 class="fd-panel__title" id="asdASD1234">Panel Header Expanded</h4>
+                        <h4 class="fd-panel__title" id="__pane-3">Panel Header Expanded</h4>
                     </div>
-                    <div role="region" aria-labelledby="jhqDKYdf" class="fd-panel__content" aria-hidden="false" id="fghqwe3214213">
+                    <div role="region" aria-labelledby="__pane-3" class="fd-panel__content" aria-hidden="false" id="fghqwe3214213">
                         <span>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus 
                             et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. 
@@ -90,16 +90,19 @@ <h4 class="fd-panel__title" id="asdASD1234">Panel Header Expanded</h4>
                 <div class="fd-panel fd-panel--fixed" style="width: 60%;">
                     <div class="fd-panel__header">
                         <h4 class="fd-panel__title">Panel with Header Toolbar</h4>
-                        <div class="fd-toolbar fd-toolbar--cozy">
-                            <button class="fd-button fd-button--transparent" aria-label="Settings">
-                                <i class="sap-icon--settings"></i>
-                            </button>
-                            <button class="fd-button fd-button--transparent" aria-label="Dropdown">
-                                <i class="sap-icon--drop-down-list"></i>
-                            </button>
+                        <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                            <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
+                            <div class="fd-segmented-button" role="group" aria-label="Group label">
+                                <button class="fd-button fd-button--transparent" aria-label="Settings">
+                                    <i class="sap-icon--settings"></i>
+                                </button>
+                                <button class="fd-button fd-button--transparent" aria-label="Dropdown">
+                                    <i class="sap-icon--drop-down-list"></i>
+                                </button>
+                            </div>
                         </div>
                     </div>
-                    <div role="region" aria-labelledby="jhqDKYrt" class="fd-panel__content">
+                    <div role="region" aria-labelledby="__pane-4" class="fd-panel__content">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus 
                         et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. 
                         Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis. 
diff --git a/packages/theming-preview/src/semantic-colors.html b/packages/theming-preview/src/semantic-colors.html
index 6111e5706c..a38e1b7b9a 100644
--- a/packages/theming-preview/src/semantic-colors.html
+++ b/packages/theming-preview/src/semantic-colors.html
@@ -225,42 +225,54 @@ <h4 class="fd-panel__title">Message Strip</h4>
             </div>
             <div class="fd-panel__content fd-theming__flex fd-theming__flex-column">
     
-                <div class="fd-message-strip fd-message-strip--information fd-message-strip--no-icon fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                role="note" aria-live="assertive" id="SsoiW592" aria-labelledby="SsoiW592">
+                <div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible fd-theming__margin-bottom-03" 
+                role="note" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-1">
+                    <div class="fd-message-strip__icon-container" aria-hidden="true" >
+                        <span class="sap-icon sap-icon--message-information" focusable="false" role="presentation" aria-hidden="true"></span>
+                    </div>
                     <p class="fd-message-strip__text">
                         Message of type "Information" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                     </p>
-                    <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW592" aria-label="Close">
+                    <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="message-strip-1" aria-label="Close" title="Close">
                         <i class="sap-icon--decline"></i>
                     </button>
                 </div>
     
-                <div class="fd-message-strip fd-message-strip--success fd-message-strip--no-icon fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                    role="note" aria-live="assertive" id="SsoiW593" aria-labelledby="SsoiW593">
+                <div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible fd-theming__margin-bottom-03" 
+                    role="note" aria-live="assertive" id="SsoiW593" aria-labelledby="message-strip-2">
+                    <div class="fd-message-strip__icon-container" aria-hidden="true">
+                        <span class="sap-icon sap-icon--message-success" focusable="false" role="presentation" aria-hidden="true"></span>
+                    </div>
                     <p class="fd-message-strip__text">
                         Message of type "Success" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                     </p>
-                    <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW593" aria-label="Close">
+                    <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="message-strip-2" aria-label="Close" title="Close">
                         <i class="sap-icon--decline"></i>
                     </button>
                 </div>
     
-                <div class="fd-message-strip fd-message-strip--warning fd-message-strip--no-icon fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                    role="note" aria-live="assertive" id="SsoiW594" aria-labelledby="SsoiW594">
+                <div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible fd-theming__margin-bottom-03" 
+                    role="note" aria-live="assertive" id="SsoiW594" aria-labelledby="message-strip-3">
+                    <div class="fd-message-strip__icon-container" aria-hidden="true">
+                        <span class="sap-icon sap-icon--message-warning" focusable="false" role="presentation" aria-hidden="true"></span>
+                    </div>
                     <p class="fd-message-strip__text">
                         Message of type "Warning" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                     </p>
-                    <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW594" aria-label="Close">
+                    <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="message-strip-3" aria-label="Close" title="Close">
                         <i class="sap-icon--decline"></i>
                     </button>
                 </div>
     
-                <div class="fd-message-strip fd-message-strip--error fd-message-strip--no-icon fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                role="note" aria-live="assertive" id="SsoiW595" aria-labelledby="SsoiW595">
+                <div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible fd-theming__margin-bottom-03" 
+                role="note" aria-live="assertive" id="SsoiW595" aria-labelledby="message-strip-4">
+                    <div class="fd-message-strip__icon-container" aria-hidden="true">
+                        <span class="sap-icon sap-icon--message-error" focusable="false" role="presentation" aria-hidden="true"></span>
+                    </div>    
                     <p class="fd-message-strip__text">
                         Message of type "Error" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                     </p>
-                    <button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="SsoiW595" aria-label="Close">
+                    <button class="fd-button fd-button--transparent is--compact fd-message-strip__close" aria-controls="message-strip-4" aria-label="Close" title="Close">
                         <i class="sap-icon--decline"></i>
                     </button>
                 </div>
diff --git a/packages/theming-preview/src/shell-tile-card.html b/packages/theming-preview/src/shell-tile-card.html
index 77cea56313..7af1a00ffd 100644
--- a/packages/theming-preview/src/shell-tile-card.html
+++ b/packages/theming-preview/src/shell-tile-card.html
@@ -1,101 +1,147 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+    <head>
     <link href="fundamental-styles.css" rel="stylesheet">
-    <style type="text/css">
-        .fd-theming .fd-theming__flex{
-            display: flex;
-        }
-        .fd-theming .fd-theming__flex-column{
-            flex-direction: column;
-        }
-        .fd-theming .fd-theming__margin-right-1{
-            margin-right: 1rem;
-        }
+        <style type="text/css">
+            .fd-theming .fd-theming__flex {
+                display: flex;
+            }
+            .fd-theming .fd-theming__flex-column {
+                flex-direction: column;
+            }
+            .fd-theming .fd-theming__margin-right-1 {
+                margin-right: 1rem;
+            }
         .fd-theming .fd-theming__margin-bottom-03{
             margin-bottom: .3rem;
-        }
-    </style>
-    <script src="theme-manager.js"></script>
-</head>
-<body>
-    <div class="fd-theming">
-        <div class="fd-panel fd-panel--fixed">
-            <div class="fd-panel__header">
-                <h4 class="fd-panel__title">Shell</h4>
-            </div>
-            <div class="fd-panel__content fd-theming__flex">
-                <div style="height:200px; width: 60%;">
-                    <div class="fd-shellbar">
-                        <div class="fd-shellbar__group fd-shellbar__group--product">
-                            <span class="fd-shellbar__logo">
-                                <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP">
-                            </span>
-                            <div class="fd-popover">
-                                <div class="fd-popover__control">
-                                    <button class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu" onclick="onPopoverClick('9GLB26941');" aria-controls="9GLB26941" aria-haspopup="true" aria-expanded="false">
-                                        <span class="fd-shellbar__title">Corporate Portal</span>
-                                        <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
-                                    </button>
-                                </div>
-                                <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="9GLB26941">
-                                    <nav class="fd-menu">
-                                        <ul class="fd-menu__list fd-menu__list--no-shadow">
-                                            <li class="fd-menu__item">
-                                                <a role="button" class="fd-menu__link">
-                                                    <span class="fd-menu__title">Application A</span>
-                                                </a>
-                                            </li>
-                                            <li class="fd-menu__item">
-                                                <a role="button" class="fd-menu__link">
-                                                    <span class="fd-menu__title">Application B</span>
-                                                </a>
-                                            </li>
-                                            <li class="fd-menu__item">
-                                                <a role="button" class="fd-menu__link">
-                                                    <span class="fd-menu__title">Application C</span>
-                                                </a>
-                                            </li>
-                                            <li class="fd-menu__item">
-                                                <a role="button" class="fd-menu__link">
-                                                    <span class="fd-menu__title">Application D</span>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </nav>
+            }
+        </style>
+        <script src="theme-manager.js"></script>
+    </head>
+    <body>
+        <div class="fd-theming">
+            <div class="fd-panel fd-panel--fixed">
+                <div class="fd-panel__header">
+                    <h4 class="fd-panel__title">Shell</h4>
+                </div>
+                <div class="fd-theming__flex">
+                    <div style="width:100%">
+                        <div class="fd-shellbar">
+                            <div class="fd-shellbar__group fd-shellbar__group--product">
+                                <span class="fd-shellbar__logo">
+                                    <img
+                                        src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
+                                        srcset="
+                                            //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
+                                            //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
+                                            //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
+                                        "
+                                        width="48"
+                                        height="24"
+                                        alt="SAP"
+                                    />
+                                </span>
+                                <div class="fd-popover">
+                                    <div class="fd-popover__control">
+                                        <button
+                                            class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu"
+                                            onclick="onPopoverClick('9GLB26941');"
+                                            aria-controls="9GLB26941"
+                                            aria-haspopup="true"
+                                            aria-expanded="false"
+                                        >
+                                            <span class="fd-shellbar__title">Corporate Portal</span>
+                                            <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
+                                        </button>
+                                    </div>
+                                    <div
+                                        class="fd-popover__body fd-popover__body--no-arrow"
+                                        aria-hidden="true"
+                                        id="9GLB26941"
+                                    >
+                                        <nav class="fd-menu">
+                                            <ul class="fd-menu__list fd-menu__list--no-shadow">
+                                                <li class="fd-menu__item">
+                                                    <a role="button" class="fd-menu__link">
+                                                        <span class="fd-menu__title">Application A</span>
+                                                    </a>
+                                                </li>
+                                                <li class="fd-menu__item">
+                                                    <a role="button" class="fd-menu__link">
+                                                        <span class="fd-menu__title">Application B</span>
+                                                    </a>
+                                                </li>
+                                                <li class="fd-menu__item">
+                                                    <a role="button" class="fd-menu__link">
+                                                        <span class="fd-menu__title">Application C</span>
+                                                    </a>
+                                                </li>
+                                                <li class="fd-menu__item">
+                                                    <a role="button" class="fd-menu__link">
+                                                        <span class="fd-menu__title">Application D</span>
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </nav>
+                                    </div>
                                 </div>
+                                <div class="fd-shellbar__subtitle">Subtitle</div>
                             </div>
-                        <div class="fd-shellbar__subtitle">Subtitle</div>
-                        </div>
-                        <div class="fd-shellbar__group fd-shellbar__group--actions">
-                            <div class="fd-shellbar__action fd-shellbar__action--desktop">
-                                <div class="fd-popover__control">
-                                    <div aria-label="Image label" onclick="onPopoverClick('F4GcX348b')" aria-controls="F4GcX348b" aria-expanded="false" aria-haspopup="true">
-                                        <div class="fd-input-group fd-shellbar__search-field">
-                                            <input aria-label="search-input" type="text" class="fd-input fd-input-group__input fd-shellbar__search-field__input" id="F4GcX348b1" value="Search" placeholder="Search...">
-                                            <span class="fd-input-group__addon fd-shellbar__search-field__addon fd-input-group__addon--button">
-                                                <button aria-label="button-decline" class="fd-shellbar__button fd-button">
-                                                        <i class="sap-icon--decline"></i>
-                                                </button>
-                                            </span>
+                            <div class="fd-shellbar__group fd-shellbar__group--actions">
+                                <div class="fd-shellbar__action fd-shellbar__action--grow">
+                                    <div id="JKHhjk7234k2" class="fd-input-group fd-shellbar__search-field">
+                                        <input
+                                            aria-label="search-input"
+                                            type="text"
+                                            onfocus="addClass('JKHhjk7234k2', 'is-focus')"
+                                            onblur="removeClass('JKHhjk7234k2', 'is-focus')"
+                                            class="fd-input fd-input-group__input fd-shellbar__search-field-input"
+                                            id="F4GcX348b1"
+                                            placeholder="Search everything"
+                                        />
+                                        <div
+                                            class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
+                                        >
+                                            <button
+                                                aria-label="button-search"
+                                                class="fd-shellbar__button fd-button fd-button--transparent"
+                                            >
+                                                <i class="sap-icon--decline"></i>
+                                            </button>
+                                        </div>
+                                        <div
+                                            class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
+                                        >
+                                            <button
+                                                aria-label="button-search"
+                                                class="fd-shellbar__button fd-button fd-button--transparent"
+                                            >
+                                                <i class="sap-icon--search"></i>
+                                            </button>
                                         </div>
+                                        <div class="fd-shellbar__search-field-helper"></div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="fd-shellbar__action fd-shellbar__action--desktop">
-                                <button class="fd-button fd-shellbar__button" aria-label="Search">
-                                        <i class="sap-icon--search"></i>
-                                </button>
-                            </div>
-                            <div class="fd-shellbar__action">
-                                <div class="fd-popover fd-popover--right">
-                                    <div class="fd-popover__control">
-                                        <div class="fd-button fd-shellbar__button fd-user-menu__control" aria-controls="ZY3AY276" onclick="onPopoverClick('ZY3AY276')" aria-expanded="false" aria-haspopup="true" role="button">
-                                            <span
-                                                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
-                                                style="background-image: url('assets/images/avatars/1.svg');"
-                                                aria-label="William Wallingham">WW
-                                            </span>
+                            <div class="fd-shellbar__group fd-shellbar__group--actions">
+                                <div class="fd-shellbar__action">
+                                    <div class="fd-popover fd-popover--right">
+                                        <div class="fd-popover__control">
+                                            <div
+                                                class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
+                                                aria-controls="ZY3AY276"
+                                                onclick="onPopoverClick('ZY3AY276')"
+                                                aria-expanded="false"
+                                                aria-haspopup="true"
+                                                role="button"
+                                            >
+                                                <span
+                                                    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatar--circle"
+                                                    style="background-image: url('assets/images/avatars/1.svg')"
+                                                    aria-label="William Wallingham"
+                                                    >WW
+                                                </span>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -104,144 +150,180 @@ <h4 class="fd-panel__title">Shell</h4>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="fd-panel fd-panel--fixed">
-            <div class="fd-panel__header">
-                <h4 class="fd-panel__title">Tiles</h4>
-            </div>
-            <div class="fd-panel__content fd-theming__flex">
-                <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
-                    <div class="fd-tile__header">
-                        <div class="fd-tile__title">My Tasks</div>
-                    </div>
-                    <div class="fd-tile__content">
-                        <div class="fd-numeric-content">
-                            <div class="fd-numeric-content fd-numeric-content--small-tile">
-                                <div class="fd-numeric-content__launch-icon-container">
-                                    <i role="presentation" class="fd-numeric-content__launch-icon sap-icon--task"></i>
-                                </div>
-                                <div class="fd-numeric-content__kpi-container">
-                                    <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">12</div>
+            <div class="fd-panel fd-panel--fixed">
+                <div class="fd-panel__header">
+                    <h4 class="fd-panel__title">Tiles</h4>
+                </div>
+                <div class="fd-panel__content fd-theming__flex">
+                    <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
+                        <div class="fd-tile__header">
+                            <div class="fd-tile__title">My Tasks</div>
+                        </div>
+                        <div class="fd-tile__content">
+                            <div class="fd-numeric-content">
+                                <div class="fd-numeric-content fd-numeric-content--small-tile">
+                                    <div class="fd-numeric-content__launch-icon-container">
+                                        <i
+                                            role="presentation"
+                                            class="fd-numeric-content__launch-icon sap-icon--task"
+                                        ></i>
+                                    </div>
+                                    <div class="fd-numeric-content__kpi-container">
+                                        <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">12</div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="fd-tile__footer fd-tile__footer--1-col">
-                        <div class="fd-tile__section">
-                            <span class="fd-tile__footer-text">Tasks</span>
+                        <div class="fd-tile__footer fd-tile__footer--1-col">
+                            <div class="fd-tile__section">
+                                <span class="fd-tile__footer-text">Tasks</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                &nbsp &nbsp &nbsp
-                <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
-                    <div class="fd-tile__header">
-                        <div class="fd-tile__title">My Leave Requests</div>
-                    </div>
-                    <div class="fd-tile__content">
-                        <div class="fd-numeric-content">
-                            <div class="fd-numeric-content fd-numeric-content--small-tile">
-                                <div class="fd-numeric-content__launch-icon-container">
-                                    <i role="presentation" class="fd-numeric-content__launch-icon sap-icon--general-leave-request"></i>
-                                </div>
-                                <div class="fd-numeric-content__kpi-container">
-                                    <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">3</div>
+                    &nbsp &nbsp &nbsp
+                    <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
+                        <div class="fd-tile__header">
+                            <div class="fd-tile__title">My Leave Requests</div>
+                        </div>
+                        <div class="fd-tile__content">
+                            <div class="fd-numeric-content">
+                                <div class="fd-numeric-content fd-numeric-content--small-tile">
+                                    <div class="fd-numeric-content__launch-icon-container">
+                                        <i
+                                            role="presentation"
+                                            class="fd-numeric-content__launch-icon sap-icon--general-leave-request"
+                                        ></i>
+                                    </div>
+                                    <div class="fd-numeric-content__kpi-container">
+                                        <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">3</div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="fd-tile__footer fd-tile__footer--1-col">
-                        <div class="fd-tile__section">
-                            <span class="fd-tile__footer-text">Requests</span>
+                        <div class="fd-tile__footer fd-tile__footer--1-col">
+                            <div class="fd-tile__section">
+                                <span class="fd-tile__footer-text">Requests</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                &nbsp &nbsp &nbsp
-                <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
-                    <div class="fd-tile__header">
-                        <div class="fd-tile__title">Lunch Menu</div>
-                        <div class="fd-tile__subtitle">Weekly Menu</div>
-                    </div>
-                    <div class="fd-tile__content">
-                        <div class="fd-numeric-content">
-                            <div class="fd-numeric-content fd-numeric-content--small-tile">
-                                <div class="fd-numeric-content__launch-icon-container">
-                                    <i role="presentation" class="fd-numeric-content__launch-icon sap-icon--menu"></i>
+                    &nbsp &nbsp &nbsp
+                    <div role="button" tabindex="0" class="fd-tile fd-tile--launch">
+                        <div class="fd-tile__header">
+                            <div class="fd-tile__title">Lunch Menu</div>
+                            <div class="fd-tile__subtitle">Weekly Menu</div>
+                        </div>
+                        <div class="fd-tile__content">
+                            <div class="fd-numeric-content">
+                                <div class="fd-numeric-content fd-numeric-content--small-tile">
+                                    <div class="fd-numeric-content__launch-icon-container">
+                                        <i
+                                            role="presentation"
+                                            class="fd-numeric-content__launch-icon sap-icon--menu"
+                                        ></i>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="fd-panel fd-panel--fixed">
-            <div class="fd-panel__header">
-                <h4 class="fd-panel__title">Card</h4>
-            </div>
-            <div class="fd-panel__content fd-theming__flex">
-                <div style="width: 300px; height: 400px; margin: 1rem;">
-                    <div class="fd-card" role="region" aria-label="Card Anatomy Example 1">
-                        <a class="fd-card__header" tabindex="0">
-                            <span
-                                class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
-                                style="background-image: url('/assets/images/backgrounds/city.jpg')"
-                                role="img"
-                                aria-label="John Doe">JD</span>
-                            <div class="fd-card__header-text">
-                                <div class="fd-card__title-area">
-                                    <div class="fd-card__title">Card Title</div>
-                                    <span class="fd-object-status fd-card__counter">Counter</span>
+            <div class="fd-panel fd-panel--fixed">
+                <div class="fd-panel__header">
+                    <h4 class="fd-panel__title">Card</h4>
+                </div>
+                <div class="fd-panel__content fd-theming__flex">
+                    <div style="width: 300px; height: 400px; margin: 1rem">
+                        <div class="fd-card" role="region" aria-label="Card Anatomy Example 1">
+                            <a class="fd-card__header" tabindex="0">
+                                <span
+                                    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
+                                    style="background-image: url('/assets/images/backgrounds/city.jpg')"
+                                    role="img"
+                                    aria-label="John Doe"
+                                    >JD</span
+                                >
+                                <div class="fd-card__header-text">
+                                    <div class="fd-card__title-area">
+                                        <div class="fd-card__title">Card Title</div>
+                                        <span class="fd-object-status fd-card__counter">Counter</span>
+                                    </div>
+                                    <div class="fd-card__subtitle-area">
+                                        <div class="fd-card__subtitle">Card Subtitle</div>
+                                    </div> 
                                 </div>
-                                <div class="fd-card__subtitle-area">
-                                    <div class="fd-card__subtitle">Card Subtitle</div>
+                            </a>
+                            <div class="fd-card__content" role="group" aria-label="Card Content">
+                                <div class="fd-card__content-container">
+                                    <div class="fd-card__content-section">
+                                        <div class="fd-card__content-title-container"></div>
+                                        <div class="fd-card__content-group-text">
+                                            <span>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus 
+                                                et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit. 
+                                                Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
+                                            </span>
+                                        </div>
+                                    </div>
                                 </div>
+                                
+                            </div>
+                            <div class="fd-card__footer">
+                                <a class="fd-link fd-card__footer-link" href="#">
+                                    <span class="fd-link__content">
+                                        Footer with a long link Lorem ipsum dolor sit amet, 
+                                        consectetur adipisicing elit. Accusantium
+                                    </span>
+                                </a>
+                                <button class="fd-button fd-button--transparent">
+                                    <i class="sap-icon sap-icon--overflow"></i>
+                                </button>
                             </div>
-                        </a>
-                        <div class="fd-card__content" role="group" aria-label="Card Content"></div>
+                        </div>
                     </div>
-                </div>
-                <div style="width: 300px; height: 100%; margin: 1rem;">
-                    <div class="fd-card" role="region" aria-label="List Card Example 1">
-                        <div class="fd-card__header fd-card__header--non-interactive">
-                            <div class="fd-card__header-text">
-                                <div class="fd-card__title-area">
-                                    <div class="fd-card__title">Quick Links</div>
-                                    <span class="fd-object-status fd-card__counter">6 of 20</span>
+                    <div style="width: 300px; height: 100%; margin: 1rem">
+                        <div class="fd-card" role="region" aria-label="List Card Example 1">
+                            <div class="fd-card__header fd-card__header--non-interactive">
+                                <div class="fd-card__header-text">
+                                    <div class="fd-card__title-area">
+                                        <div class="fd-card__title">Quick Links</div>
+                                        <span class="fd-object-status fd-card__counter">6 of 20</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="fd-card__content" role="group" aria-label="Card Content">
-                            <ul class="fd-list fd-list--no-border" role="list">
-                                <li role="listitem" tabindex="0" class="fd-list__item">
-                                    <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
-                                    <span class="fd-list__title">List item 1</span>
-                                </li>
-                                <li role="listitem" tabindex="0" class="fd-list__item">
-                                    <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
-                                    <span class="fd-list__title">List item 2</span>
-                                </li>
-                                <li role="listitem" tabindex="0" class="fd-list__item">
-                                    <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
-                                    <span class="fd-list__title">List item 3</span>
-                                </li>
-                                <li role="listitem" tabindex="0" class="fd-list__item">
-                                    <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
-                                    <span class="fd-list__title">List item 4</span>
-                                </li>
-                                <li role="listitem" tabindex="0" class="fd-list__item">
-                                    <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
-                                    <span class="fd-list__title">List item 3</span>
-                                </li>
-                                <li role="listitem" tabindex="0" class="fd-list__item">
-                                    <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
-                                    <span class="fd-list__title">List item 4</span>
-                                </li>
-                            </ul>
+                            <div class="fd-card__content" role="group" aria-label="Card Content">
+                                <ul class="fd-list fd-list--no-border" role="list">
+                                    <li role="listitem" tabindex="0" class="fd-list__item">
+                                        <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
+                                        <span class="fd-list__title">List item 1</span>
+                                    </li>
+                                    <li role="listitem" tabindex="0" class="fd-list__item">
+                                        <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
+                                        <span class="fd-list__title">List item 2</span>
+                                    </li>
+                                    <li role="listitem" tabindex="0" class="fd-list__item">
+                                        <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
+                                        <span class="fd-list__title">List item 3</span>
+                                    </li>
+                                    <li role="listitem" tabindex="0" class="fd-list__item">
+                                        <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
+                                        <span class="fd-list__title">List item 4</span>
+                                    </li>
+                                    <li role="listitem" tabindex="0" class="fd-list__item">
+                                        <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
+                                        <span class="fd-list__title">List item 3</span>
+                                    </li>
+                                    <li role="listitem" tabindex="0" class="fd-list__item">
+                                        <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
+                                        <span class="fd-list__title">List item 4</span>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-</body>
+    </body>
+</html>
diff --git a/packages/theming-preview/src/table.html b/packages/theming-preview/src/table.html
index d5870942b3..bf9f57ddf0 100644
--- a/packages/theming-preview/src/table.html
+++ b/packages/theming-preview/src/table.html
@@ -177,40 +177,40 @@ <h4 class="fd-panel__title">Table</h4>
                                 <input checked aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="5">
                                 <label class="fd-checkbox__label" for="5"></label>
                             </td>
-                            <td class="fd-table__cell">Apple</td>
-                            <td class="fd-table__cell">98311</td>
-                            <td class="fd-table__cell">200</td>
-                            <td class="fd-table__cell">$1.30</td>
+                            <td class="fd-table__cell"><span class="fd-table__text">Apple</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">98311</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">200</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">$1.30</span></td>
                         </tr>
                         <tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
                             <td class="fd-table__cell fd-table__cell--checkbox">
                                 <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="6">
                                 <label class="fd-checkbox__label" for="6"></label>
                             </td>
-                            <td class="fd-table__cell">Banana</td>
-                            <td class="fd-table__cell">3612</td>
-                            <td class="fd-table__cell">500</td>
-                            <td class="fd-table__cell">$0.50</td>
+                            <td class="fd-table__cell"><span class="fd-table__text">Banana</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">3612</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">500</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">$0.50</span></td>
                         </tr>
                         <tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
                             <td class="fd-table__cell fd-table__cell--checkbox">
                                 <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="7">
                                 <label class="fd-checkbox__label" for="7"></label>
                             </td>
-                            <td class="fd-table__cell">Pineapple</td>
-                            <td class="fd-table__cell">63125</td>
-                            <td class="fd-table__cell">80</td>
-                            <td class="fd-table__cell">$5.10</td>
+                            <td class="fd-table__cell"><span class="fd-table__text">Pineapple</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">63125</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">80</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">$5.10</span></td>
                         </tr>
                         <tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
                             <td class="fd-table__cell fd-table__cell--checkbox">
                                 <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="8">
                                 <label class="fd-checkbox__label" for="8"></label>
                             </td>
-                            <td class="fd-table__cell">Orange</td>
-                            <td class="fd-table__cell">37012</td>
-                            <td class="fd-table__cell">200</td>
-                            <td class="fd-table__cell">$2.50</td>
+                            <td class="fd-table__cell"><span class="fd-table__text">Orange</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">37012</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">200</span></td>
+                            <td class="fd-table__cell"><span class="fd-table__text">$2.50</span></td>
                         </tr>
                         </tbody>
                 </table>
diff --git a/packages/theming-preview/src/text.html b/packages/theming-preview/src/text.html
index 1c6a149747..17faf422c4 100644
--- a/packages/theming-preview/src/text.html
+++ b/packages/theming-preview/src/text.html
@@ -25,9 +25,9 @@
                 <h4 class="fd-panel__title">Label</h4>
             </div>
             <div class="fd-panel__content fd-theming__flex">
-                <label class="fd-form-label">Standard</label>
+                <div class=""fd-form-item><label class="fd-form-label">Standard</label><input class="fd-input" type="text" id="input-ld"></div>
                 &nbsp
-                <label class="fd-form-label fd-form-label--required">Required</label>
+                <div class=""fd-form-item><label class="fd-form-label fd-form-label--required">Required</label><input class="fd-input" type="text" id="input-ld"></div>
             </div>
         </div>
     
@@ -36,20 +36,20 @@ <h4 class="fd-panel__title">Label</h4>
                 <h4 class="fd-panel__title">Link</h4>
             </div>
             <div class="fd-panel__content fd-theming__flex-column">
-                <a href="#" class="fd-link">Link</a>
+                <a href="#" class="fd-link"><span class="fd-link__content">Link</span></a>
                 &nbsp &nbsp
-                <a href="#" class="fd-link" aria-disabled="true">Disabled Link</a>
+                <a href="#" class="fd-link" aria-disabled="true"><span class="fd-link__content">Disabled Link</span></a>
                 &nbsp &nbsp
-                <a href="#" class="fd-link fd-link--subtle">Subtle Link</a>
+                <a href="#" class="fd-link fd-link--subtle"><span class="fd-link__content"></span>Subtle Link</a>
                 &nbsp &nbsp
-                <a href="#" class="fd-link fd-link--subtle" aria-disabled="true">Subtle Disabled Link</a>
+                <a href="#" class="fd-link fd-link--subtle" aria-disabled="true"><span class="fd-link__content">Subtle Disabled Link</span></a>
                 &nbsp &nbsp
-                <a href="#" class="fd-link fd-link--emphasized">Emphasized Link</a>
+                <a href="#" class="fd-link fd-link--emphasized"><span class="fd-link__content">Emphasized Link</span></a>
                 &nbsp &nbsp
-                <a href="#" class="fd-link fd-link--emphasized" aria-disabled="true">Emphasized Disabled Link</a>
+                <a href="#" class="fd-link fd-link--emphasized" aria-disabled="true"><span class="fd-link__content">Emphasized Disabled Link</span></a>
                 &nbsp &nbsp
                 <div style="background-color:#314a5e; padding:10px; width: 30%;">
-                    <a href="#" class="fd-link fd-link--inverted">Inverted link</a>
+                    <a href="#" class="fd-link fd-link--inverted"><span class="fd-link__content">Inverted link</span></a>
                 </div>
             </div>
         </div>
@@ -61,11 +61,11 @@ <h4 class="fd-panel__title">Breadcrumb</h4>
             <div class="fd-panel__content fd-theming__flex">
                 <nav aria-label="products breadcrumbs">
                     <ul class="fd-breadcrumb">
-                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">root</a></li>
-                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">first</a></li>
-                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">second</a></li>
-                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">fourth</a></li>
-                        <li aria-current="page" class="fd-breadcrumb__item">fifth</li>
+                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">root</span></a></li>
+                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">first</span></a></li>
+                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">second</span></a></li>
+                        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">fourth</span></a></li>
+                        <li aria-current="page" class="fd-breadcrumb__item"><span class="fd-link__content">fifth</span></li>
                     </ul>
                 </nav>
             </div>
@@ -381,7 +381,10 @@ <h4 class="fd-panel__title">Message Strip</h4>
             <div class="fd-panel__content fd-theming__flex">
                 <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
                     <div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                    role="alert" id="SsoiW592">
+                    role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-1">
+                        <div class="fd-message-strip__icon-container" aria-hidden="true">
+                            <span class="sap-icon sap-icon--message-information" focusable="false" role="presentation" aria-hidden="true"></span>
+                        </div>
                         <p class="fd-message-strip__text">
                             Message of type "Information" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                         </p>
@@ -391,7 +394,10 @@ <h4 class="fd-panel__title">Message Strip</h4>
                     </div>
     
                     <div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                        role="alert" id="SsoiW593">
+                        role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-2">
+                        <div class="fd-message-strip__icon-container" aria-hidden="true">
+                            <span class="sap-icon sap-icon--message-success" focusable="false" role="presentation" aria-hidden="true"></span>
+                        </div>
                         <p class="fd-message-strip__text">
                             Message of type "Success" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                         </p>
@@ -401,7 +407,10 @@ <h4 class="fd-panel__title">Message Strip</h4>
                     </div>
     
                     <div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                        role="alert" id="SsoiW594">
+                        role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-3">
+                        <div class="fd-message-strip__icon-container" aria-hidden="true">
+                            <span class="sap-icon sap-icon--message-warning" focusable="false" role="presentation" aria-hidden="true"></span>
+                        </div>
                         <p class="fd-message-strip__text">
                             Message of type "Warning" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                         </p>
@@ -411,7 +420,10 @@ <h4 class="fd-panel__title">Message Strip</h4>
                     </div>
     
                     <div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible fd-theming__margin-bottom-03" 
-                        role="alert" id="SsoiW595">
+                        role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-4">
+                        <div class="fd-message-strip__icon-container" aria-hidden="true">
+                            <span class="sap-icon sap-icon--message-error" focusable="false" role="presentation" aria-hidden="true"></span>
+                        </div>
                         <p class="fd-message-strip__text">
                             Message of type "Error" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
                         </p>
diff --git a/packages/theming-preview/src/toolbar.html b/packages/theming-preview/src/toolbar.html
index 290b44dc2c..dc32075dfd 100644
--- a/packages/theming-preview/src/toolbar.html
+++ b/packages/theming-preview/src/toolbar.html
@@ -27,7 +27,7 @@ <h4 class="fd-panel__title">Toolbar</h4>
             <div class="fd-panel__content fd-theming__flex-column">
                 <div style="padding: 1rem 5rem 1rem 5rem;">
                     <h4>Plain Toolbar</h4>
-                    <div class="fd-toolbar fd-toolbar--cozy">
+                    <div class="fd-toolbar fd-toolbar--cozy" aria-label="Plain toolbar">
                         <span class="fd-toolbar__spacer"> </span>
                         <button class="fd-button fd-button--transparent">New</button>
                         <button class="fd-button fd-button--transparent">Open</button>
@@ -47,48 +47,48 @@ <h4>Plain Toolbar</h4>
                     <br>
     
                     <h4>Solid Toolbar</h4>
-                    <div class="fd-toolbar fd-toolbar--solid">
+                    <div class="fd-toolbar fd-toolbar--solid" aria-label="Solid toolbar">
                         <span>Text</span>
-                        <div class="fd-input-group" style="width: 200px; height: 26px;">
-                            <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Search">
-                            <span class="fd-input-group__addon fd-input-group__addon--button--compact">
-                                <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Search"> 
+                        <div class="fd-input-group" style="width: 200px;">
+                            <input class="fd-input fd-input-group__input" type="text" placeholder="Search">
+                            <span class="fd-input-group__addon">
+                                <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent " aria-label="Search"> 
                                     <i class="sap-icon--search"></i>
                                 </button>
                             </span>
                         </div>
                         <span class="fd-toolbar__spacer "> </span>
-                        <button class="fd-button fd-button--compact fd-button--emphasized">Edit</button>
-                        <button class="fd-button fd-button--compact fd-button--transparent">Save</button>
+                        <button class="fd-button  fd-button--emphasized">Edit</button>
+                        <button class="fd-button  fd-button--transparent">Save</button>
                         <span class="fd-toolbar__separator"></span>
-                        <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
+                        <button class="fd-button  fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
                     </div>
                     <br>
                     
                     <h4>Title Toolbar</h4>
-                    <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
-                        <h4 >Producs (104)</h4>
+                    <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active" aria-label="Title toolabar">
+                        <h4 class="fd-title fd-title--h4 fd-toolbar__title">Producs (104)</h4>
                         <span class="fd-toolbar__spacer "></span>
-                        <button class="fd-button fd-button--compact fd-button--transparent">Save</button>
-                        <button class="fd-button fd-button--compact fd-button--transparent">Delete</button>
+                        <button class="fd-button  fd-button--transparent">Save</button>
+                        <button class="fd-button  fd-button--transparent">Delete</button>
                     </div>
                     <br>
     
                     <h4>Auto Toolbar</h4>
                     <div style="background-color: lightgrey;">
-                        <div class="fd-toolbar fd-toolbar--clear fd-toolbar--auto">
-                            <button class="fd-button fd-button--compact fd-button--transparent">Create</button>
+                        <div class="fd-toolbar fd-toolbar--clear fd-toolbar--auto" aria-label="Auto toolbar">
+                            <button class="fd-button  fd-button--transparent">Create</button>
                             <span class="fd-toolbar__spacer "> </span>
-                            <button class="fd-button fd-button--compact fd-button--transparent">Edit</button>
-                            <button class="fd-button fd-button--compact fd-button--transparent">Delete</button>
+                            <button class="fd-button  fd-button--transparent">Edit</button>
+                            <button class="fd-button  fd-button--transparent">Delete</button>
                             <span class="fd-toolbar__separator"></span>
-                            <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Survey">
+                            <button class="fd-button  fd-button--transparent" aria-label="Survey">
                                 <i class="sap-icon--survey"></i>
                             </button>
-                            <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Pool">
+                            <button class="fd-button  fd-button--transparent" aria-label="Pool">
                                 <i class="sap-icon--pool"></i>
                             </button>
-                            <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Chart">
+                            <button class="fd-button  fd-button--transparent" aria-label="Chart">
                                 <i class="sap-icon--pie-chart"></i>
                             </button>
                         </div>
@@ -96,32 +96,32 @@ <h4>Auto Toolbar</h4>
                     <br>
     
                     <h4>Transparent Toolbar</h4>
-                    <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                    <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent" aria-label="Transparent toolabar">
                         <span>Text</span>
-                        <div class="fd-input-group" style="width: 200px; height: 26px;">
-                            <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Search">
-                            <span class="fd-input-group__addon fd-input-group__addon--button--compact">
-                                <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Search"> 
+                        <div class="fd-input-group" style="width: 200px;">
+                            <input class="fd-input fd-input-group__input" type="text" placeholder="Search">
+                            <span class="fd-input-group__addon">
+                                <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent " aria-label="Search"> 
                                     <i class="sap-icon--search"></i>
                                 </button>
                             </span>
                         </div>
                         <span class="fd-toolbar__spacer "> </span>
-                        <button class="fd-button fd-button--compact fd-button--emphasized">Edit</button>
-                        <button class="fd-button fd-button--compact fd-button--transparent">Save</button>
+                        <button class="fd-button  fd-button--emphasized">Edit</button>
+                        <button class="fd-button  fd-button--transparent">Save</button>
                         <span class="fd-toolbar__separator"></span>
-                        <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
+                        <button class="fd-button  fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
                     </div>
                     <br>
     
                     <h4>Info Toolbar</h4>
-                    <div class="fd-toolbar fd-toolbar--info">Info Bar</div>
+                    <div class="fd-toolbar fd-toolbar--info" role="toolbar" aria-label="Info, not active toolbar"><span>Info Bar</span></div>
                     <br>
-                    <div class="fd-toolbar fd-toolbar--info fd-toolbar--active">Active Info Bar</div>
+                    <div class="fd-toolbar fd-toolbar--info fd-toolbar--active" role="toolbar" aria-label="Info, active toolbar"><span>Active Info Bar</span></div>
                     <br>
     
                     <h4>Overflow Toolbar</h4>
-                    <div class="fd-toolbar fd-toolbar--cozy">
+                    <div class="fd-toolbar fd-toolbar--cozy" aria-label="Overflow toolabar">
                         <span>Products (34)</span>
                         <button class="fd-button fd-button--transparent">Create</button>
                         <span class="fd-toolbar__spacer "> </span>

- January +	+	- February +	+	- March +	+
- April +	+	- May +	+	- June +	+
- July +	+	- August +	+	- September +	+
- October +	+	- November +	+	- December +	+
- 2018	- 2019	- 2020	- 2021	- 2022	+ +	+ +	+ +	+ +	+ +
- 2023	- 2024	- 2025	- 2026	- 2027	+ +	+ +	+ +	+ +	+ +
- 2028	- 2029	- 2030	- 2031	- 2032	+ +	+ +	+ +	+ +	+ +
- 2033	- 2034	- 2035	- 2036	- 2037	+ +	+ +	+ +	+ +	+ +