diff --git a/.travis.yml b/.travis.yml
index 37fb05d75c8..652a7e0a41d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,7 +4,7 @@ git:
   depth: false
 
 node_js:
-  - '8'
+  - '8.16.0'
   - '10'
 
 cache: yarn
diff --git a/packages/fiori3/__karma_snapshots__/ActionSheet.md b/packages/fiori3/__karma_snapshots__/ActionSheet.md
index c307c35949f..5c1e7362cbc 100644
--- a/packages/fiori3/__karma_snapshots__/ActionSheet.md
+++ b/packages/fiori3/__karma_snapshots__/ActionSheet.md
@@ -8,17 +8,17 @@
     <Jss(WithStyles(ActionSheet)) openBy={{...}} placement="Bottom">
       <WithStyles(ActionSheet) openBy={{...}} placement="Bottom" classes={{...}}>
         <ActionSheet openBy={{...}} placement="Bottom" classes={{...}}>
-          <Popover hideHeader={true} innerComponentRef={[Function]} openBy={{...}} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+          <Popover noHeader={true} innerComponentRef={[Function]} openBy={{...}} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
             <div style={{...}} onClick={[Function]}>
-              <Button type="Default">
-                <WithWebComponent theme={{...}} type="Default">
-                  <ui5-button type="Default" class="" />
+              <Button design="Default">
+                <WithWebComponent theme={{...}} design="Default">
+                  <ui5-button design="Default" class="" />
                 </WithWebComponent>
               </Button>
             </div>
-            <WithTheme(WithWebComponent) hideHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-              <WithWebComponent theme={{...}} hideHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                <ui5-popover hide-header={true} inner-component-ref={[Function]} placement-type="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
+            <WithTheme(WithWebComponent) noHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+              <WithWebComponent theme={{...}} noHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                <ui5-popover no-header={true} inner-component-ref={[Function]} placement-type="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
                   <ul className="ActionSheet-actionSheet---" />
                 </ui5-popover>
               </WithWebComponent>
diff --git a/packages/fiori3/__karma_snapshots__/AnalyticalTable.md b/packages/fiori3/__karma_snapshots__/AnalyticalTable.md
index f10edc562a2..a091354aa22 100644
--- a/packages/fiori3/__karma_snapshots__/AnalyticalTable.md
+++ b/packages/fiori3/__karma_snapshots__/AnalyticalTable.md
@@ -38,7 +38,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -50,22 +50,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -89,7 +89,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -101,22 +101,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -140,7 +140,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -152,22 +152,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -191,7 +191,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -205,22 +205,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -607,27 +607,27 @@
                             </Label>
                           </div>
                           <LinkHOC mode={1} enabled={false} onClick={[Function]} selectedPage={0} page={-1}>
-                            <Link style={{...}} onPress={[Function]} type="Default" href="" target="">
-                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Default" href="" target="">
-                                <ui5-link style={{...}} type="Default" href="" target="" class="">
+                            <Link style={{...}} onPress={[Function]} design="Default">
+                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Default">
+                                <ui5-link style={{...}} design="Default" class="">
                                   &lt;
                                 </ui5-link>
                               </WithWebComponent>
                             </Link>
                           </LinkHOC>
                           <LinkHOC onClick={[Function]} page={0} selectedPage={0} enabled={true}>
-                            <Link style={{...}} onPress={[Function]} type="Emphasized" href="" target="">
-                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized" href="" target="">
-                                <ui5-link style={{...}} type="Emphasized" href="" target="" class="">
+                            <Link style={{...}} onPress={[Function]} design="Emphasized">
+                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                                <ui5-link style={{...}} design="Emphasized" class="">
                                   1
                                 </ui5-link>
                               </WithWebComponent>
                             </Link>
                           </LinkHOC>
                           <LinkHOC mode={0} enabled={false} onClick={[Function]} selectedPage={0} page={-1}>
-                            <Link style={{...}} onPress={[Function]} type="Default" href="" target="">
-                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Default" href="" target="">
-                                <ui5-link style={{...}} type="Default" href="" target="" class="">
+                            <Link style={{...}} onPress={[Function]} design="Default">
+                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Default">
+                                <ui5-link style={{...}} design="Default" class="">
                                   &gt;
                                 </ui5-link>
                               </WithWebComponent>
@@ -695,7 +695,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -707,22 +707,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -746,7 +746,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -758,22 +758,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -797,7 +797,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -809,22 +809,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -848,7 +848,7 @@
                                   <Jss(WithStyles(ColumnHeaderModal)) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true}>
                                     <WithStyles(ColumnHeaderModal) openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
                                       <ColumnHeaderModal openBy={{...}} showFilter={false} sortAscending={[Function]} sortDescending={[Function]} column={{...}} FilterComponent={[Function]} filter={{...}} onFilterChange={[Function]} showSort={true} theme={{...}} classes={{...}}>
-                                        <Popover openByStyle={{...}} openBy={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                        <Popover openByStyle={{...}} openBy={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
                                           <div style={{...}} onClick={[Function]}>
                                             <div className="rt-th ColumnHeader-header--- ColumnHeader-header---">
                                               <div className="rt-resizable-header-content">
@@ -862,22 +862,22 @@
                                               <div className="ColumnHeader-iconContainer---" />
                                             </div>
                                           </div>
-                                          <WithTheme(WithWebComponent) hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                            <WithWebComponent theme={{...}} hideHeader={true} hideArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
-                                              <ui5-popover hide-header={true} hide-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
+                                          <WithTheme(WithWebComponent) noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                            <WithWebComponent theme={{...}} noHeader={true} noArrow={true} horizontalAlign="Left" placementType="Bottom" innerComponentRef={[Function]} initialFocus={{...}} headerText="" verticalAlign="Center">
+                                              <ui5-popover no-header={true} no-arrow={true} horizontal-align="Left" placement-type="Bottom" inner-component-ref={[Function]} initial-focus={{...}} header-text="" vertical-align="Center" class="">
                                                 <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                   <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                                     <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-ascending" data-sort="asc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-ascending" data-sort="asc" info-state="None" class="">
                                                             Sort Ascending
                                                           </ui5-li>
                                                         </WithWebComponent>
                                                       </StandardListItem>
-                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}}>
-                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" description="" image={{...}} class="">
+                                                      <StandardListItem type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                        <WithWebComponent theme={{...}} type="Active" icon="sap-icon://sort-descending" data-sort="desc" infoState="None">
+                                                          <ui5-li type="Active" icon="sap-icon://sort-descending" data-sort="desc" info-state="None" class="">
                                                             Sort Descending
                                                           </ui5-li>
                                                         </WithWebComponent>
@@ -1272,36 +1272,36 @@
                             </Label>
                           </div>
                           <LinkHOC mode={1} enabled={false} onClick={[Function]} selectedPage={0} page={-1}>
-                            <Link style={{...}} onPress={[Function]} type="Default" href="" target="">
-                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Default" href="" target="">
-                                <ui5-link style={{...}} type="Default" href="" target="" class="">
+                            <Link style={{...}} onPress={[Function]} design="Default">
+                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Default">
+                                <ui5-link style={{...}} design="Default" class="">
                                   &lt;
                                 </ui5-link>
                               </WithWebComponent>
                             </Link>
                           </LinkHOC>
                           <LinkHOC onClick={[Function]} page={0} selectedPage={0} enabled={true}>
-                            <Link style={{...}} onPress={[Function]} type="Emphasized" href="" target="">
-                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized" href="" target="">
-                                <ui5-link style={{...}} type="Emphasized" href="" target="" class="">
+                            <Link style={{...}} onPress={[Function]} design="Emphasized">
+                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                                <ui5-link style={{...}} design="Emphasized" class="">
                                   1
                                 </ui5-link>
                               </WithWebComponent>
                             </Link>
                           </LinkHOC>
                           <LinkHOC onClick={[Function]} page={1} selectedPage={0} enabled={true}>
-                            <Link style={{...}} onPress={[Function]} type="Default" href="" target="">
-                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Default" href="" target="">
-                                <ui5-link style={{...}} type="Default" href="" target="" class="">
+                            <Link style={{...}} onPress={[Function]} design="Default">
+                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Default">
+                                <ui5-link style={{...}} design="Default" class="">
                                   2
                                 </ui5-link>
                               </WithWebComponent>
                             </Link>
                           </LinkHOC>
                           <LinkHOC mode={0} enabled={true} onClick={[Function]} selectedPage={0} page={-1}>
-                            <Link style={{...}} onPress={[Function]} type="Default" href="" target="">
-                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Default" href="" target="">
-                                <ui5-link style={{...}} type="Default" href="" target="" class="">
+                            <Link style={{...}} onPress={[Function]} design="Default">
+                              <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Default">
+                                <ui5-link style={{...}} design="Default" class="">
                                   &gt;
                                 </ui5-link>
                               </WithWebComponent>
diff --git a/packages/fiori3/__karma_snapshots__/Badge.md b/packages/fiori3/__karma_snapshots__/Badge.md
index 5b17e732bea..bee6d9f4051 100644
--- a/packages/fiori3/__karma_snapshots__/Badge.md
+++ b/packages/fiori3/__karma_snapshots__/Badge.md
@@ -5,9 +5,9 @@
 ```
 <ThemeProvider withToastContainer={false}>
   <ThemeProvider jss={{...}} theme={{...}}>
-    <Badge>
-      <WithWebComponent theme={{...}}>
-        <ui5-badge class="">
+    <Badge colorScheme="1">
+      <WithWebComponent theme={{...}} colorScheme="1">
+        <ui5-badge color-scheme="1" class="">
           My Badge
         </ui5-badge>
       </WithWebComponent>
@@ -21,9 +21,9 @@
 ```
 <ThemeProvider withToastContainer={false}>
   <ThemeProvider jss={{...}} theme={{...}}>
-    <Badge icon={{...}}>
-      <WithWebComponent theme={{...}} icon={{...}}>
-        <ui5-badge class="">
+    <Badge icon={{...}} colorScheme="1">
+      <WithWebComponent theme={{...}} icon={{...}} colorScheme="1">
+        <ui5-badge color-scheme="1" class="">
           <Icon src="sap-icon://employee" data-ui5-slot="icon">
             <WithWebComponent theme={{...}} src="sap-icon://employee" data-ui5-slot="icon">
               <ui5-icon src="sap-icon://employee" data-ui5-slot="icon" class="" />
diff --git a/packages/fiori3/__karma_snapshots__/Button.md b/packages/fiori3/__karma_snapshots__/Button.md
index 71218c7e8e3..0d068cb1d4c 100644
--- a/packages/fiori3/__karma_snapshots__/Button.md
+++ b/packages/fiori3/__karma_snapshots__/Button.md
@@ -5,9 +5,9 @@
 ```
 <ThemeProvider withToastContainer={false}>
   <ThemeProvider jss={{...}} theme={{...}}>
-    <Button type="Default">
-      <WithWebComponent theme={{...}} type="Default">
-        <ui5-button type="Default" class="" />
+    <Button design="Default">
+      <WithWebComponent theme={{...}} design="Default">
+        <ui5-button design="Default" class="" />
       </WithWebComponent>
     </Button>
   </ThemeProvider>
diff --git a/packages/fiori3/__karma_snapshots__/FilterBar.md b/packages/fiori3/__karma_snapshots__/FilterBar.md
index b94c98ce28e..a1742560eb0 100644
--- a/packages/fiori3/__karma_snapshots__/FilterBar.md
+++ b/packages/fiori3/__karma_snapshots__/FilterBar.md
@@ -25,9 +25,9 @@
                               </WithWebComponent>
                             </Title>
                           </span>
-                          <Button type="Transparent" icon="navigation-down-arrow">
-                            <WithWebComponent theme={{...}} type="Transparent" icon="navigation-down-arrow">
-                              <ui5-button type="Transparent" icon="navigation-down-arrow" class="" />
+                          <Button design="Transparent" icon="navigation-down-arrow">
+                            <WithWebComponent theme={{...}} design="Transparent" icon="navigation-down-arrow">
+                              <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
                             </WithWebComponent>
                           </Button>
                         </div>
@@ -35,9 +35,9 @@
                       <WithTheme(WithWebComponent) open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
                         <WithWebComponent theme={{...}} open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
                           <ui5-popover open={false} header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
-                            <Button className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                              <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                                <ui5-button type="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
+                            <Button className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                              <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                                <ui5-button design="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
                                   Cancel
                                 </ui5-button>
                               </WithWebComponent>
@@ -45,16 +45,16 @@
                             <WithTheme(WithWebComponent) onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                               <WithWebComponent theme={{...}} onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                                 <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
-                                  <StandardListItem style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                                    <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                                      <ui5-li selected={true} style={{...}} data-key="1" type="Active" description="" icon={{...}} image={{...}} class="">
+                                  <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                                    <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                                      <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
                                         Variant 1
                                       </ui5-li>
                                     </WithWebComponent>
                                   </StandardListItem>
-                                  <StandardListItem style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                                    <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                                      <ui5-li style={{...}} data-key="2" type="Active" description="" icon={{...}} image={{...}} class="">
+                                  <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                                    <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                                      <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
                                         Variant 2
                                       </ui5-li>
                                     </WithWebComponent>
@@ -79,9 +79,9 @@
                  
               </div>
               <div className="FilterBar-headerRowRight---">
-                <Button onPress={[Function]} type="Transparent">
-                  <WithWebComponent theme={{...}} onPress={[Function]} type="Transparent">
-                    <ui5-button type="Transparent" class="">
+                <Button onPress={[Function]} design="Transparent">
+                  <WithWebComponent theme={{...}} onPress={[Function]} design="Transparent">
+                    <ui5-button design="Transparent" class="">
                       Hide Filter Bar
                     </ui5-button>
                   </WithWebComponent>
@@ -103,16 +103,16 @@
                       <Select onChange={[Function]} style={{...}} valueState="None">
                         <WithWebComponent theme={{...}} onChange={[Function]} style={{...}} valueState="None">
                           <ui5-select style={{...}} value-state="None" class="">
-                            <StandardListItem type="Active" data-key="1" description="" icon={{...}} image={{...}}>
-                              <WithWebComponent theme={{...}} type="Active" data-key="1" description="" icon={{...}} image={{...}}>
-                                <ui5-li type="Active" data-key="1" description="" icon={{...}} image={{...}} class="">
+                            <StandardListItem type="Active" data-key="1" infoState="None">
+                              <WithWebComponent theme={{...}} type="Active" data-key="1" infoState="None">
+                                <ui5-li type="Active" data-key="1" info-state="None" class="">
                                   Text 1
                                 </ui5-li>
                               </WithWebComponent>
                             </StandardListItem>
-                            <StandardListItem type="Active" data-key="2" description="" icon={{...}} image={{...}}>
-                              <WithWebComponent theme={{...}} type="Active" data-key="2" description="" icon={{...}} image={{...}}>
-                                <ui5-li type="Active" data-key="2" description="" icon={{...}} image={{...}} class="">
+                            <StandardListItem type="Active" data-key="2" infoState="None">
+                              <WithWebComponent theme={{...}} type="Active" data-key="2" infoState="None">
+                                <ui5-li type="Active" data-key="2" info-state="None" class="">
                                   Text 2
                                 </ui5-li>
                               </WithWebComponent>
@@ -136,9 +136,9 @@
                         </WithWebComponent>
                       </Label>
                       <div>
-                        <Switch textOn="" textOff="" type="Textual" onClick={[Function]} valueParameter="state" style={{...}}>
-                          <WithWebComponent theme={{...}} textOn="" textOff="" type="Textual" onClick={[Function]} valueParameter="state" style={{...}}>
-                            <ui5-switch text-on="" text-off="" type="Textual" on-click={[Function]} value-parameter="state" style={{...}} class="" />
+                        <Switch onClick={[Function]} valueParameter="state" style={{...}}>
+                          <WithWebComponent theme={{...}} onClick={[Function]} valueParameter="state" style={{...}}>
+                            <ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
                           </WithWebComponent>
                         </Switch>
                       </div>
@@ -180,9 +180,9 @@
                               </WithWebComponent>
                             </Title>
                           </span>
-                          <Button type="Transparent" icon="navigation-down-arrow">
-                            <WithWebComponent theme={{...}} type="Transparent" icon="navigation-down-arrow">
-                              <ui5-button type="Transparent" icon="navigation-down-arrow" class="" />
+                          <Button design="Transparent" icon="navigation-down-arrow">
+                            <WithWebComponent theme={{...}} design="Transparent" icon="navigation-down-arrow">
+                              <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
                             </WithWebComponent>
                           </Button>
                         </div>
@@ -190,9 +190,9 @@
                       <WithTheme(WithWebComponent) open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
                         <WithWebComponent theme={{...}} open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
                           <ui5-popover open={false} header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
-                            <Button className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                              <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                                <ui5-button type="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
+                            <Button className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                              <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                                <ui5-button design="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
                                   Cancel
                                 </ui5-button>
                               </WithWebComponent>
@@ -200,16 +200,16 @@
                             <WithTheme(WithWebComponent) onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                               <WithWebComponent theme={{...}} onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                                 <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
-                                  <StandardListItem style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                                    <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                                      <ui5-li selected={true} style={{...}} data-key="1" type="Active" description="" icon={{...}} image={{...}} class="">
+                                  <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                                    <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                                      <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
                                         Variant 1
                                       </ui5-li>
                                     </WithWebComponent>
                                   </StandardListItem>
-                                  <StandardListItem style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                                    <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                                      <ui5-li style={{...}} data-key="2" type="Active" description="" icon={{...}} image={{...}} class="">
+                                  <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                                    <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                                      <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
                                         Variant 2
                                       </ui5-li>
                                     </WithWebComponent>
@@ -225,9 +225,9 @@
                 </WithStyles(VariantManagement)>
               </Jss(WithStyles(VariantManagement))>
               <div className="FilterBar-headerRowRight---">
-                <Button onPress={[Function]} type="Transparent">
-                  <WithWebComponent theme={{...}} onPress={[Function]} type="Transparent">
-                    <ui5-button type="Transparent" class="">
+                <Button onPress={[Function]} design="Transparent">
+                  <WithWebComponent theme={{...}} onPress={[Function]} design="Transparent">
+                    <ui5-button design="Transparent" class="">
                       Hide Filter Bar
                     </ui5-button>
                   </WithWebComponent>
@@ -249,16 +249,16 @@
                       <Select onChange={[Function]} style={{...}} valueState="None">
                         <WithWebComponent theme={{...}} onChange={[Function]} style={{...}} valueState="None">
                           <ui5-select style={{...}} value-state="None" class="">
-                            <StandardListItem type="Active" data-key="1" description="" icon={{...}} image={{...}}>
-                              <WithWebComponent theme={{...}} type="Active" data-key="1" description="" icon={{...}} image={{...}}>
-                                <ui5-li type="Active" data-key="1" description="" icon={{...}} image={{...}} class="">
+                            <StandardListItem type="Active" data-key="1" infoState="None">
+                              <WithWebComponent theme={{...}} type="Active" data-key="1" infoState="None">
+                                <ui5-li type="Active" data-key="1" info-state="None" class="">
                                   Text 1
                                 </ui5-li>
                               </WithWebComponent>
                             </StandardListItem>
-                            <StandardListItem type="Active" data-key="2" description="" icon={{...}} image={{...}}>
-                              <WithWebComponent theme={{...}} type="Active" data-key="2" description="" icon={{...}} image={{...}}>
-                                <ui5-li type="Active" data-key="2" description="" icon={{...}} image={{...}} class="">
+                            <StandardListItem type="Active" data-key="2" infoState="None">
+                              <WithWebComponent theme={{...}} type="Active" data-key="2" infoState="None">
+                                <ui5-li type="Active" data-key="2" info-state="None" class="">
                                   Text 2
                                 </ui5-li>
                               </WithWebComponent>
@@ -282,9 +282,9 @@
                         </WithWebComponent>
                       </Label>
                       <div>
-                        <Switch textOn="" textOff="" type="Textual" onClick={[Function]} valueParameter="state" style={{...}}>
-                          <WithWebComponent theme={{...}} textOn="" textOff="" type="Textual" onClick={[Function]} valueParameter="state" style={{...}}>
-                            <ui5-switch text-on="" text-off="" type="Textual" on-click={[Function]} value-parameter="state" style={{...}} class="" />
+                        <Switch onClick={[Function]} valueParameter="state" style={{...}}>
+                          <WithWebComponent theme={{...}} onClick={[Function]} valueParameter="state" style={{...}}>
+                            <ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
                           </WithWebComponent>
                         </Switch>
                       </div>
@@ -346,9 +346,9 @@
                               </WithWebComponent>
                             </Title>
                           </span>
-                          <Button type="Transparent" icon="navigation-down-arrow">
-                            <WithWebComponent theme={{...}} type="Transparent" icon="navigation-down-arrow">
-                              <ui5-button type="Transparent" icon="navigation-down-arrow" class="" />
+                          <Button design="Transparent" icon="navigation-down-arrow">
+                            <WithWebComponent theme={{...}} design="Transparent" icon="navigation-down-arrow">
+                              <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
                             </WithWebComponent>
                           </Button>
                         </div>
@@ -356,9 +356,9 @@
                       <WithTheme(WithWebComponent) open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
                         <WithWebComponent theme={{...}} open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
                           <ui5-popover open={false} header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
-                            <Button className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                              <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                                <ui5-button type="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
+                            <Button className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                              <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                                <ui5-button design="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
                                   Cancel
                                 </ui5-button>
                               </WithWebComponent>
@@ -366,16 +366,16 @@
                             <WithTheme(WithWebComponent) onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                               <WithWebComponent theme={{...}} onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                                 <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
-                                  <StandardListItem style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                                    <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                                      <ui5-li selected={true} style={{...}} data-key="1" type="Active" description="" icon={{...}} image={{...}} class="">
+                                  <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                                    <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                                      <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
                                         Variant 1
                                       </ui5-li>
                                     </WithWebComponent>
                                   </StandardListItem>
-                                  <StandardListItem style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                                    <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                                      <ui5-li style={{...}} data-key="2" type="Active" description="" icon={{...}} image={{...}} class="">
+                                  <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                                    <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                                      <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
                                         Variant 2
                                       </ui5-li>
                                     </WithWebComponent>
@@ -391,9 +391,9 @@
                 </WithStyles(VariantManagement)>
               </Jss(WithStyles(VariantManagement))>
               <div className="FilterBar-headerRowRight---">
-                <Button onPress={[Function]} type="Transparent">
-                  <WithWebComponent theme={{...}} onPress={[Function]} type="Transparent">
-                    <ui5-button type="Transparent" class="">
+                <Button onPress={[Function]} design="Transparent">
+                  <WithWebComponent theme={{...}} onPress={[Function]} design="Transparent">
+                    <ui5-button design="Transparent" class="">
                       Hide Filter Bar
                     </ui5-button>
                   </WithWebComponent>
@@ -415,16 +415,16 @@
                       <Select onChange={[Function]} style={{...}} valueState="None">
                         <WithWebComponent theme={{...}} onChange={[Function]} style={{...}} valueState="None">
                           <ui5-select style={{...}} value-state="None" class="">
-                            <StandardListItem type="Active" data-key="1" description="" icon={{...}} image={{...}}>
-                              <WithWebComponent theme={{...}} type="Active" data-key="1" description="" icon={{...}} image={{...}}>
-                                <ui5-li type="Active" data-key="1" description="" icon={{...}} image={{...}} class="">
+                            <StandardListItem type="Active" data-key="1" infoState="None">
+                              <WithWebComponent theme={{...}} type="Active" data-key="1" infoState="None">
+                                <ui5-li type="Active" data-key="1" info-state="None" class="">
                                   Text 1
                                 </ui5-li>
                               </WithWebComponent>
                             </StandardListItem>
-                            <StandardListItem type="Active" data-key="2" description="" icon={{...}} image={{...}}>
-                              <WithWebComponent theme={{...}} type="Active" data-key="2" description="" icon={{...}} image={{...}}>
-                                <ui5-li type="Active" data-key="2" description="" icon={{...}} image={{...}} class="">
+                            <StandardListItem type="Active" data-key="2" infoState="None">
+                              <WithWebComponent theme={{...}} type="Active" data-key="2" infoState="None">
+                                <ui5-li type="Active" data-key="2" info-state="None" class="">
                                   Text 2
                                 </ui5-li>
                               </WithWebComponent>
diff --git a/packages/fiori3/__karma_snapshots__/Link.md b/packages/fiori3/__karma_snapshots__/Link.md
index ddc9d8f1ac3..b3d3dc5f621 100644
--- a/packages/fiori3/__karma_snapshots__/Link.md
+++ b/packages/fiori3/__karma_snapshots__/Link.md
@@ -5,9 +5,9 @@
 ```
 <ThemeProvider withToastContainer={false}>
   <ThemeProvider jss={{...}} theme={{...}}>
-    <Link href="" target="" type="Default">
-      <WithWebComponent theme={{...}} href="" target="" type="Default">
-        <ui5-link href="" target="" type="Default" class="" />
+    <Link design="Default">
+      <WithWebComponent theme={{...}} design="Default">
+        <ui5-link design="Default" class="" />
       </WithWebComponent>
     </Link>
   </ThemeProvider>
diff --git a/packages/fiori3/__karma_snapshots__/MessageBox.md b/packages/fiori3/__karma_snapshots__/MessageBox.md
index 3ed0a7d8ea3..394079bb508 100644
--- a/packages/fiori3/__karma_snapshots__/MessageBox.md
+++ b/packages/fiori3/__karma_snapshots__/MessageBox.md
@@ -39,18 +39,18 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         OK
                       </ui5-button>
                     </WithWebComponent>
                   </Button>
                 </MessageBoxButton>
                 <MessageBoxButton emphasize={false} onClick={[Function]} action="Cancel">
-                  <Button style={{...}} onPress={[Function]} type="Transparent">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Transparent">
-                      <ui5-button style={{...}} type="Transparent" class="">
+                  <Button style={{...}} onPress={[Function]} design="Transparent">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Transparent">
+                      <ui5-button style={{...}} design="Transparent" class="">
                         Cancel
                       </ui5-button>
                     </WithWebComponent>
@@ -105,18 +105,18 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         OK
                       </ui5-button>
                     </WithWebComponent>
                   </Button>
                 </MessageBoxButton>
                 <MessageBoxButton emphasize={false} onClick={[Function]} action="Cancel">
-                  <Button style={{...}} onPress={[Function]} type="Transparent">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Transparent">
-                      <ui5-button style={{...}} type="Transparent" class="">
+                  <Button style={{...}} onPress={[Function]} design="Transparent">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Transparent">
+                      <ui5-button style={{...}} design="Transparent" class="">
                         Cancel
                       </ui5-button>
                     </WithWebComponent>
@@ -171,9 +171,9 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         OK
                       </ui5-button>
                     </WithWebComponent>
@@ -228,9 +228,9 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         OK
                       </ui5-button>
                     </WithWebComponent>
@@ -285,9 +285,9 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="Close">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         Close
                       </ui5-button>
                     </WithWebComponent>
@@ -342,9 +342,9 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         OK
                       </ui5-button>
                     </WithWebComponent>
@@ -399,18 +399,18 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="Yes">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         Yes
                       </ui5-button>
                     </WithWebComponent>
                   </Button>
                 </MessageBoxButton>
                 <MessageBoxButton emphasize={false} onClick={[Function]} action="No">
-                  <Button style={{...}} onPress={[Function]} type="Transparent">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Transparent">
-                      <ui5-button style={{...}} type="Transparent" class="">
+                  <Button style={{...}} onPress={[Function]} design="Transparent">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Transparent">
+                      <ui5-button style={{...}} design="Transparent" class="">
                         No
                       </ui5-button>
                     </WithWebComponent>
@@ -465,9 +465,9 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         OK
                       </ui5-button>
                     </WithWebComponent>
@@ -536,18 +536,18 @@
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
-                  <Button style={{...}} onPress={[Function]} type="Emphasized">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Emphasized">
-                      <ui5-button style={{...}} type="Emphasized" class="">
+                  <Button style={{...}} onPress={[Function]} design="Emphasized">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Emphasized">
+                      <ui5-button style={{...}} design="Emphasized" class="">
                         OK
                       </ui5-button>
                     </WithWebComponent>
                   </Button>
                 </MessageBoxButton>
                 <MessageBoxButton emphasize={false} onClick={[Function]} action="Cancel">
-                  <Button style={{...}} onPress={[Function]} type="Transparent">
-                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} type="Transparent">
-                      <ui5-button style={{...}} type="Transparent" class="">
+                  <Button style={{...}} onPress={[Function]} design="Transparent">
+                    <WithWebComponent theme={{...}} style={{...}} onPress={[Function]} design="Transparent">
+                      <ui5-button style={{...}} design="Transparent" class="">
                         Cancel
                       </ui5-button>
                     </WithWebComponent>
diff --git a/packages/fiori3/__karma_snapshots__/MessageStrip.md b/packages/fiori3/__karma_snapshots__/MessageStrip.md
index c24b34fc42a..73bcb1c0566 100644
--- a/packages/fiori3/__karma_snapshots__/MessageStrip.md
+++ b/packages/fiori3/__karma_snapshots__/MessageStrip.md
@@ -1,5 +1,19 @@
 # `MessageStrip`
 
+#### `Basic Test (generated)`
+
+```
+<ThemeProvider withToastContainer={false}>
+  <ThemeProvider jss={{...}} theme={{...}}>
+    <MessageStrip type="Information">
+      <WithWebComponent theme={{...}} type="Information">
+        <ui5-messagestrip type="Information" class="" />
+      </WithWebComponent>
+    </MessageStrip>
+  </ThemeProvider>
+</ThemeProvider>
+```
+
 #### `Dismissible`
 
 ```
diff --git a/packages/fiori3/__karma_snapshots__/MultiComboBox.md b/packages/fiori3/__karma_snapshots__/MultiComboBox.md
new file mode 100644
index 00000000000..48848ba0a5e
--- /dev/null
+++ b/packages/fiori3/__karma_snapshots__/MultiComboBox.md
@@ -0,0 +1,16 @@
+# `MultiComboBox`
+
+#### `Basic Test (generated)`
+
+```
+<ThemeProvider withToastContainer={false}>
+  <ThemeProvider jss={{...}} theme={{...}}>
+    <MultiComboBox value="" placeholder="" valueState="None">
+      <WithWebComponent theme={{...}} value="" placeholder="" valueState="None">
+        <ui5-multi-combobox value="" placeholder="" value-state="None" class="" />
+      </WithWebComponent>
+    </MultiComboBox>
+  </ThemeProvider>
+</ThemeProvider>
+```
+
diff --git a/packages/fiori3/__karma_snapshots__/ObjectPage.md b/packages/fiori3/__karma_snapshots__/ObjectPage.md
index 504cfa25df9..a9614b875ba 100644
--- a/packages/fiori3/__karma_snapshots__/ObjectPage.md
+++ b/packages/fiori3/__karma_snapshots__/ObjectPage.md
@@ -20,9 +20,9 @@
                   </span>
                 </span>
                 <span className="ObjectPage-actions---">
-                  <Button type="Default">
-                    <WithWebComponent theme={{...}} type="Default">
-                      <ui5-button type="Default" class="">
+                  <Button design="Default">
+                    <WithWebComponent theme={{...}} design="Default">
+                      <ui5-button design="Default" class="">
                         Action
                       </ui5-button>
                     </WithWebComponent>
@@ -33,9 +33,9 @@
                 <div className="ObjectPage-headerContent---">
                   <span className="ObjectPage-headerCustomContent---">
                     <div style={{...}}>
-                      <Link href="https://www.sap.com" target="" type="Default">
-                        <WithWebComponent theme={{...}} href="https://www.sap.com" target="" type="Default">
-                          <ui5-link href="https://www.sap.com" target="" type="Default" class="">
+                      <Link href="https://www.sap.com" design="Default">
+                        <WithWebComponent theme={{...}} href="https://www.sap.com" design="Default">
+                          <ui5-link href="https://www.sap.com" design="Default" class="">
                             www.myurl.com
                           </ui5-link>
                         </WithWebComponent>
@@ -71,9 +71,9 @@
                   </span>
                 </div>
                 <div className="ObjectPage-hideHeaderContent---">
-                  <Button style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} type="Default">
-                    <WithWebComponent theme={{...}} style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} type="Default">
-                      <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" type="Default" class="" />
+                  <Button style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} design="Default">
+                    <WithWebComponent theme={{...}} style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} design="Default">
+                      <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" design="Default" class="" />
                     </WithWebComponent>
                   </Button>
                 </div>
@@ -84,9 +84,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-1" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className="ObjectPage-active---" onClick={[Function]}>
                         <a className="ObjectPage-active---" onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 1
                               </ui5-button>
                             </WithWebComponent>
@@ -101,9 +101,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-2" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className={[undefined]} onClick={[Function]}>
                         <a className={[undefined]} onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 2
                               </ui5-button>
                             </WithWebComponent>
@@ -118,9 +118,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-3" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className={[undefined]} onClick={[Function]}>
                         <a className={[undefined]} onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 3
                               </ui5-button>
                             </WithWebComponent>
@@ -135,9 +135,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-4" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className={[undefined]} onClick={[Function]}>
                         <a className={[undefined]} onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 4
                               </ui5-button>
                             </WithWebComponent>
@@ -145,7 +145,7 @@
                         </a>
                       </LinkElement>
                     </Link>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
                       <div style={{...}} onClick={[Function]}>
                         <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
                           <WithWebComponent theme={{...}} src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
@@ -153,9 +153,9 @@
                           </WithWebComponent>
                         </Icon>
                       </div>
-                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                          <ui5-popover hide-header={true} hide-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
+                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                          <ui5-popover no-header={true} no-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
                             <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                               <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                 <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
@@ -211,9 +211,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-5" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className={[undefined]} onClick={[Function]}>
                         <a className={[undefined]} onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 5
                               </ui5-button>
                             </WithWebComponent>
@@ -221,7 +221,7 @@
                         </a>
                       </LinkElement>
                     </Link>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
                       <div style={{...}} onClick={[Function]}>
                         <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
                           <WithWebComponent theme={{...}} src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
@@ -229,9 +229,9 @@
                           </WithWebComponent>
                         </Icon>
                       </div>
-                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                          <ui5-popover hide-header={true} hide-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
+                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                          <ui5-popover no-header={true} no-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
                             <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                               <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                 <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
@@ -484,9 +484,9 @@
                   </span>
                 </span>
                 <span className="ObjectPage-actions---">
-                  <Button type="Default">
-                    <WithWebComponent theme={{...}} type="Default">
-                      <ui5-button type="Default" class="">
+                  <Button design="Default">
+                    <WithWebComponent theme={{...}} design="Default">
+                      <ui5-button design="Default" class="">
                         Action
                       </ui5-button>
                     </WithWebComponent>
@@ -497,9 +497,9 @@
                 <div className="ObjectPage-headerContent---">
                   <span className="ObjectPage-headerCustomContent---">
                     <div style={{...}}>
-                      <Link href="https://www.sap.com" target="" type="Default">
-                        <WithWebComponent theme={{...}} href="https://www.sap.com" target="" type="Default">
-                          <ui5-link href="https://www.sap.com" target="" type="Default" class="">
+                      <Link href="https://www.sap.com" design="Default">
+                        <WithWebComponent theme={{...}} href="https://www.sap.com" design="Default">
+                          <ui5-link href="https://www.sap.com" design="Default" class="">
                             www.myurl.com
                           </ui5-link>
                         </WithWebComponent>
@@ -542,9 +542,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-1" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className="ObjectPage-active---" onClick={[Function]}>
                         <a className="ObjectPage-active---" onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 1
                               </ui5-button>
                             </WithWebComponent>
@@ -559,9 +559,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-2" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className={[undefined]} onClick={[Function]}>
                         <a className={[undefined]} onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 2
                               </ui5-button>
                             </WithWebComponent>
@@ -576,9 +576,9 @@
                     <Link spy={true} smooth={true} activeClass="ObjectPage-active---" to="ObjectPageSection-3" containerId="ObjectPageSections" offset={0}>
                       <LinkElement className={[undefined]} onClick={[Function]}>
                         <a className={[undefined]} onClick={[Function]}>
-                          <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                              <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                          <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                            <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                              <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                                 Test 3
                               </ui5-button>
                             </WithWebComponent>
@@ -699,9 +699,9 @@
                   </span>
                 </span>
                 <span className="ObjectPage-actions---">
-                  <Button type="Default">
-                    <WithWebComponent theme={{...}} type="Default">
-                      <ui5-button type="Default" class="">
+                  <Button design="Default">
+                    <WithWebComponent theme={{...}} design="Default">
+                      <ui5-button design="Default" class="">
                         Action
                       </ui5-button>
                     </WithWebComponent>
@@ -712,9 +712,9 @@
                 <div className="ObjectPage-headerContent---">
                   <span className="ObjectPage-headerCustomContent---">
                     <div style={{...}}>
-                      <Link href="https://www.sap.com" target="" type="Default">
-                        <WithWebComponent theme={{...}} href="https://www.sap.com" target="" type="Default">
-                          <ui5-link href="https://www.sap.com" target="" type="Default" class="">
+                      <Link href="https://www.sap.com" design="Default">
+                        <WithWebComponent theme={{...}} href="https://www.sap.com" design="Default">
+                          <ui5-link href="https://www.sap.com" design="Default" class="">
                             www.myurl.com
                           </ui5-link>
                         </WithWebComponent>
@@ -750,9 +750,9 @@
                   </span>
                 </div>
                 <div className="ObjectPage-hideHeaderContent---">
-                  <Button style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} type="Default">
-                    <WithWebComponent theme={{...}} style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} type="Default">
-                      <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" type="Default" class="" />
+                  <Button style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} design="Default">
+                    <WithWebComponent theme={{...}} style={{...}} icon="sap-icon://navigation-up-arrow" onPress={[Function]} design="Default">
+                      <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" design="Default" class="" />
                     </WithWebComponent>
                   </Button>
                 </div>
@@ -760,9 +760,9 @@
               <section className="ObjectPage-anchorBar---" role="navigation">
                 <ObjectPageAnchor section={{...}} index={0} mode="IconTabBar" selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer--- ObjectPage-iconTabModeSelected---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                           Test 1
                         </ui5-button>
                       </WithWebComponent>
@@ -771,9 +771,9 @@
                 </ObjectPageAnchor>
                 <ObjectPageAnchor section={{...}} index={1} mode="IconTabBar" selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                           Test 2
                         </ui5-button>
                       </WithWebComponent>
@@ -782,9 +782,9 @@
                 </ObjectPageAnchor>
                 <ObjectPageAnchor section={{...}} index={2} mode="IconTabBar" selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                           Test 3
                         </ui5-button>
                       </WithWebComponent>
@@ -793,14 +793,14 @@
                 </ObjectPageAnchor>
                 <ObjectPageAnchor section={{...}} index={3} mode="IconTabBar" selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                           Test 4
                         </ui5-button>
                       </WithWebComponent>
                     </Button>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
                       <div style={{...}} onClick={[Function]}>
                         <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
                           <WithWebComponent theme={{...}} src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
@@ -808,9 +808,9 @@
                           </WithWebComponent>
                         </Icon>
                       </div>
-                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                          <ui5-popover hide-header={true} hide-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
+                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                          <ui5-popover no-header={true} no-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
                             <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                               <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                 <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
@@ -863,14 +863,14 @@
                 </ObjectPageAnchor>
                 <ObjectPageAnchor section={{...}} index={4} mode="IconTabBar" selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---">
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---">
                           Test 5
                         </ui5-button>
                       </WithWebComponent>
                     </Button>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
                       <div style={{...}} onClick={[Function]}>
                         <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
                           <WithWebComponent theme={{...}} src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
@@ -878,9 +878,9 @@
                           </WithWebComponent>
                         </Icon>
                       </div>
-                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} hideArrow={true} hideHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
-                          <ui5-popover hide-header={true} hide-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
+                      <WithTheme(WithWebComponent) open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                        <WithWebComponent theme={{...}} open={false} placementType="Bottom" onAfterClose={[Function]} noArrow={true} noHeader={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
+                          <ui5-popover no-header={true} no-arrow={true} open={false} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
                             <WithTheme(WithWebComponent) onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                               <WithWebComponent theme={{...}} onItemPress={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
                                 <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
@@ -977,7 +977,7 @@
 #### `Just Some Sections`
 
 ```
-<header class="ObjectPage-header---"><header class="ObjectPage-titleBar---"><span class="ObjectPage-container---"><h1 class="ObjectPage-title---"></h1><span class="ObjectPage-subTitle---"></span></span><span class="ObjectPage-actions---"></span></header><div><div class="ObjectPage-headerContent---"></div><div class="ObjectPage-hideHeaderContent---"></div></div><section class="ObjectPage-anchorBar---" role="navigation"><div class="ObjectPage-anchorButtonContainer--- ObjectPage-iconTabModeSelected---"><ui5-button type="Transparent" class="ObjectPage-anchorButton---"></ui5-button></div><div class="ObjectPage-anchorButtonContainer---"><ui5-button type="Transparent" class="ObjectPage-anchorButton---"></ui5-button></div></section></header><section id="ObjectPageSections" class="Component-sectionsContainer---"><section id="ObjectPageSection-1" role="region"><div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title--- ObjectPageSection-uppercase---"></div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">Test</div></div></section><div></div></section>
+<header class="ObjectPage-header---"><header class="ObjectPage-titleBar---"><span class="ObjectPage-container---"><h1 class="ObjectPage-title---"></h1><span class="ObjectPage-subTitle---"></span></span><span class="ObjectPage-actions---"></span></header><div><div class="ObjectPage-headerContent---"></div><div class="ObjectPage-hideHeaderContent---"></div></div><section class="ObjectPage-anchorBar---" role="navigation"><div class="ObjectPage-anchorButtonContainer--- ObjectPage-iconTabModeSelected---"><ui5-button design="Transparent" class="ObjectPage-anchorButton---"></ui5-button></div><div class="ObjectPage-anchorButtonContainer---"><ui5-button design="Transparent" class="ObjectPage-anchorButton---"></ui5-button></div></section></header><section id="ObjectPageSections" class="Component-sectionsContainer---"><section id="ObjectPageSection-1" role="region"><div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title--- ObjectPageSection-uppercase---"></div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">Test</div></div></section><div></div></section>
 ```
 
 #### `Not crashing with 1 section`
@@ -1004,9 +1004,9 @@
               <section className="ObjectPage-anchorBar---" role="navigation">
                 <ObjectPageAnchor section={{...}} index={0} mode="IconTabBar" selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer--- ObjectPage-iconTabModeSelected---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---" />
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---" />
                       </WithWebComponent>
                     </Button>
                   </div>
@@ -1110,18 +1110,18 @@
               <section className="ObjectPage-anchorBar---" role="navigation">
                 <ObjectPageAnchor section={{...}} index={0} mode="IconTabBar" selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---" />
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---" />
                       </WithWebComponent>
                     </Button>
                   </div>
                 </ObjectPageAnchor>
                 <ObjectPageAnchor section={{...}} index={1} mode="IconTabBar" selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
                   <div className="ObjectPage-anchorButtonContainer--- ObjectPage-iconTabModeSelected---">
-                    <Button className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" type="Transparent" onPress={[Function]}>
-                        <ui5-button type="Transparent" class="ObjectPage-anchorButton---" />
+                    <Button className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                      <WithWebComponent theme={{...}} className="ObjectPage-anchorButton---" design="Transparent" onPress={[Function]}>
+                        <ui5-button design="Transparent" class="ObjectPage-anchorButton---" />
                       </WithWebComponent>
                     </Button>
                   </div>
diff --git a/packages/fiori3/__karma_snapshots__/Option.md b/packages/fiori3/__karma_snapshots__/Option.md
new file mode 100644
index 00000000000..12ed625a466
--- /dev/null
+++ b/packages/fiori3/__karma_snapshots__/Option.md
@@ -0,0 +1,16 @@
+# `Option`
+
+#### `Basic Test (generated)`
+
+```
+<ThemeProvider withToastContainer={false}>
+  <ThemeProvider jss={{...}} theme={{...}}>
+    <Option icon={{...}}>
+      <WithWebComponent theme={{...}} icon={{...}}>
+        <ui5-option icon={{...}} class="" />
+      </WithWebComponent>
+    </Option>
+  </ThemeProvider>
+</ThemeProvider>
+```
+
diff --git a/packages/fiori3/__karma_snapshots__/Page.md b/packages/fiori3/__karma_snapshots__/Page.md
index afa1b8ff8c3..35fefb74c03 100644
--- a/packages/fiori3/__karma_snapshots__/Page.md
+++ b/packages/fiori3/__karma_snapshots__/Page.md
@@ -3,7 +3,7 @@
 #### `Basic Page`
 
 ```
-<div class="Page-pageContainer--- Page-pageWithHeader--- Page-pageWithFooter--- Page-backgroundStandard---"><header class="Page-pageHeader--- Page-baseBar---"><div data-bar-part="Root" class="Bar-bar---"><div data-bar-part="Left" class="Bar-left---"><ui5-button icon="navigation-left-arrow" type="Transparent" class></ui5-button></div><div data-bar-part="Center" class="Bar-center---"><div class="Bar-inner---"><ui5-title level="H5" class>Page Demo</ui5-title></div></div><div data-bar-part="Right" class="Bar-right---"></div></div></header><section class="Page-contentSection---">Page Content</section><footer class="Page-pageFooter--- Page-baseBar---"></footer></div>
+<div class="Page-pageContainer--- Page-pageWithHeader--- Page-pageWithFooter--- Page-backgroundStandard---"><header class="Page-pageHeader--- Page-baseBar---"><div data-bar-part="Root" class="Bar-bar---"><div data-bar-part="Left" class="Bar-left---"><ui5-button icon="navigation-left-arrow" design="Transparent" class></ui5-button></div><div data-bar-part="Center" class="Bar-center---"><div class="Bar-inner---"><ui5-title level="H5" class>Page Demo</ui5-title></div></div><div data-bar-part="Right" class="Bar-right---"></div></div></header><section class="Page-contentSection---">Page Content</section><footer class="Page-pageFooter--- Page-baseBar---"></footer></div>
 ```
 
 #### `Basic Page w/o back button`
diff --git a/packages/fiori3/__karma_snapshots__/StandardListItem.md b/packages/fiori3/__karma_snapshots__/StandardListItem.md
index 9bcd2de31ff..1c2fa8cc203 100644
--- a/packages/fiori3/__karma_snapshots__/StandardListItem.md
+++ b/packages/fiori3/__karma_snapshots__/StandardListItem.md
@@ -5,9 +5,9 @@
 ```
 <ThemeProvider withToastContainer={false}>
   <ThemeProvider jss={{...}} theme={{...}}>
-    <StandardListItem type="Active" description="" icon={{...}} image={{...}}>
-      <WithWebComponent theme={{...}} type="Active" description="" icon={{...}} image={{...}}>
-        <ui5-li type="Active" description="" icon={{...}} image={{...}} class="" />
+    <StandardListItem type="Active" infoState="None">
+      <WithWebComponent theme={{...}} type="Active" infoState="None">
+        <ui5-li type="Active" info-state="None" class="" />
       </WithWebComponent>
     </StandardListItem>
   </ThemeProvider>
diff --git a/packages/fiori3/__karma_snapshots__/Switch.md b/packages/fiori3/__karma_snapshots__/Switch.md
index 661bec0f7d5..3797be335c6 100644
--- a/packages/fiori3/__karma_snapshots__/Switch.md
+++ b/packages/fiori3/__karma_snapshots__/Switch.md
@@ -1,5 +1,19 @@
 # `Switch`
 
+#### `Basic Test (generated)`
+
+```
+<ThemeProvider withToastContainer={false}>
+  <ThemeProvider jss={{...}} theme={{...}}>
+    <Switch>
+      <WithWebComponent theme={{...}}>
+        <ui5-switch class="" />
+      </WithWebComponent>
+    </Switch>
+  </ThemeProvider>
+</ThemeProvider>
+```
+
 #### `Basic Rendering`
 
 ```
diff --git a/packages/fiori3/__karma_snapshots__/ToggleButton.md b/packages/fiori3/__karma_snapshots__/ToggleButton.md
index d4bd9763533..d16e6cfcc50 100644
--- a/packages/fiori3/__karma_snapshots__/ToggleButton.md
+++ b/packages/fiori3/__karma_snapshots__/ToggleButton.md
@@ -5,9 +5,9 @@
 ```
 <ThemeProvider withToastContainer={false}>
   <ThemeProvider jss={{...}} theme={{...}}>
-    <ToggleButton type="Default">
-      <WithWebComponent theme={{...}} type="Default">
-        <ui5-togglebutton type="Default" class="" />
+    <ToggleButton design="Default">
+      <WithWebComponent theme={{...}} design="Default">
+        <ui5-togglebutton design="Default" class="" />
       </WithWebComponent>
     </ToggleButton>
   </ThemeProvider>
diff --git a/packages/fiori3/__karma_snapshots__/Token.md b/packages/fiori3/__karma_snapshots__/Token.md
index 305939aea8c..a31647bf554 100644
--- a/packages/fiori3/__karma_snapshots__/Token.md
+++ b/packages/fiori3/__karma_snapshots__/Token.md
@@ -1,5 +1,19 @@
 # `Token`
 
+#### `Basic Test (generated)`
+
+```
+<ThemeProvider withToastContainer={false}>
+  <ThemeProvider jss={{...}} theme={{...}}>
+    <Token>
+      <WithWebComponent theme={{...}}>
+        <ui5-token class="" />
+      </WithWebComponent>
+    </Token>
+  </ThemeProvider>
+</ThemeProvider>
+```
+
 #### `first`
 
 ```
diff --git a/packages/fiori3/__karma_snapshots__/Tokenizer.md b/packages/fiori3/__karma_snapshots__/Tokenizer.md
index b6857394e91..68717ab636b 100644
--- a/packages/fiori3/__karma_snapshots__/Tokenizer.md
+++ b/packages/fiori3/__karma_snapshots__/Tokenizer.md
@@ -1,5 +1,19 @@
 # `Tokenizer`
 
+#### `Basic Test (generated)`
+
+```
+<ThemeProvider withToastContainer={false}>
+  <ThemeProvider jss={{...}} theme={{...}}>
+    <Tokenizer>
+      <WithWebComponent theme={{...}}>
+        <ui5-tokenizer class="" />
+      </WithWebComponent>
+    </Tokenizer>
+  </ThemeProvider>
+</ThemeProvider>
+```
+
 #### `Render without crashing`
 
 ```
diff --git a/packages/fiori3/__karma_snapshots__/VariantManagement.md b/packages/fiori3/__karma_snapshots__/VariantManagement.md
index 2f1b83dfaee..749b5875220 100644
--- a/packages/fiori3/__karma_snapshots__/VariantManagement.md
+++ b/packages/fiori3/__karma_snapshots__/VariantManagement.md
@@ -20,9 +20,9 @@
                     </WithWebComponent>
                   </Title>
                 </span>
-                <Button type="Transparent" icon="navigation-down-arrow">
-                  <WithWebComponent theme={{...}} type="Transparent" icon="navigation-down-arrow">
-                    <ui5-button type="Transparent" icon="navigation-down-arrow" class="" />
+                <Button design="Transparent" icon="navigation-down-arrow">
+                  <WithWebComponent theme={{...}} design="Transparent" icon="navigation-down-arrow">
+                    <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
                   </WithWebComponent>
                 </Button>
               </div>
@@ -30,9 +30,9 @@
             <WithTheme(WithWebComponent) open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
               <WithWebComponent theme={{...}} open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center" innerComponentRef={[Function]}>
                 <ui5-popover open={false} header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" inner-component-ref={[Function]} class="">
-                  <Button className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                    <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} type="Emphasized" data-ui5-slot="footer">
-                      <ui5-button type="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
+                  <Button className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                    <WithWebComponent theme={{...}} className="VariantManagement-footer---" onPress={[Function]} design="Emphasized" data-ui5-slot="footer">
+                      <ui5-button design="Emphasized" data-ui5-slot="footer" class="VariantManagement-footer---">
                         Cancel
                       </ui5-button>
                     </WithWebComponent>
@@ -40,16 +40,16 @@
                   <WithTheme(WithWebComponent) onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                     <WithWebComponent theme={{...}} onItemPress={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
                       <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
-                        <StandardListItem style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                          <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} description="" icon={{...}} image={{...}}>
-                            <ui5-li selected={true} style={{...}} data-key="1" type="Active" description="" icon={{...}} image={{...}} class="">
+                        <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                          <WithWebComponent theme={{...}} style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                            <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
                               Variant 1
                             </ui5-li>
                           </WithWebComponent>
                         </StandardListItem>
-                        <StandardListItem style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                          <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} description="" icon={{...}} image={{...}}>
-                            <ui5-li style={{...}} data-key="2" type="Active" description="" icon={{...}} image={{...}} class="">
+                        <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                          <WithWebComponent theme={{...}} style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                            <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
                               Variant 2
                             </ui5-li>
                           </WithWebComponent>
diff --git a/packages/fiori3/package.json b/packages/fiori3/package.json
index 2567922ce10..b47edcc8c1d 100644
--- a/packages/fiori3/package.json
+++ b/packages/fiori3/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@ui5-webcomponents-react/base": "0.3.2-rc.3",
-    "@ui5/webcomponents": "0.12.0",
+    "@ui5/webcomponents": "0.13.1",
     "react-scroll": "^1.7.11",
     "react-toastify": "^5.0.1"
   },
diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js
index 13156c5e5c1..0c88cbfcd41 100644
--- a/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js
+++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js
@@ -4,12 +4,12 @@ const fiori3Enums = path.resolve(__dirname, '..', '..', 'src', 'enums');
 
 const f4rEnums = {
   ValueState: require(path.resolve(fiori3Enums, 'ValueState.ts')).ValueState,
-  ButtonType: require(path.resolve(fiori3Enums, 'ButtonType.ts')).ButtonType,
+  ButtonDesign: require(path.resolve(fiori3Enums, 'ButtonDesign.ts')).ButtonDesign,
   MessageStripType: require(path.resolve(fiori3Enums, 'MessageStripType.ts')).MessageStripType,
   CalendarType: require(path.resolve(fiori3Enums, 'CalendarType.ts')).CalendarType,
   PopoverHorizontalAlign: require(path.resolve(fiori3Enums, 'PopoverHorizontalAlign.ts')).PopoverHorizontalAlign,
   InputType: require(path.resolve(fiori3Enums, 'InputType.ts')).InputType,
-  LinkType: require(path.resolve(fiori3Enums, 'LinkType.ts')).LinkType,
+  LinkDesign: require(path.resolve(fiori3Enums, 'LinkDesign.ts')).LinkDesign,
   ListMode: require(path.resolve(fiori3Enums, 'ListMode.ts')).ListMode,
   ListItemTypes: require(path.resolve(fiori3Enums, 'ListItemTypes.ts')).ListItemTypes,
   ListSeparators: require(path.resolve(fiori3Enums, 'ListSeparators.ts')).ListSeparators,
diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js
index c4407090ecc..51332a815b9 100644
--- a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js
+++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js
@@ -1,7 +1,7 @@
-import UI5ButtonType from '@ui5/webcomponents/dist/types/ButtonType';
+import UI5ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign';
 import UI5Icon from '@ui5/webcomponents/dist/Icon';
 import UI5InputType from '@ui5/webcomponents/dist/types/InputType';
-import UI5LinkType from '@ui5/webcomponents/dist/types/LinkType';
+import UI5LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign';
 import UI5ListMode from '@ui5/webcomponents/dist/types/ListMode';
 import UI5ListItemTypes from '@ui5/webcomponents/dist/types/ListItemType';
 import UI5PopoverPlacementTypes from '@ui5/webcomponents/dist/types/PopoverPlacementType';
@@ -20,9 +20,9 @@ import UI5CalendarType from '@ui5/webcomponents-base/src/dates/CalendarType';
 import TimelineItem from '@ui5/webcomponents/dist/TimelineItem';
 
 const mappings = {
-  [UI5ButtonType]: {
-    importStatement: "import { ButtonType } from '../../lib/ButtonType';",
-    tsType: 'ButtonType',
+  [UI5ButtonDesign]: {
+    importStatement: "import { ButtonDesign } from '../../lib/ButtonDesign';",
+    tsType: 'ButtonDesign',
     isEnum: true
   },
   [UI5PopoverPlacementTypes]: {
@@ -45,9 +45,9 @@ const mappings = {
     tsType: 'PopoverVerticalAlign',
     isEnum: true
   },
-  [UI5LinkType]: {
-    importStatement: "import { LinkType } from '../../lib/LinkType';",
-    tsType: 'LinkType',
+  [UI5LinkDesign]: {
+    importStatement: "import { LinkDesign } from '../../lib/LinkDesign';",
+    tsType: 'LinkDesign',
     isEnum: true
   },
   [UI5SemanticColors]: {
diff --git a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentTests.js b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentTests.js
index 9b847970c98..54c5dcfbd24 100644
--- a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentTests.js
+++ b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentTests.js
@@ -1,6 +1,6 @@
+const { readdirSync, statSync, writeFileSync, existsSync } = require('fs');
 const path = require('path');
 const PATHS = require('../../../../config/paths');
-const { readdirSync, statSync, writeFileSync } = require('fs');
 
 const WEB_COMPONENTS_ROOT_DIR = path.join(PATHS.packages, 'fiori3', 'src', 'webComponents');
 
@@ -10,12 +10,15 @@ const webComponents = readdirSync(WEB_COMPONENTS_ROOT_DIR).filter((f) =>
 
 webComponents.forEach((component) => {
   const absPath = path.join(WEB_COMPONENTS_ROOT_DIR, component, `${component}.karma.tsx`);
+  if (existsSync(absPath)) {
+    return;
+  }
   const jsxContent = `
 import React from 'react';
 import { expect, use } from 'chai';
 import { matchSnapshot } from "chai-karma-snapshot";
-import { ${component} } from './index';
-import { mountThemedComponent } from "../../../test/utils";
+import { ${component} } from '../../lib/${component}';
+import { mountThemedComponent } from "@shared/tests/utils";
 
 use(matchSnapshot);
 
diff --git a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js
index d5acf945270..58a916c9a00 100644
--- a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js
+++ b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js
@@ -94,4 +94,5 @@ function executeQueue() {
   await page.goto(fileUrl('./scripts/wrapperGeneration/puppeteer.html'));
   // await browser.waitForFunction('false');
   await browser.close().then(executeQueue);
+  require('./generateWebComponentTests');
 })();
diff --git a/packages/fiori3/src/components/ActionSheet/index.tsx b/packages/fiori3/src/components/ActionSheet/index.tsx
index 7336a61ee73..e678b15c0d7 100644
--- a/packages/fiori3/src/components/ActionSheet/index.tsx
+++ b/packages/fiori3/src/components/ActionSheet/index.tsx
@@ -2,7 +2,7 @@ import { Device, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/b
 import React, { Children, cloneElement, Component, ReactElement, ReactNode } from 'react';
 import { ClassProps } from '../../interfaces/ClassProps';
 import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { PlacementType } from '../../lib/PlacementType';
 import { Popover } from '../../lib/Popover';
 import { ButtonPropTypes } from '../../webComponents/Button';
@@ -42,7 +42,7 @@ export class ActionSheet extends Component<ActionSheetPropTypes, ActionSheetStat
             style: {
               justifyContent: 'flex-start'
             },
-            type: ButtonType.Transparent,
+            design: ButtonDesign.Transparent,
             className: classes.actionButton,
             onPress: this.onActionButtonClicked(element.props.onPress)
           })}
@@ -68,7 +68,7 @@ export class ActionSheet extends Component<ActionSheetPropTypes, ActionSheetStat
 
     return (
       <Popover
-        hideHeader
+        noHeader
         innerComponentRef={this.getPopoverRef}
         openBy={openBy}
         placementType={placement}
diff --git a/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx b/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx
index 9133e677eac..7764590f508 100644
--- a/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx
@@ -80,8 +80,8 @@ export class ColumnHeaderModal extends Component<ColumnHeaderModalProperties> {
       <Popover
         openByStyle={{ flex: '100 0 auto', width: '100px' }}
         openBy={this.props.openBy}
-        hideHeader
-        hideArrow
+        noHeader
+        noArrow
         horizontalAlign={PopoverHorizontalAlign.Left}
         placementType={PlacementType.Bottom}
         innerComponentRef={this.handlePopoverRef}
diff --git a/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx b/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx
index b9a484222d6..a9ab4f8ddfc 100644
--- a/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx
@@ -5,7 +5,7 @@ import { JSSTheme } from '../../../interfaces/JSSTheme';
 import { ContentDensity } from '../../../lib/ContentDensity';
 import { Label } from '../../../lib/Label';
 import { Link } from '../../../lib/Link';
-import { LinkType } from '../../../lib/LinkType';
+import { LinkDesign } from '../../../lib/LinkDesign';
 
 enum NavigationModes {
   rightArrowPress,
@@ -42,7 +42,7 @@ export const LinkHOC: FC<LinkHOCProps> = (props) => {
     <Link
       style={{ paddingRight: '0.2rem' }}
       onPress={onClickHandler(props)}
-      type={page === selectedPage ? LinkType.Emphasized : LinkType.Default}
+      design={page === selectedPage ? LinkDesign.Emphasized : LinkDesign.Default}
     >
       {children.toString()}
     </Link>
diff --git a/packages/fiori3/src/components/FilterBar/index.tsx b/packages/fiori3/src/components/FilterBar/index.tsx
index 8be8b85c9ae..c29fd87e1ec 100644
--- a/packages/fiori3/src/components/FilterBar/index.tsx
+++ b/packages/fiori3/src/components/FilterBar/index.tsx
@@ -3,7 +3,7 @@ import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
 import { ClassProps } from '../../interfaces/ClassProps';
 import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
 import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import styles from './FilterBar.jss';
 
 export interface FilterBarPropTypes extends Fiori3CommonProps {
@@ -38,7 +38,7 @@ export class FilterBar extends PureComponent<FilterBarPropTypes> {
           {renderVariants && renderVariants()}
           {renderSearch && <div className={classes.vLine}> {renderSearch()} </div>}
           <div className={classes.headerRowRight}>
-            <Button onPress={this.handelHideFilterBar} type={ButtonType.Transparent}>
+            <Button onPress={this.handelHideFilterBar} design={ButtonDesign.Transparent}>
               {this.state.showFilters ? 'Hide Filter Bar' : 'Show Filter Bar'}
             </Button>
           </div>
diff --git a/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx b/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx
index e02855107f7..de0ad1440f8 100644
--- a/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx
+++ b/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { MessageBoxActions } from '../../lib/MessageBoxActions';
 
 export class MessageBoxButton extends PureComponent<{
@@ -19,7 +19,7 @@ export class MessageBoxButton extends PureComponent<{
           minWidth: '4rem'
         }}
         onPress={this.handleClick}
-        type={emphasize ? ButtonType.Emphasized : ButtonType.Transparent}
+        design={emphasize ? ButtonDesign.Emphasized : ButtonDesign.Transparent}
       >
         {this.props.action}
       </Button>
diff --git a/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx b/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx
index 8d856b27c04..a5d735a8cec 100644
--- a/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx
+++ b/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-scroll';
 import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys';
 import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { CustomListItem } from '../../lib/CustomListItem';
 import { Icon } from '../../lib/Icon';
 import { Label } from '../../lib/Label';
@@ -107,7 +107,7 @@ export class ObjectPageAnchor extends Component<ObjectPageAnchorPropTypes, Objec
     const subSectionsAvailable = this.subSectionsAvailable();
 
     const titleButton = (
-      <Button className={classes.anchorButton} type={ButtonType.Transparent} onPress={this.handleAnchorButtonClick}>
+      <Button className={classes.anchorButton} design={ButtonDesign.Transparent} onPress={this.handleAnchorButtonClick}>
         {section.props.title}
       </Button>
     );
@@ -153,8 +153,8 @@ export class ObjectPageAnchor extends Component<ObjectPageAnchorPropTypes, Objec
             placementType={PlacementType.Bottom}
             openBy={navigationIcon}
             onAfterClose={this.closeModal}
-            hideArrow
-            hideHeader
+            noArrow
+            noHeader
           >
             <List onItemPress={this.onSubSectionClick}>
               {this.props.section.props.children
diff --git a/packages/fiori3/src/components/ObjectPage/demo.stories.tsx b/packages/fiori3/src/components/ObjectPage/demo.stories.tsx
index b286b019a75..d5d343d9829 100644
--- a/packages/fiori3/src/components/ObjectPage/demo.stories.tsx
+++ b/packages/fiori3/src/components/ObjectPage/demo.stories.tsx
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { propTablesExclude } from '../../../../docs/.storybook/config';
 import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { Label } from '../../lib/Label';
 import { Link } from '../../lib/Link';
 import { ObjectPage } from '../../lib/ObjectPage';
@@ -29,7 +29,7 @@ const renderDemo = () => {
       title={text('title', 'Object Page Title')}
       subTitle={text('subTitle', 'Object Page Sub Title')}
       headerActions={[
-        <Button key="1" type={ButtonType.Emphasized} onPress={action('onHeaderAction1Pressed')}>
+        <Button key="1" design={ButtonDesign.Emphasized} onPress={action('onHeaderAction1Pressed')}>
           Primary Action
         </Button>,
         <Button key="2" onPress={action('onHeaderAction2Pressed')}>
diff --git a/packages/fiori3/src/components/Page/index.tsx b/packages/fiori3/src/components/Page/index.tsx
index 878fc453d0a..23843d6d69e 100644
--- a/packages/fiori3/src/components/Page/index.tsx
+++ b/packages/fiori3/src/components/Page/index.tsx
@@ -4,7 +4,7 @@ import { ClassProps } from '../../interfaces/ClassProps';
 import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
 import { Bar } from '../../lib/Bar';
 import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { PageBackgroundDesign } from '../../lib/PageBackgroundDesign';
 import { Title } from '../../lib/Title';
 import { TitleLevel } from '../../lib/TitleLevel';
@@ -43,7 +43,7 @@ export class Page extends Component<PagePropTypes> {
 
   private renderBackButton = () => {
     return (
-      <Button icon="navigation-left-arrow" type={ButtonType.Transparent} onPress={this.handleNavBackButtonPress} />
+      <Button icon="navigation-left-arrow" design={ButtonDesign.Transparent} onPress={this.handleNavBackButtonPress} />
     );
   };
 
diff --git a/packages/fiori3/src/components/VariantManagement/index.tsx b/packages/fiori3/src/components/VariantManagement/index.tsx
index 18573d793ea..095fd4d9a6b 100644
--- a/packages/fiori3/src/components/VariantManagement/index.tsx
+++ b/packages/fiori3/src/components/VariantManagement/index.tsx
@@ -4,7 +4,7 @@ import { ClassProps } from '../../interfaces/ClassProps';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { JSSTheme } from '../../interfaces/JSSTheme';
 import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { List } from '../../lib/List';
 import { ListItemTypes } from '../../lib/ListItemTypes';
 import { ListMode } from '../../lib/ListMode';
@@ -112,7 +112,7 @@ export class VariantManagement extends Component<VariantManagementPropTypes, Var
         <span className={classes.VariantManagementText}>
           <Title level={level}>{selectedItem.label}</Title>
         </span>
-        <Button type={ButtonType.Transparent} icon={'navigation-down-arrow'} />
+        <Button design={ButtonDesign.Transparent} icon={'navigation-down-arrow'} />
       </div>
     );
   }
@@ -124,7 +124,7 @@ export class VariantManagement extends Component<VariantManagementPropTypes, Var
         className={classes.footer}
         key="btn-cancel"
         onPress={this.handleCancelButtonClick}
-        type={ButtonType.Emphasized}
+        design={ButtonDesign.Emphasized}
       >
         Cancel
       </Button>
diff --git a/packages/fiori3/src/enums/ButtonType.ts b/packages/fiori3/src/enums/ButtonDesign.ts
similarity index 82%
rename from packages/fiori3/src/enums/ButtonType.ts
rename to packages/fiori3/src/enums/ButtonDesign.ts
index e27c71a2a7f..fb6a27e1de5 100644
--- a/packages/fiori3/src/enums/ButtonType.ts
+++ b/packages/fiori3/src/enums/ButtonDesign.ts
@@ -1,4 +1,4 @@
-export enum ButtonType {
+export enum ButtonDesign {
   Default = 'Default',
   Transparent = 'Transparent',
   Accept = 'Positive',
diff --git a/packages/fiori3/src/enums/LinkType.ts b/packages/fiori3/src/enums/LinkDesign.ts
similarity index 82%
rename from packages/fiori3/src/enums/LinkType.ts
rename to packages/fiori3/src/enums/LinkDesign.ts
index ac686edae6c..d909b965aa6 100644
--- a/packages/fiori3/src/enums/LinkType.ts
+++ b/packages/fiori3/src/enums/LinkDesign.ts
@@ -1,5 +1,5 @@
 // introduced because of web components
-export enum LinkType {
+export enum LinkDesign {
   Default = 'Default',
   Subtle = 'Subtle',
   Emphasized = 'Emphasized'
diff --git a/packages/fiori3/src/index.ts b/packages/fiori3/src/index.ts
index b992b69faae..ac8392617cb 100644
--- a/packages/fiori3/src/index.ts
+++ b/packages/fiori3/src/index.ts
@@ -12,8 +12,9 @@ import { AvatarSize } from './lib/AvatarSize';
 import { Badge } from './lib/Badge';
 import { Bar } from './lib/Bar';
 import { BusyIndicator } from './lib/BusyIndicator';
+import { BusyIndicatorType } from './lib/BusyIndicatorType';
 import { Button } from './lib/Button';
-import { ButtonType } from './lib/ButtonType';
+import { ButtonDesign } from './lib/ButtonDesign';
 import { Calendar } from './lib/Calendar';
 import { CalendarHeader } from './lib/CalendarHeader';
 import { CalendarType } from './lib/CalendarType';
@@ -43,7 +44,7 @@ import { Input } from './lib/Input';
 import { InputType } from './lib/InputType';
 import { Label } from './lib/Label';
 import { Link } from './lib/Link';
-import { LinkType } from './lib/LinkType';
+import { LinkDesign } from './lib/LinkDesign';
 import { List } from './lib/List';
 import { ListItem } from './lib/ListItem';
 import { ListItemBase } from './lib/ListItemBase';
@@ -64,6 +65,7 @@ import { ObjectPageMode } from './lib/ObjectPageMode';
 import { ObjectPageSection } from './lib/ObjectPageSection';
 import { ObjectPageSubSection } from './lib/ObjectPageSubSection';
 import { ObjectStatus } from './lib/ObjectStatus';
+import { Option } from './lib/Option';
 import { Page } from './lib/Page';
 import { PageBackgroundDesign } from './lib/PageBackgroundDesign';
 import { Panel } from './lib/Panel';
@@ -88,11 +90,11 @@ import { Switch } from './lib/Switch';
 import { Tab } from './lib/Tab';
 import { TabBase } from './lib/TabBase';
 import { TabContainer } from './lib/TabContainer';
+import { TabSeparator } from './lib/TabSeparator';
 import { Table } from './lib/Table';
 import { TableCell } from './lib/TableCell';
 import { TableColumn } from './lib/TableColumn';
 import { TableRow } from './lib/TableRow';
-import { TabSeparator } from './lib/TabSeparator';
 import { Text } from './lib/Text';
 import { TextAlign } from './lib/TextAlign';
 import { TextArea } from './lib/TextArea';
@@ -121,8 +123,9 @@ export {
   Badge,
   Bar,
   BusyIndicator,
+  BusyIndicatorType,
   Button,
-  ButtonType,
+  ButtonDesign,
   Calendar,
   CalendarHeader,
   CalendarType,
@@ -152,7 +155,7 @@ export {
   InputType,
   Label,
   Link,
-  LinkType,
+  LinkDesign,
   List,
   ListItem,
   ListItemBase,
@@ -173,6 +176,7 @@ export {
   ObjectPageSection,
   ObjectPageSubSection,
   ObjectStatus,
+  Option,
   Page,
   PageBackgroundDesign,
   Panel,
diff --git a/packages/fiori3/src/lib/ButtonDesign.ts b/packages/fiori3/src/lib/ButtonDesign.ts
new file mode 100644
index 00000000000..33e0e3d031b
--- /dev/null
+++ b/packages/fiori3/src/lib/ButtonDesign.ts
@@ -0,0 +1,3 @@
+import { ButtonDesign } from '../enums/ButtonDesign';
+
+export { ButtonDesign };
diff --git a/packages/fiori3/src/lib/ButtonType.ts b/packages/fiori3/src/lib/ButtonType.ts
deleted file mode 100644
index 08ecc0a3fe5..00000000000
--- a/packages/fiori3/src/lib/ButtonType.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ButtonType } from '../enums/ButtonType';
-
-export { ButtonType };
diff --git a/packages/fiori3/src/lib/LinkDesign.ts b/packages/fiori3/src/lib/LinkDesign.ts
new file mode 100644
index 00000000000..3f9e9085e0b
--- /dev/null
+++ b/packages/fiori3/src/lib/LinkDesign.ts
@@ -0,0 +1,3 @@
+import { LinkDesign } from '../enums/LinkDesign';
+
+export { LinkDesign };
diff --git a/packages/fiori3/src/lib/LinkType.ts b/packages/fiori3/src/lib/LinkType.ts
deleted file mode 100644
index 09f5e979f05..00000000000
--- a/packages/fiori3/src/lib/LinkType.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { LinkType } from '../enums/LinkType';
-
-export { LinkType };
diff --git a/packages/fiori3/src/lib/Option.ts b/packages/fiori3/src/lib/Option.ts
new file mode 100644
index 00000000000..68a944e08ce
--- /dev/null
+++ b/packages/fiori3/src/lib/Option.ts
@@ -0,0 +1,3 @@
+import { Option } from '../webComponents/Option';
+
+export { Option };
diff --git a/packages/fiori3/src/webComponents/Badge/index.tsx b/packages/fiori3/src/webComponents/Badge/index.tsx
index 583e7988178..0253c1251e6 100644
--- a/packages/fiori3/src/webComponents/Badge/index.tsx
+++ b/packages/fiori3/src/webComponents/Badge/index.tsx
@@ -12,4 +12,8 @@ const Badge: FC<BadgePropTypes> = withWebComponent<BadgePropTypes>(UI5Badge);
 
 Badge.displayName = 'Badge';
 
+Badge.defaultProps = {
+  colorScheme: '1' // @generated
+};
+
 export { Badge };
diff --git a/packages/fiori3/src/webComponents/Button/demo.stories.tsx b/packages/fiori3/src/webComponents/Button/demo.stories.tsx
index 6bef6f18ed0..4bfc6072319 100644
--- a/packages/fiori3/src/webComponents/Button/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Button/demo.stories.tsx
@@ -3,7 +3,7 @@ import { boolean, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 
 const customStyle1 = {
   color: 'red'
@@ -34,7 +34,7 @@ class DemoButton extends React.Component {
           <Button onPress={() => this.setState({ showCS2: !showCS2 })}>Toggle Custom Style 2</Button>
         </div>
         <Button
-          type={select('type', ButtonType, ButtonType.Default)}
+          design={select('design', ButtonDesign, ButtonDesign.Default)}
           disabled={boolean('disabled', false)}
           icon={'sap-icon://add'}
           iconEnd={boolean('iconEnd', false)}
@@ -51,7 +51,7 @@ class DemoButton extends React.Component {
 storiesOf('UI5 Web Components | Button', module)
   .add('Generated default story', () => (
     <Button
-      type={select('type', ButtonType, ButtonType.Default)}
+      design={select('design', ButtonDesign, ButtonDesign.Default)}
       disabled={boolean('disabled', false)}
       icon={'sap-icon://add'}
       iconEnd={boolean('iconEnd', false)}
diff --git a/packages/fiori3/src/webComponents/Button/index.tsx b/packages/fiori3/src/webComponents/Button/index.tsx
index 30b5b283f22..130c2726487 100644
--- a/packages/fiori3/src/webComponents/Button/index.tsx
+++ b/packages/fiori3/src/webComponents/Button/index.tsx
@@ -1,11 +1,11 @@
+import React, { FC } from 'react';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { Event } from '@ui5-webcomponents-react/base';
 import UI5Button from '@ui5/webcomponents/dist/Button';
-import React, { FC } from 'react';
 import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
-import { ButtonType } from '../../lib/ButtonType';
 
 export interface ButtonPropTypes extends WithWebComponentPropTypes {
-  type?: ButtonType; // @generated
+  design?: ButtonDesign; // @generated
   disabled?: boolean; // @generated
   icon?: string; // @generated
   iconEnd?: boolean; // @generated
@@ -19,7 +19,7 @@ const Button: FC<ButtonPropTypes> = withWebComponent<ButtonPropTypes>(UI5Button)
 Button.displayName = 'Button';
 
 Button.defaultProps = {
-  type: ButtonType.Default // @generated
+  design: ButtonDesign.Default // @generated
 };
 
 export { Button };
diff --git a/packages/fiori3/src/webComponents/Card/demo.stories.tsx b/packages/fiori3/src/webComponents/Card/demo.stories.tsx
index eb7dd161f26..6211e684a2b 100644
--- a/packages/fiori3/src/webComponents/Card/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Card/demo.stories.tsx
@@ -1,14 +1,31 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { propTablesExclude } from '../../../../docs/.storybook/config';
 import { Card } from '../../lib/Card';
+import { List } from '../../lib/List';
+import { StandardListItem } from '../../lib/StandardListItem';
 import { Text } from '../../lib/Text';
 
 storiesOf('UI5 Web Components | Card', module).add(
-  'Generated default story',
+  'Default story',
   () => (
-    <Card heading={'generatedString'} subtitle={'generatedString'} status={'generatedString'} avatar={'sap-icon://add'}>
-      <Text>Demo Content</Text>
+    <Card
+      heading={text('heading', 'My Orders')}
+      subtitle={text('subtitle', 'Open')}
+      status={text('status', '5 of 22')}
+      avatar={text('avatar', 'sap-icon://order-status')}
+      headerInteractive={boolean('headerInteractive', false)}
+      onHeaderPress={action('onHeaderPress')}
+    >
+      <List>
+        <StandardListItem info="100€">Keyboard</StandardListItem>
+        <StandardListItem info="30€">Mouse</StandardListItem>
+        <StandardListItem info="299€">Display</StandardListItem>
+        <StandardListItem info="999€">Notebook</StandardListItem>
+        <StandardListItem info="1499€">Desktop</StandardListItem>
+      </List>
     </Card>
   ),
   {
diff --git a/packages/fiori3/src/webComponents/Card/index.tsx b/packages/fiori3/src/webComponents/Card/index.tsx
index ca5bb1c553e..12b0b995d74 100644
--- a/packages/fiori3/src/webComponents/Card/index.tsx
+++ b/packages/fiori3/src/webComponents/Card/index.tsx
@@ -6,6 +6,7 @@ export interface CardPropTypes extends WithWebComponentPropTypes {
   heading?: string; // @generated
   subtitle?: string; // @generated
   status?: string; // @generated
+  headerInteractive?: boolean; // @generated
   avatar?: string; // @generated
   onHeaderPress?: (event: Event) => void; // @generated
   children?: ReactNode | ReactNode[];
diff --git a/packages/fiori3/src/webComponents/Link/demo.stories.tsx b/packages/fiori3/src/webComponents/Link/demo.stories.tsx
index 7b58c737a5d..b4a6d198d91 100644
--- a/packages/fiori3/src/webComponents/Link/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Link/demo.stories.tsx
@@ -2,14 +2,14 @@ import { boolean, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Link } from '../../lib/Link';
-import { LinkType } from '../../lib/LinkType';
+import { LinkDesign } from '../../lib/LinkDesign';
 
 storiesOf('UI5 Web Components | Link', module).add('Generated default story', () => (
   <Link
     disabled={boolean('disabled', false)}
     href={'generatedString'}
     target={'generatedString'}
-    type={select('type', LinkType, null)}
+    design={select('design', LinkDesign, null)}
     wrap={boolean('wrap', false)}
     onPress={null}
   >
diff --git a/packages/fiori3/src/webComponents/Link/index.tsx b/packages/fiori3/src/webComponents/Link/index.tsx
index 42328e998e1..2b4b9e7b9c2 100644
--- a/packages/fiori3/src/webComponents/Link/index.tsx
+++ b/packages/fiori3/src/webComponents/Link/index.tsx
@@ -2,13 +2,13 @@ import { Event } from '@ui5-webcomponents-react/base';
 import UI5Link from '@ui5/webcomponents/dist/Link';
 import React, { FC } from 'react';
 import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
-import { LinkType } from '../../lib/LinkType';
+import { LinkDesign } from '../../lib/LinkDesign';
 
 export interface LinkPropTypes extends WithWebComponentPropTypes {
   disabled?: boolean; // @generated
   href?: string; // @generated
   target?: string; // @generated
-  type?: LinkType; // @generated
+  design?: LinkDesign; // @generated
   wrap?: boolean; // @generated
   onPress?: (event: Event) => void; // @generated
   children?: string; // @generated
@@ -19,9 +19,7 @@ const Link: FC<LinkPropTypes> = withWebComponent<LinkPropTypes>(UI5Link);
 Link.displayName = 'Link';
 
 Link.defaultProps = {
-  href: '', // @generated
-  target: '', // @generated
-  type: LinkType.Default // @generated
+  design: LinkDesign.Default // @generated
 };
 
 export { Link };
diff --git a/packages/fiori3/src/webComponents/List/demo.stories.tsx b/packages/fiori3/src/webComponents/List/demo.stories.tsx
index 7b6c36a3e5f..ae1b2d1fa55 100644
--- a/packages/fiori3/src/webComponents/List/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/List/demo.stories.tsx
@@ -5,6 +5,7 @@ import { List } from '../../lib/List';
 import { ListMode } from '../../lib/ListMode';
 import { ListSeparators } from '../../lib/ListSeparators';
 import { StandardListItem } from '../../lib/StandardListItem';
+import { ValueState } from '../../lib/ValueState';
 
 storiesOf('UI5 Web Components | List', module).add('Generated default story', () => (
   <List
@@ -19,7 +20,9 @@ storiesOf('UI5 Web Components | List', module).add('Generated default story', ()
     onSelectionChange={null}
     header={null}
   >
-    <StandardListItem>Item 1</StandardListItem>
+    <StandardListItem info="3" infoState={ValueState.Warning}>
+      Item 1
+    </StandardListItem>
     <StandardListItem>Item 2</StandardListItem>
     <StandardListItem>Item 3</StandardListItem>
   </List>
diff --git a/packages/fiori3/src/webComponents/MessageStrip/MessageStrip.karma.tsx b/packages/fiori3/src/webComponents/MessageStrip/MessageStrip.karma.tsx
new file mode 100644
index 00000000000..2ede3adcc6b
--- /dev/null
+++ b/packages/fiori3/src/webComponents/MessageStrip/MessageStrip.karma.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import { MessageStrip } from '../../lib/MessageStrip';
+import { mountThemedComponent } from '@shared/tests/utils';
+
+use(matchSnapshot);
+
+describe('MessageStrip', () => {
+  it('Basic Test (generated)', () => {
+    const wrapper = mountThemedComponent(<MessageStrip />);
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
+});
diff --git a/packages/fiori3/src/webComponents/MessageStrip/demo.stories.tsx b/packages/fiori3/src/webComponents/MessageStrip/demo.stories.tsx
index e5ab0103ad7..65faa68bdfa 100644
--- a/packages/fiori3/src/webComponents/MessageStrip/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/MessageStrip/demo.stories.tsx
@@ -9,8 +9,8 @@ storiesOf('UI5 Web Components | MessageStrip', module).add('Default story', () =
   <MessageStrip
     type={select('type', MessageStripType, MessageStripType.Information)}
     icon={text('icon', 'add')}
-    hideIcon={boolean('hideIcon', false)}
-    hideCloseButton={boolean('hideCloseButton', false)}
+    noIcon={boolean('noIcon', false)}
+    noCloseButton={boolean('noCloseButton', false)}
     onClose={action('onClose')}
   >
     Some Content
diff --git a/packages/fiori3/src/webComponents/MessageStrip/index.tsx b/packages/fiori3/src/webComponents/MessageStrip/index.tsx
index 6b29aba6f83..16dcdf0c2ae 100644
--- a/packages/fiori3/src/webComponents/MessageStrip/index.tsx
+++ b/packages/fiori3/src/webComponents/MessageStrip/index.tsx
@@ -7,8 +7,8 @@ import { MessageStripType } from '../../lib/MessageStripType';
 export interface MessageStripPropTypes extends WithWebComponentPropTypes {
   type?: MessageStripType; // @generated
   icon?: string; // @generated
-  hideIcon?: boolean; // @generated
-  hideCloseButton?: boolean; // @generated
+  noIcon?: boolean; // @generated
+  noCloseButton?: boolean; // @generated
   onClose?: (event: Event) => void; // @generated
   children?: string; // @generated
 }
@@ -18,10 +18,7 @@ const MessageStrip: FC<MessageStripPropTypes> = withWebComponent<MessageStripPro
 MessageStrip.displayName = 'MessageStrip';
 
 MessageStrip.defaultProps = {
-  type: MessageStripType.Information, // @generated
-  icon: null, // @generated
-  hideIcon: false, // @generated
-  hideCloseButton: false // @generated
+  type: MessageStripType.Information // @generated
 };
 
 export { MessageStrip };
diff --git a/packages/fiori3/src/webComponents/MultiComboBox/MultiComboBox.karma.tsx b/packages/fiori3/src/webComponents/MultiComboBox/MultiComboBox.karma.tsx
new file mode 100644
index 00000000000..a312cc31736
--- /dev/null
+++ b/packages/fiori3/src/webComponents/MultiComboBox/MultiComboBox.karma.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import { MultiComboBox } from '../../lib/MultiComboBox';
+import { mountThemedComponent } from '@shared/tests/utils';
+
+use(matchSnapshot);
+
+describe('MultiComboBox', () => {
+  it('Basic Test (generated)', () => {
+    const wrapper = mountThemedComponent(<MultiComboBox />);
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
+});
diff --git a/packages/fiori3/src/webComponents/Option/Option.karma.tsx b/packages/fiori3/src/webComponents/Option/Option.karma.tsx
new file mode 100644
index 00000000000..f30c453260b
--- /dev/null
+++ b/packages/fiori3/src/webComponents/Option/Option.karma.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import { Option } from '../../lib/Option';
+import { mountThemedComponent } from '@shared/tests/utils';
+
+use(matchSnapshot);
+
+describe('Option', () => {
+  it('Basic Test (generated)', () => {
+    const wrapper = mountThemedComponent(<Option />);
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
+});
diff --git a/packages/fiori3/src/webComponents/Option/index.tsx b/packages/fiori3/src/webComponents/Option/index.tsx
new file mode 100644
index 00000000000..86f5d66e6eb
--- /dev/null
+++ b/packages/fiori3/src/webComponents/Option/index.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import UI5Option from '@ui5/webcomponents/dist/Option';
+import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
+
+export interface OptionPropTypes extends WithWebComponentPropTypes {
+  selected?: boolean; // @generated
+  icon?: string; // @generated
+  value?: string; // @generated
+}
+
+const Option: FC<OptionPropTypes> = withWebComponent<OptionPropTypes>(UI5Option);
+
+Option.displayName = 'Option';
+
+Option.defaultProps = {
+  icon: null // @generated
+};
+
+export { Option };
diff --git a/packages/fiori3/src/webComponents/Popover/demo.stories.tsx b/packages/fiori3/src/webComponents/Popover/demo.stories.tsx
index eb1abbc2f80..8312226f2cf 100644
--- a/packages/fiori3/src/webComponents/Popover/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Popover/demo.stories.tsx
@@ -10,13 +10,13 @@ import { PopoverVerticalAlign } from '../../lib/PopoverVerticalAlign';
 storiesOf('UI5 Web Components | Popover', module).add('Default', () => (
   <Popover
     initialFocus={'generatedString'}
-    hideHeader={boolean('hideHeader', false)}
+    noHeader={boolean('noHeader', false)}
     headerText={'generatedString'}
     placementType={select('placementType', PlacementType)}
     horizontalAlign={select('horizontalAlign', PopoverHorizontalAlign, null)}
     verticalAlign={select('verticalAlign', PopoverVerticalAlign, null)}
     modal={boolean('modal', false)}
-    hideArrow={boolean('hideArrow', false)}
+    noArrow={boolean('noArrow', false)}
     open={boolean('open', false)}
     onBeforeOpen={null}
     onAfterOpen={null}
diff --git a/packages/fiori3/src/webComponents/Popover/index.tsx b/packages/fiori3/src/webComponents/Popover/index.tsx
index 05cdf9999c2..e894094770d 100644
--- a/packages/fiori3/src/webComponents/Popover/index.tsx
+++ b/packages/fiori3/src/webComponents/Popover/index.tsx
@@ -8,13 +8,13 @@ import { PopoverVerticalAlign } from '../../lib/PopoverVerticalAlign';
 
 export interface PopoverPropTypes extends WithWebComponentPropTypes {
   initialFocus?: string; // @generated
-  hideHeader?: boolean; // @generated
+  noHeader?: boolean; // @generated
   headerText?: string; // @generated
   placementType?: PlacementType; // @generated
   horizontalAlign?: PopoverHorizontalAlign; // @generated
   verticalAlign?: PopoverVerticalAlign; // @generated
   modal?: boolean; // @generated
-  hideArrow?: boolean; // @generated
+  noArrow?: boolean; // @generated
   stayOpenOnScroll?: boolean; // @generated
   allowTargetOverlap?: boolean; // @generated
   onBeforeOpen?: (event: Event) => void; // @generated
diff --git a/packages/fiori3/src/webComponents/Popup/index.tsx b/packages/fiori3/src/webComponents/Popup/index.tsx
index eb6eb170656..c445c1c0dae 100644
--- a/packages/fiori3/src/webComponents/Popup/index.tsx
+++ b/packages/fiori3/src/webComponents/Popup/index.tsx
@@ -1,11 +1,11 @@
+import React, { FC, ReactNode } from 'react';
 import { Event } from '@ui5-webcomponents-react/base';
 import UI5Popup from '@ui5/webcomponents/dist/Popup';
-import React, { FC, ReactNode } from 'react';
 import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
 
 export interface PopupPropTypes extends WithWebComponentPropTypes {
   initialFocus?: string; // @generated
-  hideHeader?: boolean; // @generated
+  noHeader?: boolean; // @generated
   headerText?: string; // @generated
   onBeforeOpen?: (event: Event) => void; // @generated
   onAfterOpen?: (event: Event) => void; // @generated
@@ -20,9 +20,4 @@ const Popup: FC<PopupPropTypes> = withWebComponent<PopupPropTypes>(UI5Popup);
 
 Popup.displayName = 'Popup';
 
-Popup.defaultProps = {
-  initialFocus: null, // @generated
-  headerText: '' // @generated
-};
-
 export { Popup };
diff --git a/packages/fiori3/src/webComponents/Select/demo.stories.tsx b/packages/fiori3/src/webComponents/Select/demo.stories.tsx
index 1d363c7f39d..ef76ae687de 100644
--- a/packages/fiori3/src/webComponents/Select/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Select/demo.stories.tsx
@@ -2,10 +2,9 @@ import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { ListItemTypes } from '../../lib/ListItemTypes';
 import { Select } from '../../lib/Select';
-import { StandardListItem } from '../../lib/StandardListItem';
 import { ValueState } from '../../lib/ValueState';
+import { Option } from '../../lib/Option';
 
 storiesOf('UI5 Web Components | Select', module).add('Generated default story', () => (
   <Select
@@ -13,20 +12,12 @@ storiesOf('UI5 Web Components | Select', module).add('Generated default story',
     valueState={select('valueState', ValueState, null)}
     onChange={action('onChange')}
   >
-    <StandardListItem type={ListItemTypes.Active} key="1">
+    <Option selected icon="sap-icon://add">
       Test 1
-    </StandardListItem>
-    <StandardListItem type={ListItemTypes.Active} key="2">
-      Test 2
-    </StandardListItem>
-    <StandardListItem type={ListItemTypes.Active} key="3">
-      Test 3
-    </StandardListItem>
-    <StandardListItem type={ListItemTypes.Active} key="4">
-      Test 4
-    </StandardListItem>
-    <StandardListItem type={ListItemTypes.Active} key="5">
-      Test 5
-    </StandardListItem>
+    </Option>
+    <Option icon="sap-icon://add">Test 2</Option>
+    <Option icon="sap-icon://add">Test 3</Option>
+    <Option icon="sap-icon://add">Test 4</Option>
+    <Option icon="sap-icon://add">Test 5</Option>
   </Select>
 ));
diff --git a/packages/fiori3/src/webComponents/StandardListItem/index.tsx b/packages/fiori3/src/webComponents/StandardListItem/index.tsx
index 41715d4637a..5053943dd4b 100644
--- a/packages/fiori3/src/webComponents/StandardListItem/index.tsx
+++ b/packages/fiori3/src/webComponents/StandardListItem/index.tsx
@@ -1,7 +1,8 @@
-import UI5StandardListItem from '@ui5/webcomponents/dist/StandardListItem';
 import React, { FC } from 'react';
-import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
 import { ListItemTypes } from '../../lib/ListItemTypes';
+import { ValueState } from '../../lib/ValueState';
+import UI5StandardListItem from '@ui5/webcomponents/dist/StandardListItem';
+import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
 
 export interface StandardListItemPropTypes extends WithWebComponentPropTypes {
   selected?: boolean; // @generated
@@ -10,6 +11,8 @@ export interface StandardListItemPropTypes extends WithWebComponentPropTypes {
   icon?: string; // @generated
   iconEnd?: boolean; // @generated
   image?: string; // @generated
+  info?: string; // @generated
+  infoState?: ValueState; // @generated
   children?: string; // @generated
 }
 
@@ -21,9 +24,7 @@ StandardListItem.displayName = 'StandardListItem';
 
 StandardListItem.defaultProps = {
   type: ListItemTypes.Active, // @generated
-  description: '', // @generated
-  icon: null, // @generated
-  image: null // @generated
+  infoState: ValueState.None // @generated
 };
 
 export { StandardListItem };
diff --git a/packages/fiori3/src/webComponents/Switch/Switch.karma.tsx b/packages/fiori3/src/webComponents/Switch/Switch.karma.tsx
new file mode 100644
index 00000000000..f2d5c2d3198
--- /dev/null
+++ b/packages/fiori3/src/webComponents/Switch/Switch.karma.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import { Switch } from '../../lib/Switch';
+import { mountThemedComponent } from '@shared/tests/utils';
+
+use(matchSnapshot);
+
+describe('Switch', () => {
+  it('Basic Test (generated)', () => {
+    const wrapper = mountThemedComponent(<Switch />);
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
+});
diff --git a/packages/fiori3/src/webComponents/Switch/demo.stories.tsx b/packages/fiori3/src/webComponents/Switch/demo.stories.tsx
index 19c7b444fb5..79c948a6a0d 100644
--- a/packages/fiori3/src/webComponents/Switch/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Switch/demo.stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { boolean, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Switch } from '../../lib/Switch';
@@ -10,7 +10,7 @@ storiesOf('UI5 Web Components | Switch', module).add('Generated default story',
     disabled={boolean('disabled', false)}
     textOn={text('textOn', 'Yes')}
     textOff={text('textOff', 'No')}
-    type={select('type', ['Textual', 'Graphical'], 'Textual')}
+    graphical={boolean('graphical', false)}
     onChange={action('onChange')}
   />
 ));
diff --git a/packages/fiori3/src/webComponents/Switch/index.tsx b/packages/fiori3/src/webComponents/Switch/index.tsx
index f4407a3f792..0b293e46c40 100644
--- a/packages/fiori3/src/webComponents/Switch/index.tsx
+++ b/packages/fiori3/src/webComponents/Switch/index.tsx
@@ -1,6 +1,6 @@
+import React, { FC } from 'react';
 import { Event } from '@ui5-webcomponents-react/base';
 import UI5Switch from '@ui5/webcomponents/dist/Switch';
-import React, { FC } from 'react';
 import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
 
 export interface SwitchPropTypes extends WithWebComponentPropTypes {
@@ -8,18 +8,12 @@ export interface SwitchPropTypes extends WithWebComponentPropTypes {
   disabled?: boolean; // @generated
   textOn?: string; // @generated
   textOff?: string; // @generated
+  graphical?: boolean; // @generated
   onChange?: (event: Event) => void; // @generated
-  type?: 'Textual' | 'Graphical';
 }
 
 const Switch: FC<SwitchPropTypes> = withWebComponent<SwitchPropTypes>(UI5Switch);
 
 Switch.displayName = 'Switch';
 
-Switch.defaultProps = {
-  textOn: '', // @generated
-  textOff: '',
-  type: 'Textual'
-};
-
 export { Switch };
diff --git a/packages/fiori3/src/webComponents/ToggleButton/demo.stories.tsx b/packages/fiori3/src/webComponents/ToggleButton/demo.stories.tsx
index adee9858476..3a3a8d4773e 100644
--- a/packages/fiori3/src/webComponents/ToggleButton/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/ToggleButton/demo.stories.tsx
@@ -1,12 +1,12 @@
 import { boolean, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { ButtonType } from '../../lib/ButtonType';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { ToggleButton } from '../../lib/ToggleButton';
 
 storiesOf('UI5 Web Components | ToggleButton', module).add('Generated default story', () => (
   <ToggleButton
-    type={select('type', ButtonType, null)}
+    design={select('design', ButtonDesign, null)}
     disabled={boolean('disabled', false)}
     icon="sap-icon://add"
     iconEnd={boolean('iconEnd', false)}
diff --git a/packages/fiori3/src/webComponents/ToggleButton/index.tsx b/packages/fiori3/src/webComponents/ToggleButton/index.tsx
index ad6fd490c6e..658334ea48f 100644
--- a/packages/fiori3/src/webComponents/ToggleButton/index.tsx
+++ b/packages/fiori3/src/webComponents/ToggleButton/index.tsx
@@ -1,11 +1,11 @@
+import React, { FC } from 'react';
+import { ButtonDesign } from '../../lib/ButtonDesign';
 import { Event } from '@ui5-webcomponents-react/base';
 import UI5ToggleButton from '@ui5/webcomponents/dist/ToggleButton';
-import React, { FC } from 'react';
 import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
-import { ButtonType } from '../../lib/ButtonType';
 
 export interface ToggleButtonPropTypes extends WithWebComponentPropTypes {
-  type?: ButtonType; // @generated
+  design?: ButtonDesign; // @generated
   disabled?: boolean; // @generated
   icon?: string; // @generated
   iconEnd?: boolean; // @generated
@@ -20,7 +20,7 @@ const ToggleButton: FC<ToggleButtonPropTypes> = withWebComponent<ToggleButtonPro
 ToggleButton.displayName = 'ToggleButton';
 
 ToggleButton.defaultProps = {
-  type: ButtonType.Default // @generated
+  design: ButtonDesign.Default // @generated
 };
 
 export { ToggleButton };
diff --git a/packages/fiori3/src/webComponents/Token/Token.karma.tsx b/packages/fiori3/src/webComponents/Token/Token.karma.tsx
new file mode 100644
index 00000000000..c6800420daf
--- /dev/null
+++ b/packages/fiori3/src/webComponents/Token/Token.karma.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import { Token } from '../../lib/Token';
+import { mountThemedComponent } from '@shared/tests/utils';
+
+use(matchSnapshot);
+
+describe('Token', () => {
+  it('Basic Test (generated)', () => {
+    const wrapper = mountThemedComponent(<Token />);
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
+});
diff --git a/packages/fiori3/src/webComponents/Tokenizer/Tokenizer.karma.tsx b/packages/fiori3/src/webComponents/Tokenizer/Tokenizer.karma.tsx
new file mode 100644
index 00000000000..7ba168713d7
--- /dev/null
+++ b/packages/fiori3/src/webComponents/Tokenizer/Tokenizer.karma.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import { Tokenizer } from '../../lib/Tokenizer';
+import { mountThemedComponent } from '@shared/tests/utils';
+
+use(matchSnapshot);
+
+describe('Tokenizer', () => {
+  it('Basic Test (generated)', () => {
+    const wrapper = mountThemedComponent(<Tokenizer />);
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index d90d7285bad..41df4f32891 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2778,28 +2778,28 @@
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
   integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==
 
-"@ui5/webcomponents-base@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.12.0.tgz#5b382fdbac4b5b839452f1df4e4376aee309a7dc"
-  integrity sha512-RVXTv+jHHRwjxICEQkc7pb9/BdOiNjIkBUZUHutMwyAK3Lnc6+xG5Fx57WVTbdPflpE5TVFcMdRsBJm19KdDOw==
+"@ui5/webcomponents-base@0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.13.1.tgz#0f374876172bccb31c8eb177c7112d51c7ff9388"
+  integrity sha512-Vv+wvD+gRL7l6UI66QEs8wpFZhlquLrEp/lVOzMcvJ6ziTQSHL60AjN2E0X5OU7er2NbPzMFNOmX8J128bBHBQ==
   dependencies:
-    "@ui5/webcomponents-core" "0.12.0"
+    "@ui5/webcomponents-core" "0.13.1"
     lit-html "^1.0.0"
     regenerator-runtime "0.12.1"
     url-search-params-polyfill "^5.0.0"
 
-"@ui5/webcomponents-core@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.12.0.tgz#aee3bd66c014387f02c8bafa5aa8e29ef950786e"
-  integrity sha512-SVr7siJf04axSjonB/tYsJ6BNqrLtUm0EJ3/4Y6xTVmHsqx8u0YG/YQKwSfO9FS9D7QuofIsojMh9IjIxRRCOw==
+"@ui5/webcomponents-core@0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.13.1.tgz#024275d47384a01126b9c049db45310e18f8ab7a"
+  integrity sha512-OJHE89oxdmnpsVhihM76JO7XUHmTEtv/X4I6LnxmX5vNgHNcezMYB6wIIqyLMEcuE3yB2BnYp6EwyFXUc6nQBQ==
 
-"@ui5/webcomponents@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-0.12.0.tgz#98da24c74b409cb0eaaf1001983f30a5ece8dd3f"
-  integrity sha512-l+aYHyG0gtmA8wUYol+P0ELWkH8HlSbet7N7XVTyP4qG60Nc8uLHzN3GwtwkQltcTDR/iVM+b9JZdl5zVzgN6g==
+"@ui5/webcomponents@0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-0.13.1.tgz#c8795cfe203543864e0e90716ff3e0cd1a20c4f2"
+  integrity sha512-OWEhX1QPPCGhOs71yC0YeHSDgWMEicpvPxBPglePhT14YBg8I42Eb7xQ0aodIFT3tz8z7sxaCebOHaruDBlJ5Q==
   dependencies:
-    "@ui5/webcomponents-base" "0.12.0"
-    "@ui5/webcomponents-core" "0.12.0"
+    "@ui5/webcomponents-base" "0.13.1"
+    "@ui5/webcomponents-core" "0.13.1"
 
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"