line flex message api change

flex.patch

From 08e39ce10a6c40821c3668ef65f23972a21eb7bf Mon Sep 17 00:00:00 2001
From: dweizhe <d.weizhe@anyong.com.tw>
Date: Thu, 29 Aug 2019 08:19:15 +0800
Subject: [PATCH] 20190829

---
 index.html | 907 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 635 insertions(+), 272 deletions(-)

diff --git a/index.html b/index.html
index eec508d..26d1f73 100644
--- a/index.html
+++ b/index.html
@@ -2448,6 +2448,7 @@
                       <div class="SectionReference_Spec">
                         <h3 id="send-reply-message" class="h3 h3">Send reply message</h3>
                         <p>Sends a reply message in response to an event from a user, group, or room.</p>
+                        <p>To send reply messages, you must have a reply token which is included in a webhook event object.</p>
                         <p><a href="#webhooks">Webhooks</a> are used to notify you when an event occurs. For events that you can respond to, a reply token is issued for replying to messages.</p>
                         <p>Because the reply token becomes invalid after a certain period of time, responses should be sent as soon as a message is received. Reply tokens can only be used once.</p>
                         <h4 id="http-request" class="h4 h4">HTTP request</h4>
@@ -2508,7 +2509,7 @@
                                   <li>
                                     <code>false</code>: The user receives a push notification when the message is sent (unless they have disabled push notifications in LINE and/or their device).</li>
                                 </ul>
-                                 Default: <code>false</code>
+                                Default: <code>false</code>
                               </td>
                             </tr>
                           </tbody>
@@ -8378,7 +8379,7 @@
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
                         <h3 id="flex-message" class="h3 h3">Flex Message</h3>
-                        <p>Flex Messages are messages with a customizable layout. You can customize the layout freely by combining multiple elements. For more information, see <a href="/en/docs/messaging-api/using-flex-messages/">Using Flex Messages</a>.</p>
+                        <p>Flex Messages are messages with a customizable layout. You can customize the layout freely based on the specification for <a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box (CSS Flexbox)</a>. For more information, see <a href="/en/docs/messaging-api/using-flex-messages/">Using Flex Messages</a> in the API documentation.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -8406,17 +8407,18 @@
                               <td class=" nowrap" style="word-break: normal">contents</td>
                               <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td style="word-break: normal">Flex Message <a href="#container">container</a> object</td>
+                              <td style="word-break: normal">Flex Message <a href="#container">container</a>
+                              </td>
                             </tr>
                           </tbody>
                         </table>
                         <h4 id="container" class="h4 h4">Container</h4>
-                        <p>A container is the top-level structure of a Flex Message. Here are the types of containers available.</p>
+                        <p>A container is the top-level structure of a Flex Message. Here are the types of containers available:</p>
                         <ul>
                           <li><a href="#bubble">Bubble</a></li>
                           <li><a href="#f-carousel">Carousel</a></li>
                         </ul>
-                        <p>See <a href="/en/docs/messaging-api/flex-message-elements/">Flex Message elements</a> for the containers' JSON data samples and usage.</p>
+                        <p>For JSON samples and usage of containers, see <a href="/en/docs/messaging-api/flex-message-elements/">Flex Message elements</a> in the API documentation.</p>
                       </div>
                       <div class="SectionReference_Code">
                         <p class="SectionReference_CodeTitle"> Flex Message example</p>
@@ -8448,9 +8450,9 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="bubble" class="h5 h5">Bubble container</h5>
-                        <p>This is a container that contains one message bubble. It can contain four blocks: header, hero, body, and footer. For more information about using each block, see <a href="/en/docs/messaging-api/flex-message-elements/#block">Block</a>.</p>
-                        <p>The maximum size of JSON data that defines a bubble container is 10 KB.</p>
+                        <h5 id="bubble" class="h5 h5">Bubble</h5>
+                        <p>This is a container that contains one message bubble. It can contain four blocks: header, hero, body, and footer. For more information about using each block, see <a href="/en/docs/messaging-api/flex-message-elements/#block">Block</a> in the API documentation.</p>
+                        <p>The maximum size of JSON data that defines a bubble is 10 KB.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -8467,16 +8469,22 @@
                               <td class=" nowrap" style="word-break: normal">Required</td>
                               <td class=" nowrap" style="word-break: normal"><code>bubble</code></td>
                             </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">size</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The size of the bubble. You can specify one of the following values: <code>nano</code>, <code>micro</code>, <code>kilo</code>, <code>mega</code>, or <code>giga</code>. The default value is <code>mega</code>.</td>
+                            </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">direction</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Text directionality and the order of components in horizontal boxes in the container. Specify one of the following values:
+                              <td style="word-break: normal">Text directionality and the direction of placement of components in horizontal boxes. Specify one of the following values:
                                 <ul>
                                   <li>
-                                    <code>ltr</code>: Left to right</li>
+                                    <code>ltr</code>: The text is left-to-right horizontal writing, and the components are placed from left to right</li>
                                   <li>
-                                    <code>rtl</code>: Right to left</li>
+                                    <code>rtl</code>: The text is right-to-left horizontal writing, and the components are placed from right to left</li>
                                 </ul>
                                 The default value is <code>ltr</code>.</td>
                             </tr>
@@ -8484,37 +8492,47 @@
                               <td class=" nowrap" style="word-break: normal">header</td>
                               <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Header block. Specify a <a href="#box">box</a> component.</td>
+                              <td style="word-break: normal">Header block. Specify a <a href="#box">Box</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">hero</td>
                               <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Hero block. Specify an <a href="#f-image">image</a> component.</td>
+                              <td style="word-break: normal">Hero block. Specify a <a href="#box">box</a> or an <a href="#f-image">image</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">body</td>
                               <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Body block. Specify a <a href="#box">box</a> component.</td>
+                              <td style="word-break: normal">Body block. Specify a <a href="#box">Box</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">footer</td>
                               <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Footer block. Specify a <a href="#box">box</a> component.</td>
+                              <td style="word-break: normal">Footer block. Specify a <a href="#box">Box</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">styles</td>
                               <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Style of each block. Specify a <a href="#bubble-style">bubble style</a> object. For more information, see <a href="#style-setting-objects">Objects for the block style</a>.</td>
+                              <td style="word-break: normal">Style of each block. Specify a <a href="#bubble-style">bubble style</a>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">action</td>
+                              <td class=" nowrap" style="word-break: normal">Object</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Action performed when this image is tapped. Specify an <a href="#action-objects">action object</a>. This property is supported on the following versions of LINE.
+                                <ul>
+                                  <li>LINE for iOS and Android: 8.11.0 and later</li>
+                                </ul>
+                              </td>
                             </tr>
                           </tbody>
                         </table>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Bubble container example</p>
+                        <p class="SectionReference_CodeTitle"> Bubble example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
   </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bubble"</span><span class="p">,</span><span class="w">
@@ -8564,7 +8582,7 @@
                       <div class="SectionReference_Spec">
                         <h5 id="style-setting-objects" class="h5 h5">Objects for the block style</h5>
                         <p>Use the following two objects to define the style of blocks in a bubble.</p>
-                        <p><strong><a id="bubble-style" class="pageAnchorHidden"></a>Bubble style</strong></p>
+                        <h6 id="bubble-style" class=" h6">Bubble style</h6>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -8577,35 +8595,31 @@
                           <tbody>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">header</td>
-                              <td style="word-break: normal">
-                                <a href="#block-style">Block style</a> object</td>
+                              <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Style of the header block</td>
+                              <td style="word-break: normal">Header block. Specify a <a href="#block-style">block style</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">hero</td>
-                              <td style="word-break: normal">
-                                <a href="#block-style">Block style</a> object</td>
+                              <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Style of the hero block</td>
+                              <td style="word-break: normal">Hero block. Specify a <a href="#block-style">block style</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">body</td>
-                              <td style="word-break: normal">
-                                <a href="#block-style">Block style</a> object</td>
+                              <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Style of the body block</td>
+                              <td style="word-break: normal">Body block. Specify a <a href="#block-style">block style</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">footer</td>
-                              <td style="word-break: normal">
-                                <a href="#block-style">Block style</a> object</td>
+                              <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Style of the footer block</td>
+                              <td style="word-break: normal">Footer block. Specify a <a href="#block-style">block style</a>.</td>
                             </tr>
                           </tbody>
                         </table>
-                        <p><strong><a id="block-style" class="pageAnchorHidden"></a>Block style</strong></p>
+                        <h6 id="block-style" class=" h6">Block style</h6>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -8627,7 +8641,7 @@
                               <td class=" nowrap" style="word-break: normal">Boolean</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
                               <td style="word-break: normal">
-                                <code>true</code> to place a separator above the block. <code>true</code> will be ignored for the first block in a container because you cannot place a separator above the first block. The default value is <code>false</code>.</td>
+                                <code>true</code> to place a separator above the block. The default value is <code>false</code>.</td>
                             </tr>
                             <tr>
                               <td style="word-break: normal">separatorColor</td>
@@ -8637,9 +8651,18 @@
                             </tr>
                           </tbody>
                         </table>
+                        <div class="annotation is-note">
+                          <div class="annotation-header">
+                            <i class="global-icon global-icon_note">note</i>
+                            Note
+                          </div>
+                          <div class="annotation-body">
+                            <p>You cannot place a separator above the first block.</p>
+                          </div>
+                        </div>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Example of a bubble style object with block style objects</p>
+                        <p class="SectionReference_CodeTitle"> Example of a bubble style and block style</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="w">  </span><span class="s2">"styles"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
     </span><span class="s2">"header"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
@@ -8661,9 +8684,9 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="f-carousel" class="h5 h5">Carousel container</h5>
-                        <p>This is a container that contains multiple bubble containers, or message bubbles. The bubbles will be shown in order by scrolling horizontally.</p>
-                        <p>The maximum size of JSON data that defines a carousel container is 50 KB.</p>
+                        <h5 id="f-carousel" class="h5 h5">Carousel</h5>
+                        <p>A carousel is a container that contains multiple bubbles as child elements. Users can scroll horizontally through the bubbles.</p>
+                        <p>The maximum size of JSON data that defines a carousel is 50 KB.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -8682,29 +8705,48 @@
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">contents</td>
-                              <td style="word-break: normal">Array of <a href="#bubble">bubble</a> containers</td>
+                              <td style="word-break: normal">Array of objects</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td style="word-break: normal">Max: 10 bubbles</td>
+                              <td style="word-break: normal">
+                                <a href="#bubble">Bubbles</a> in the carousel. Max: 10 bubbles</td>
                             </tr>
                           </tbody>
                         </table>
-                        <p>If any of the bubbles in a carousel container has a body block, the body block extends so that the bubble has the same height as the highest bubble in the carousel container.</p>
+                        <div class="annotation is-note">
+                          <div class="annotation-header">
+                            <i class="global-icon global-icon_note">note</i>
+                            Bubble width
+                          </div>
+                          <div class="annotation-body">
+                            <p>A carousel cannot contain bubbles of different widths (<code>size</code> property). Each bubble in a carousel should have the same width.</p>
+                          </div>
+                        </div>
+                        <div class="annotation is-tip">
+                          <div class="annotation-header">
+                            <i class="global-icon global-icon_tip">tip</i>
+                            Bubble height
+                          </div>
+                          <div class="annotation-body">
+                            <p>The body of each bubble will stretch to match the bubble with the greatest height in the carousel. However, bubbles with no body will not change height.</p>
+                          </div>
+                        </div>
                         <h4 id="component" class="h4 h4">Component</h4>
-                        <p>Components are objects that compose a Flex Message container. Here are the types of components available:</p>
+                        <p>Components are elements that make up a block. Here are the types of components available:</p>
                         <ul>
                           <li><a href="#box">Box</a></li>
                           <li><a href="#button">Button</a></li>
-                          <li><a href="#filler">Filler</a></li>
-                          <li><a href="#icon">Icon</a></li>
                           <li><a href="#f-image">Image</a></li>
-                          <li><a href="#separator">Separator</a></li>
-                          <li><a href="#spacer">Spacer</a></li>
+                          <li><a href="#icon">Icon</a></li>
                           <li><a href="#f-text">Text</a></li>
+                          <li><a href="#span">Span</a></li>
+                          <li><a href="#separator">Separator</a></li>
+                          <li><a href="#filler">Filler</a></li>
+                          <li><a href="#spacer">Spacer (not recommended)</a></li>
                         </ul>
-                        <p>See <a href="/en/docs/messaging-api/flex-message-elements/">Flex Message elements</a> and <a href="/en/docs/messaging-api/flex-message-layout/">Flex Message layout</a> for the components' JSON data samples and usage.</p>
+                        <p>For JSON samples and usage of each component, see <a href="/en/docs/messaging-api/flex-message-elements/">Flex Message elements</a> and <a href="/en/docs/messaging-api/flex-message-layout/">Flex Message layout</a> in the API documentation.</p>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Carousel container example</p>
+                        <p class="SectionReference_CodeTitle"> Carousel example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
   </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"carousel"</span><span class="p">,</span><span class="w">
@@ -8743,7 +8785,7 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="box" class="h5 h5">Box component</h5>
+                        <h5 id="box" class="h5 h5">Box</h5>
                         <p>This is a component that defines the layout of child components. You can also include a box in a box.</p>
                         <table class="Table">
                           <thead class=" nowrap">
@@ -8765,16 +8807,7 @@
                               <td class=" nowrap" style="word-break: normal">layout</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td style="word-break: normal">The placement style of components in this box. Specify one of the following values:
-                                <ul>
-                                  <li>
-                                    <code>horizontal</code>: Components are placed horizontally. The <code>direction</code> property of the <a href="#bubble">bubble</a> container specifies the order.</li>
-                                  <li>
-                                    <code>vertical</code>: Components are placed vertically from top to bottom.</li>
-                                  <li>
-                                    <code>baseline</code>: Components are placed in the same way as <code>horizontal</code> is specified except the baselines of the components are aligned.</li>
-                                </ul>
-                                For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#box-layout-types">Types of box layouts</a>.</td>
+                              <td style="word-break: normal">The layout style of components in this box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#box-layout-types">Direction of placing components</a> in the API documentation.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">contents</td>
@@ -8782,39 +8815,141 @@
                               <td class=" nowrap" style="word-break: normal">Required</td>
                               <td style="word-break: normal">Components in this box. Here are the types of components available:
                                 <ul>
-                                  <li>When the <code>layout</code> property is <code>horizontal</code> or <code>vertical</code>: <a href="#box">Box</a>, <a href="#button">button</a>, <a href="#filler">filler</a>, <a href="#f-image">image</a>, <a href="#separator">separator</a>, <a href="#spacer">spacer</a>, and <a href="#f-text">text</a> components</li>
-                                  <li>When the <code>layout</code> property is <code>baseline</code>: <a href="#filler">filler</a>, <a href="#icon">icon</a>, <a href="#spacer">spacer</a>, and <a href="#f-text">text</a> components</li>
+                                  <li>When the <code>layout</code> property is <code>horizontal</code> or <code>vertical</code>: <a href="#box">box</a>, <a href="#button">button</a>, <a href="#f-image">image</a>, <a href="#f-text">text</a>, <a href="#separator">separator</a>, <a href="#filler">filler</a>, and <a href="#spacer">spacer (not recommended)</a>
+                                  </li>
+                                  <li>When the <code>layout</code> property is <code>baseline</code>: <a href="#icon">icon</a>, <a href="#f-text">text</a>, <a href="#filler">filler</a>, and <a href="#spacer">spacer (not recommended)</a>
+                                  </li>
                                 </ul>
-                              </td>
+                                Components are rendered in the order specified in the array.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">backgroundColor</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Background color of the block. In addition to the RGB color, an alpha channel (transparency) can also be set. Use a hexadecimal color code. (Example:#RRGGBBAA) The default value is <code>#00000000</code>.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">borderColor</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Color of box border. Use a hexadecimal color code.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">borderWidth</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Width of box border. You can specify a value in pixels or any one of <code>none</code>, <code>light</code>, <code>normal</code>, <code>medium</code>, <code>semi-bold</code>, or <code>bold</code>. <code>none</code> does not render a border while the others become wider in the order of listing.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">cornerRadius</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Radius at the time of rounding the corners of the border. You can specify a value in pixels or any one of <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not round the corner while the others increase in radius in the order of listing. The default value is <code>none</code>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">width</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Width of the box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#box-width">Width of a box</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">height</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Height of the box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#/box-height">Height of a box</a> in the API documentation.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">flex</td>
                               <td class=" nowrap" style="word-break: normal">Number</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">The ratio of the width or height of this box within the parent box. The default value for the horizontal parent box is <code>1</code>, and the default value for the vertical parent box is <code>0</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
+                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">spacing</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Minimum space between components in this box. You can specify one of the following values: <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not set a space while the other values set a space whose size increases in the order of listing. The default value is <code>none</code>.<br>
-                                To override this setting for a specific component, set the <code>margin</code> property of that component.</td>
+                              <td style="word-break: normal">Minimum space between components in this box. The default value is <code>none</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#spacing-property"><code>spacing</code> property of the box</a> in the API documentation.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">margin</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Minimum space between this box and the previous component in the parent box. You can specify one of the following values: <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not set a space while the other values set a space whose size increases in the order of listing. The default value is the value of the <code>spacing</code> property of the parent box.<br>
-                                If this box is the first component in the parent box, the <code>margin</code> property will be ignored.</td>
+                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#margin-property"><code>margin</code> property of the component</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">paddingAll</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Free space between the borders of this box and the child element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#padding-property">Box padding</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">paddingTop</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Free space between the border at the upper end of this box and the upper end of the child element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#padding-property">Box padding</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">paddingBottom</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Free space between the border at the lower end of this box and the lower end of the child element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#padding-property">Box padding</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">paddingStart</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Free space between the border at the left end of this box and the left end of the child element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#padding-property">Box padding</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">paddingEnd</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Free space between the border at the right end of this box and the right end of the child element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#padding-property">Box padding</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">position</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Reference position for placing this box. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>relative</code>: Use the previous box as reference.</li>
+                                  <li>
+                                    <code>absolute</code>: Use the top left of parent element as reference.</li>
+                                </ul>
+                                The default value is <code>relative</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetTop</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The top offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetBottom</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The bottom offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetStart</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The left offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetEnd</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The right offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">action</td>
                               <td class=" nowrap" style="word-break: normal">Object</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Action performed when this box is tapped. Specify an <a href="#action-objects">action object</a>. This property is supported on the following versions of LINE.
+                              <td style="word-break: normal">Action performed when this image is tapped. Specify an <a href="#action-objects">action object</a>. This property is supported on the following versions of LINE.
                                 <ul>
                                   <li>LINE for iOS and Android: 8.11.0 and later</li>
-                                  <li>LINE for Windows and macOS: 5.9.0 and later</li>
                                 </ul>
                               </td>
                             </tr>
@@ -8822,7 +8957,7 @@
                         </table>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Box component example</p>
+                        <p class="SectionReference_CodeTitle"> Box example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
   </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"box"</span><span class="p">,</span><span class="w">
@@ -8847,8 +8982,8 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="button" class="h5 h5">Button component</h5>
-                        <p>This component draws a button. When the user taps a button, a specified action is performed.</p>
+                        <h5 id="button" class="h5 h5">Button</h5>
+                        <p>This component renders a button. When the user taps a button, a specified action is performed.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -8875,14 +9010,50 @@
                               <td class=" nowrap" style="word-break: normal">flex</td>
                               <td class=" nowrap" style="word-break: normal">Number</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. The default value for the horizontal parent box is <code>1</code>, and the default value for the vertical parent box is <code>0</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
+                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">margin</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent box. You can specify one of the following values: <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not set a space while the other values set a space whose size increases in the order of listing. The default value is the value of the <code>spacing</code> property of the parent box.<br>
-                                If this component is the first component in the parent box, the <code>margin</code> property will be ignored.</td>
+                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#margin-property"><code>margin</code> property of the component</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">position</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Reference for <code>offsetTop</code>, <code>offsetBottom</code>, <code>offsetStart</code>, and <code>offsetEnd</code>. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>relative</code>: Use the previous box as reference.</li>
+                                  <li>
+                                    <code>absolute</code>: Use the top left of parent element as reference.</li>
+                                </ul>
+                                The default value is <code>relative</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetTop</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The top offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetBottom</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The bottom offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetStart</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The left offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetEnd</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The right offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">height</td>
@@ -8896,12 +9067,12 @@
                               <td class=" nowrap" style="word-break: normal">Optional</td>
                               <td style="word-break: normal">Style of the button. Specify one of the following values:
                                 <ul>
-                                  <li>
-                                    <code>link</code>: HTML link style</li>
                                   <li>
                                     <code>primary</code>: Style for dark color buttons</li>
                                   <li>
                                     <code>secondary</code>: Style for light color buttons</li>
+                                  <li>
+                                    <code>link</code>: HTML link style</li>
                                 </ul>
                                 The default value is <code>link</code>.</td>
                             </tr>
@@ -8915,23 +9086,13 @@
                               <td class=" nowrap" style="word-break: normal">gravity</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Vertical alignment style. Specify one of the following values:
-                                <ul>
-                                  <li>
-                                    <code>top</code>: Top-aligned</li>
-                                  <li>
-                                    <code>bottom</code>: Bottom-aligned</li>
-                                  <li>
-                                    <code>center</code>: Center-aligned</li>
-                                </ul>
-                                The default value is <code>top</code>.<br>
-                                If the <code>layout</code> property of the parent box is <code>baseline</code>, the <code>gravity</code> property will be ignored.</td>
+                              <td style="word-break: normal">Alignment style in vertical direction. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#gravity-property">Alignment in vertical direction</a> in the API documentation.</td>
                             </tr>
                           </tbody>
                         </table>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Button component example</p>
+                        <p class="SectionReference_CodeTitle"> Button example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
   </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"button"</span><span class="p">,</span><span class="w">
@@ -8949,8 +9110,8 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="filler" class="h5 h5">Filler component</h5>
-                        <p>This is an invisible component to fill extra space between components.</p>
+                        <h5 id="f-image" class="h5 h5">Image</h5>
+                        <p>This component renders an image.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -8965,20 +9126,126 @@
                               <td class=" nowrap" style="word-break: normal">type</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td class=" nowrap" style="word-break: normal"><code>filler</code></td>
+                              <td class=" nowrap" style="word-break: normal"><code>image</code></td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">url</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Required</td>
+                              <td style="word-break: normal">Image URL<br>
+                                Protocol: HTTPS<br>
+                                Image format: JPEG or PNG<br>
+                                Maximum image size: 1024×1024 pixels<br>
+                                Maximum data size: 1 MB</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">flex</td>
+                              <td class=" nowrap" style="word-break: normal">Number</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">margin</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#margin-property"><code>margin</code> property of the component</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">position</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Reference for <code>offsetTop</code>, <code>offsetBottom</code>, <code>offsetStart</code>, and <code>offsetEnd</code>. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>relative</code>: Use the previous box as reference.</li>
+                                  <li>
+                                    <code>absolute</code>: Use the top left of parent element as reference.</li>
+                                </ul>
+                                The default value is <code>relative</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetTop</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The top offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetBottom</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The bottom offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetStart</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The left offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetEnd</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The right offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">align</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Alignment style in horizontal direction. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#align-property">Alignment in horizontal direction</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">gravity</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Alignment style in vertical direction. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#gravity-property">Alignment in vertical direction</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">size</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Maximum size of the image width. You can specify one of the following values: <code>xxs</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>3xl</code>, <code>4xl</code>, <code>5xl</code>, or <code>full</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">aspectRatio</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Aspect ratio of the image. <code>{width}:{height}</code> format. Specify the value of <code>{width}</code> and <code>{height}</code> in the range from 1 to 100000. However, you cannot set <code>{height}</code> to a value that is more than three times the value of <code>{width}</code>. The default value is <code>1:1</code>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">aspectMode</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The display style of the image if the aspect ratio of the image and that specified by the <code>aspectRatio</code> property do not match. For more information, see <a href="#drawing-area">About the drawing area</a>.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">backgroundColor</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Background color of the image. Use a hexadecimal color code.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">action</td>
+                              <td class=" nowrap" style="word-break: normal">Object</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Action performed when this image is tapped. Specify an <a href="#action-objects">action object</a>.</td>
                             </tr>
                           </tbody>
                         </table>
-                        <ul>
-                          <li>The filler's <code>flex</code> property is fixed to 1.</li>
-                          <li>The <code>spacing</code> property of the parent box will be ignored for fillers.</li>
-                        </ul>
+                        <h6 id="drawing-area" class=" h6">About the drawing area</h6>
+                        <p>Specify the max width of the image with the <code>size</code> property and the aspect ratio (horizontal-to-vertical ratio) of the image with the <code>aspectRatio</code> property. The rectangular area determined by the <code>size</code> and <code>aspectRatio</code> properties is called the <strong>drawing area</strong>. The image is rendered in this drawing area.</p>
+                        <p>If the image width specified by the <code>flex</code> property is larger than that calculated from the <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height"><code>size</code> property</a>, the width of the drawing area is scaled down to the width of the component.
+                          If the aspect ratio of the image and that specified by the <code>aspectRatio</code> property do not match, the image is displayed according to the <code>aspectMode</code> property. The default value is <code>fit</code>.
+                          - If the value of <code>aspectMode</code> is <code>cover</code>: The image fills the entire drawing area. Parts of the image that do not fit in the drawing area are not displayed.
+                          - If the value of <code>aspectMode</code> is <code>fit</code>: The entire image is displayed in the drawing area. The background is displayed in the unused areas to the left and right of vertical images and in the areas above and below horizontal images.</p>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Filler component example</p>
+                        <p class="SectionReference_CodeTitle"> Image example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
-  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"filler"</span><span class="w">
+  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://example.com/flex/images/image.jpg"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"size"</span><span class="p">:</span><span class="w"> </span><span class="s2">"full"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"aspectRatio"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1.91:1"</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre>
                         </div>
@@ -8986,8 +9253,9 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="icon" class="h5 h5">Icon component</h5>
-                        <p>This component draws an icon.</p>
+                        <h5 id="icon" class="h5 h5">Icon</h5>
+                        <p>This component renders an icon for decorating the adjacent text.</p>
+                        <p>This component can be used only in a <a href="/en/docs/messaging-api/flex-message-layout/#baseline-box">baseline box</a>.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -9011,34 +9279,70 @@
                               <td style="word-break: normal">Image URL<br>
                                 Protocol: HTTPS<br>
                                 Image format: JPEG or PNG<br>
-                                Maximum image size: 240×240 pixels<br>
+                                Maximum image size: 1024×1024 pixels<br>
                                 Maximum data size: 1 MB</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">margin</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent box. You can specify one of the following values: <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not set a space while the other values set a space whose size increases in the order of listing. The default value is the value of the <code>spacing</code> property of the parent box.<br>
-                                If this component is the first component in the parent box, the <code>margin</code> property will be ignored.</td>
+                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#margin-property"><code>margin</code> property of the component</a> in the API documentation.</td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">size</td>
+                              <td class=" nowrap" style="word-break: normal">position</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Maximum size of the icon width. You can specify one of the following values: <code>xxs</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>3xl</code>, <code>4xl</code>, or <code>5xl</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
-                            </tr>
+                              <td style="word-break: normal">Reference for <code>offsetTop</code>, <code>offsetBottom</code>, <code>offsetStart</code>, and <code>offsetEnd</code>. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>relative</code>: Use the previous box as reference.</li>
+                                  <li>
+                                    <code>absolute</code>: Use the top left of parent element as reference.</li>
+                                </ul>
+                                The default value is <code>relative</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetTop</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The top offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetBottom</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The bottom offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetStart</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The left offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetEnd</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The right offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">size</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Maximum size of the icon width. You can specify one of the following values: <code>xxs</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>3xl</code>, <code>4xl</code>, or <code>5xl</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
+                            </tr>
                             <tr>
                               <td style="word-break: normal">aspectRatio</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Aspect ratio of the icon. Specify in the <code>{width}:{height}</code> format. Specify the value of the <code>{width}</code> property and the <code>{height}</code> property in the range from 1 to 100000. However, you cannot set the <code>{height}</code> property to a value that is more than three times the value of the <code>{width}</code> property. The default value is <code>1:1</code>.</td>
+                              <td style="word-break: normal">Aspect ratio of the icon. <code>{width}:{height}</code> format. The values of <code>{width}</code> and <code>{height}</code> must be in the range 1–100000. <code>{height}</code> can't be more than three times the value of <code>{width}</code>. The default value is <code>1:1</code>.</td>
                             </tr>
                           </tbody>
                         </table>
                         <p>The icon's <code>flex</code> property is fixed to <code>0</code>.</p>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Icon component example</p>
+                        <p class="SectionReference_CodeTitle"> Icon example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
   </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"icon"</span><span class="p">,</span><span class="w">
@@ -9052,8 +9356,8 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="f-image" class="h5 h5">Image component</h5>
-                        <p>This component draws an image.</p>
+                        <h5 id="f-text" class="h5 h5">Text</h5>
+                        <p>This component renders a text string in one row. You can specify font color, size, and weight.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -9068,92 +9372,115 @@
                               <td class=" nowrap" style="word-break: normal">type</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td class=" nowrap" style="word-break: normal"><code>image</code></td>
+                              <td class=" nowrap" style="word-break: normal"><code>text</code></td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">url</td>
+                              <td class=" nowrap" style="word-break: normal">text</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td style="word-break: normal">Image URL<br>
-                                Protocol: HTTPS<br>
-                                Image format: JPEG or PNG<br>
-                                Maximum image size: 1024×1024 pixels<br>
-                                Maximum data size: 1 MB</td>
+                              <td style="word-break: normal">Text Be sure to set either one of the <code>text</code> property or <code>contents</code> property. If you set the <code>contents</code> property, <code>text</code> is ignored.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">contents</td>
+                              <td style="word-break: normal">Array of objects</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Array of <a href="#span">spans</a>. Be sure to set either one of the <code>text</code> property or <code>contents</code> property. If you set the <code>contents</code> property, <code>text</code> is ignored.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">flex</td>
                               <td class=" nowrap" style="word-break: normal">Number</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. The default value for the horizontal parent box is <code>1</code>, and the default value for the vertical parent box is <code>0</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
+                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">margin</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent box. You can specify one of the following values: <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not set a space while the other values set a space whose size increases in the order of listing. The default value is the value of the <code>spacing</code> property of the parent box.<br>
-                                If this component is the first component in the parent box, the <code>margin</code> property will be ignored.</td>
+                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#margin-property"><code>margin</code> property of the component</a> in the API documentation.</td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">align</td>
+                              <td class=" nowrap" style="word-break: normal">position</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Horizontal alignment style. Specify one of the following values:
+                              <td style="word-break: normal">Reference for <code>offsetTop</code>, <code>offsetBottom</code>, <code>offsetStart</code>, and <code>offsetEnd</code>. Specify one of the following values:
                                 <ul>
                                   <li>
-                                    <code>start</code>: Left-aligned</li>
-                                  <li>
-                                    <code>end</code>: Right-aligned</li>
+                                    <code>relative</code>: Use the previous box as reference.</li>
                                   <li>
-                                    <code>center</code>: Center-aligned</li>
+                                    <code>absolute</code>: Use the top left of parent element as reference.</li>
                                 </ul>
-                                The default value is <code>center</code>.</td>
+                                The default value is <code>relative</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">gravity</td>
+                              <td class=" nowrap" style="word-break: normal">offsetTop</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Vertical alignment style. Specify one of the following values:
-                                <ul>
-                                  <li>
-                                    <code>top</code>: Top-aligned</li>
-                                  <li>
-                                    <code>bottom</code>: Bottom-aligned</li>
-                                  <li>
-                                    <code>center</code>: Center-aligned</li>
-                                </ul>
-                                The default value is <code>top</code>.<br>
-                                If the <code>layout</code> property of the parent box is <code>baseline</code>, the <code>gravity</code> property will be ignored.</td>
+                              <td style="word-break: normal">The top offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetBottom</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The bottom offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td style="word-break: normal">offsetStart</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The left offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">offsetEnd</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">The right offset. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-offset">Offset</a> in the API documentation.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">size</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Maximum size of the image width. You can specify one of the following values: <code>xxs</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>3xl</code>, <code>4xl</code>, <code>5xl</code>, or <code>full</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
+                              <td style="word-break: normal">Font size. You can specify one of the following values: <code>xxs</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>3xl</code>, <code>4xl</code>, or <code>5xl</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
                             </tr>
                             <tr>
-                              <td style="word-break: normal">aspectRatio</td>
+                              <td class=" nowrap" style="word-break: normal">align</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Aspect ratio of the image. Specify in the <code>{width}:{height}</code> format. Specify the value of the <code>{width}</code> property and the <code>{height}</code> property in the range from 1 to 100000. However, you cannot set the <code>{height}</code> property to a value that is more than three times the value of the <code>{width}</code> property. The default value is <code>1:1</code>.</td>
+                              <td style="word-break: normal">Alignment style in horizontal direction. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#align-property">Alignment in horizontal direction</a> in the API documentation.</td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">aspectMode</td>
+                              <td class=" nowrap" style="word-break: normal">gravity</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Style of the image. Specify one of the following values:
+                              <td style="word-break: normal">Alignment style in vertical direction. The default value is <code>top</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#gravity-property">Alignment in vertical direction</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">wrap</td>
+                              <td class=" nowrap" style="word-break: normal">Boolean</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">
+                                <code>true</code> to wrap text. The default value is <code>false</code>. If set to <code>true</code>, you can use a new line character (<code>\n</code>) to begin on a new line. For more information, see <a href="/en/docs/messaging-api/flex-message-elements/#text-wrap">Wrapping text</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">maxLines</td>
+                              <td class=" nowrap" style="word-break: normal">Number</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Max number of lines. If the text does not fit in the specified number of lines, an ellipsis (…) is displayed at the end of the last line. If set to <code>0</code>, all the text is displayed. The default value is <code>0</code>. This property is supported on the following versions of LINE.
                                 <ul>
-                                  <li>
-                                    <code>cover</code>: The image fills the entire drawing area. Parts of the image that do not fit in the drawing area are not displayed.</li>
-                                  <li>
-                                    <code>fit</code>: The entire image is displayed in the drawing area. The background is displayed in the unused areas to the left and right of vertical images and in the areas above and below horizontal images.</li>
-                                  The default value is <code>fit</code>.</ul>
+                                  <li>LINE for iOS and Android: 8.11.0 and later</li>
+                                </ul>
                               </td>
                             </tr>
                             <tr>
-                              <td style="word-break: normal">backgroundColor</td>
+                              <td class=" nowrap" style="word-break: normal">weight</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Background color of the image. Use a hexadecimal color code.</td>
+                              <td style="word-break: normal">Font weight. You can specify one of the following values: <code>regular</code> or <code>bold</code>. Specifying <code>bold</code> makes the font bold. The default value is <code>regular</code>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">color</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Font color. Use a hexadecimal color code.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">action</td>
@@ -9161,17 +9488,46 @@
                               <td class=" nowrap" style="word-break: normal">Optional</td>
                               <td style="word-break: normal">Action performed when this image is tapped. Specify an <a href="#action-objects">action object</a>.</td>
                             </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">style</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Style of the text. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>normal</code>: Normal</li>
+                                  <li>
+                                    <code>italic</code>: Italic</li>
+                                </ul>
+                                The default value is <code>normal</code>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">decoration</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Decoration of the text. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>none</code>: No decoration</li>
+                                  <li>
+                                    <code>underline</code>: Underline</li>
+                                  <li>
+                                    <code>line-through</code>: Strikethrough</li>
+                                </ul>
+                                The default value is <code>none</code>.</td>
+                            </tr>
                           </tbody>
                         </table>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Image component example</p>
+                        <p class="SectionReference_CodeTitle"> Text example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
-  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://example.com/flex/images/image.jpg"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"size"</span><span class="p">:</span><span class="w"> </span><span class="s2">"full"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"aspectRatio"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1.91:1"</span><span class="w">
+  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"text"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Hello, World!"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"size"</span><span class="p">:</span><span class="w"> </span><span class="s2">"xl"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"weight"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bold"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"color"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#0000ff"</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre>
                         </div>
@@ -9179,8 +9535,8 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="separator" class="h5 h5">Separator component</h5>
-                        <p>This component draws a separator between components in the parent box.</p>
+                        <h5 id="span" class="h5 h5">Span</h5>
+                        <p>This component renders multiple text strings with different designs in one row. You can specify the color, size, weight, and decoration for the font. Span is set to <code>contents</code> property in <a href="#text">Text</a>.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -9195,30 +9551,74 @@
                               <td class=" nowrap" style="word-break: normal">type</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td class=" nowrap" style="word-break: normal"><code>separator</code></td>
+                              <td class=" nowrap" style="word-break: normal"><code>span</code></td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">margin</td>
+                              <td class=" nowrap" style="word-break: normal">text</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent box. You can specify one of the following values: <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not set a space while the other values set a space whose size increases in the order of listing. The default value is the value of the <code>spacing</code> property of the parent box.<br>
-                                If this component is the first component in the parent box, the <code>margin</code> property will be ignored.</td>
+                              <td class=" nowrap" style="word-break: normal">Required</td>
+                              <td style="word-break: normal">Text. If the <code>wrap</code> property of the parent text is set to <code>true</code>, you can use a new line character (<code>\n</code>) to begin on a new line.</td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">color</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Color of the separator. Use a hexadecimal color code.</td>
+                              <td style="word-break: normal">Font color. Use a hexadecimal color code.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">size</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Font size. You can specify one of the following values: <code>xxs</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>3xl</code>, <code>4xl</code>, or <code>5xl</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">weight</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Font weight. You can specify one of the following values: <code>regular</code> or <code>bold</code>. Specifying <code>bold</code> makes the font bold. The default value is <code>regular</code>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">style</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Style of the text. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>normal</code>: Normal</li>
+                                  <li>
+                                    <code>italic</code>: Italic</li>
+                                </ul>
+                                The default value is <code>normal</code>.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">decoration</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Decoration of the text. Specify one of the following values:
+                                <ul>
+                                  <li>
+                                    <code>none</code>: No decoration</li>
+                                  <li>
+                                    <code>underline</code>: Underline</li>
+                                  <li>
+                                    <code>line-through</code>: Strikethrough</li>
+                                </ul>
+                                The default value is <code>none</code>. <br>
+                                Note: The decoration set in the <code>decoration</code> property of the <a href="#f-text">text</a> cannot be overwritten by the <code>decoration</code> property of the span.</td>
                             </tr>
                           </tbody>
                         </table>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Separator component example</p>
+                        <p class="SectionReference_CodeTitle"> Span example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
-  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"separator"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"color"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#000000"</span><span class="w">
+  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"span"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"蛙"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"size"</span><span class="p">:</span><span class="w"> </span><span class="s2">"xxl"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"weight"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bold"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"style"</span><span class="p">:</span><span class="w"> </span><span class="s2">"italic"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"color"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#4f8f00"</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre>
                         </div>
@@ -9226,8 +9626,8 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="spacer" class="h5 h5">Spacer component</h5>
-                        <p>This is an invisible component that places a fixed-size space at the beginning or end of the box.</p>
+                        <h5 id="separator" class="h5 h5">Separator</h5>
+                        <p>This component renders a separating line within a box. A vertical line will be rendered in a horizontal box and a horizontal line will be rendered in a vertical box.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -9242,24 +9642,29 @@
                               <td class=" nowrap" style="word-break: normal">type</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td class=" nowrap" style="word-break: normal"><code>spacer</code></td>
+                              <td class=" nowrap" style="word-break: normal"><code>separator</code></td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">size</td>
+                              <td class=" nowrap" style="word-break: normal">margin</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Size of the space. You can specify one of the following values: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
+                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent element. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#margin-property"><code>margin</code> property of the component</a> in the API documentation.</td>
+                            </tr>
+                            <tr>
+                              <td class=" nowrap" style="word-break: normal">color</td>
+                              <td class=" nowrap" style="word-break: normal">String</td>
+                              <td class=" nowrap" style="word-break: normal">Optional</td>
+                              <td style="word-break: normal">Color of the separator. Use a hexadecimal color code.</td>
                             </tr>
                           </tbody>
                         </table>
-                        <p>The <code>spacing</code> property of the parent box will be ignored for spacers.</p>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Spacer component example</p>
+                        <p class="SectionReference_CodeTitle"> Separator example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
-  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"spacer"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"size"</span><span class="p">:</span><span class="w"> </span><span class="s2">"md"</span><span class="w">
+  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"separator"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"color"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#000000"</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre>
                         </div>
@@ -9267,8 +9672,8 @@
                     </section>
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
-                        <h5 id="f-text" class="h5 h5">Text component</h5>
-                        <p>This component draws text. You can format the text.</p>
+                        <h5 id="filler" class="h5 h5">Filler</h5>
+                        <p>This component is used to create a space. You can put a space between, before, or after components by inserting a filler anywhere within a box.</p>
                         <table class="Table">
                           <thead class=" nowrap">
                             <tr>
@@ -9283,112 +9688,65 @@
                               <td class=" nowrap" style="word-break: normal">type</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td class=" nowrap" style="word-break: normal"><code>text</code></td>
-                            </tr>
-                            <tr>
-                              <td class=" nowrap" style="word-break: normal">text</td>
-                              <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Required</td>
-                              <td class=" nowrap" style="word-break: normal">Text</td>
+                              <td class=" nowrap" style="word-break: normal"><code>filler</code></td>
                             </tr>
                             <tr>
                               <td class=" nowrap" style="word-break: normal">flex</td>
                               <td class=" nowrap" style="word-break: normal">Number</td>
                               <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. The default value for the horizontal parent box is <code>1</code>, and the default value for the vertical parent box is <code>0</code>. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
-                            </tr>
-                            <tr>
-                              <td class=" nowrap" style="word-break: normal">margin</td>
-                              <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Minimum space between this component and the previous component in the parent box. You can specify one of the following values: <code>none</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. <code>none</code> does not set a space while the other values set a space whose size increases in the order of listing. The default value is the value of the <code>spacing</code> property of the parent box.<br>
-                                If this component is the first component in the parent box, the <code>margin</code> property will be ignored.</td>
-                            </tr>
-                            <tr>
-                              <td class=" nowrap" style="word-break: normal">size</td>
-                              <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Font size. You can specify one of the following values: <code>xxs</code>, <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>3xl</code>, <code>4xl</code>, or <code>5xl</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
-                            </tr>
-                            <tr>
-                              <td class=" nowrap" style="word-break: normal">align</td>
-                              <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Horizontal alignment style. Specify one of the following values:
-                                <ul>
-                                  <li>
-                                    <code>start</code>: Left-aligned</li>
-                                  <li>
-                                    <code>end</code>: Right-aligned</li>
-                                  <li>
-                                    <code>center</code>: Center-aligned</li>
-                                </ul>
-                                The default value is <code>start</code>.</td>
-                            </tr>
-                            <tr>
-                              <td class=" nowrap" style="word-break: normal">gravity</td>
-                              <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Vertical alignment style. Specify one of the following values:
-                                <ul>
-                                  <li>
-                                    <code>top</code>: Top-aligned</li>
-                                  <li>
-                                    <code>bottom</code>: Bottom-aligned</li>
-                                  <li>
-                                    <code>center</code>: Center-aligned</li>
-                                </ul>
-                                The default value is <code>top</code>.<br>
-                                If the <code>layout</code> property of the parent box is <code>baseline</code>, the <code>gravity</code> property will be ignored.</td>
-                            </tr>
-                            <tr>
-                              <td class=" nowrap" style="word-break: normal">wrap</td>
-                              <td class=" nowrap" style="word-break: normal">Boolean</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">
-                                <code>true</code> to wrap text. The default value is <code>false</code>. If set to <code>true</code>, you can use a new line character (\n) to begin on a new line.</td>
+                              <td style="word-break: normal">The ratio of the width or height of this component within the parent box. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#component-width-and-height">Width and height of components</a>.</td>
                             </tr>
+                          </tbody>
+                        </table>
+                        <p>The <code>spacing</code> property of the parent element will be ignored for fillers.</p>
+                        <h5 id="spacer" class="h5 h5">Spacer (not recommended)</h5>
+                        <div class="annotation is-note">
+                          <div class="annotation-header">
+                            <i class="global-icon global-icon_note">note</i>
+                            Note
+                          </div>
+                          <div class="annotation-body">
+                            <p>The spacer will be removed in a future release. We recommend setting the padding of the box without using a spacer. For more information, see <a href="/en/docs/messaging-api/flex-message-layout/#padding-property">Box padding</a> in the API documentation.</p>
+                          </div>
+                        </div>
+                        <p>This is an invisible component that places a fixed-size space at the beginning or end of the box.</p>
+                        <table class="Table">
+                          <thead class=" nowrap">
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">maxLines</td>
-                              <td class=" nowrap" style="word-break: normal">Number</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Max number of lines. If the text does not fit in the specified number of lines, an ellipsis (…) is displayed at the end of the last line. If set to <code>0</code>, all the text is displayed. The default value is <code>0</code>. This property is supported on the following versions of LINE.
-                                <ul>
-                                  <li>LINE for iOS and Android: 8.11.0 and later</li>
-                                  <li>LINE for Windows and macOS: 5.9.0 and later</li>
-                                </ul>
-                              </td>
+                              <th class=" nowrap" style="word-break: normal">Property</th>
+                              <th class=" nowrap" style="word-break: normal">Type</th>
+                              <th class=" nowrap" style="word-break: normal">Required</th>
+                              <th style="word-break: normal">Description</th>
                             </tr>
+                          </thead>
+                          <tbody>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">weight</td>
+                              <td class=" nowrap" style="word-break: normal">type</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Font weight. You can specify one of the following values: <code>regular</code> or <code>bold</code>. Specifying <code>bold</code> makes the font bold. The default value is <code>regular</code>.</td>
+                              <td class=" nowrap" style="word-break: normal">Required</td>
+                              <td class=" nowrap" style="word-break: normal"><code>spacer</code></td>
                             </tr>
                             <tr>
-                              <td class=" nowrap" style="word-break: normal">color</td>
+                              <td class=" nowrap" style="word-break: normal">size</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Font color. Use a hexadecimal color code.</td>
-                            </tr>
-                            <tr>
-                              <td class=" nowrap" style="word-break: normal">action</td>
-                              <td class=" nowrap" style="word-break: normal">Object</td>
-                              <td class=" nowrap" style="word-break: normal">Optional</td>
-                              <td style="word-break: normal">Action performed when this text is tapped. Specify an <a href="#action-objects">action object</a>.</td>
+                              <td class=" nowrap" style="word-break: normal">Required</td>
+                              <td style="word-break: normal">Size of the space. You can specify one of the following values: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, or <code>xxl</code>. The size increases in the order of listing. The default value is <code>md</code>.</td>
                             </tr>
                           </tbody>
                         </table>
+                        <p>The <code>spacing</code> property of the parent element will be ignored for spacers.</p>
                       </div>
                       <div class="SectionReference_Code">
-                        <p class="SectionReference_CodeTitle"> Text component example</p>
+                        <p class="SectionReference_CodeTitle"> Spacer example</p>
                         <div class="CodeSwitchBlock">
                           <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
-  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"text"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Hello, World!"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"size"</span><span class="p">:</span><span class="w"> </span><span class="s2">"xl"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"weight"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bold"</span><span class="p">,</span><span class="w">
-  </span><span class="s2">"color"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#0000ff"</span><span class="w">
+  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"spacer"</span><span class="p">,</span><span class="w">
+  </span><span class="s2">"size"</span><span class="p">:</span><span class="w"> </span><span class="s2">"md"</span><span class="w">
+</span><span class="p">}</span><span class="w">
+</span></code></pre>
+                          <p class="SectionReference_CodeTitle"> Filler example</p>
+                          <pre class="highlight json" data-code="plaintext"><code><span class="p">{</span><span class="w">
+  </span><span class="s2">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"filler"</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre>
                         </div>
@@ -9439,7 +9797,7 @@
                                   <li>Optional for image carousel templates. Max: 12 characters.</li>
                                   <li>Optional for rich menus. Spoken when the accessibility feature is enabled on the client device. Max: 20 characters. Supported on LINE 8.2.0 and later for iOS.</li>
                                   <li>Required for quick reply buttons. Max: 20 characters. Supported on LINE 8.11.0 and later for iOS and Android.</li>
-                                  <li>Required for the button component of Flex Message. This property can be specified for the box, image, and text components but its value is not displayed. Max: 20 characters.</li>
+                                  <li>Required for the button of Flex Message. This property can be specified for the box, image, and text but its value is not displayed. Max: 20 characters.</li>
                                 </ul>
                               </td>
                             </tr>
@@ -9454,7 +9812,7 @@
                               <td style="word-break: normal">displayText</td>
                               <td class=" nowrap" style="word-break: normal">String</td>
                               <td style="word-break: normal">See description</td>
-                              <td style="word-break: normal">Text displayed in the chat as a message sent by the user when the action is performed. Required for quick reply buttons. Optional for the other message types. <br>
+                              <td style="word-break: normal">Text displayed in the chat as a message sent by the user when the action is performed. Required for quick reply buttons. Optional for the other message types.<br>
                                 Max: 300 characters<br>
                                 The <code>displayText</code> and <code>text</code> properties cannot both be used at the same time.</td>
                             </tr>
@@ -9513,7 +9871,7 @@
                                   <li>Optional for image carousel templates. Max: 12 characters.</li>
                                   <li>Optional for rich menus. Spoken when the accessibility feature is enabled on the client device. Max: 20 characters. Supported on LINE 8.2.0 and later for iOS.</li>
                                   <li>Required for quick reply buttons. Max: 20 characters. Supported on LINE 8.11.0 and later for iOS and Android.</li>
-                                  <li>Required for the button component of Flex Message. This property can be specified for the box, image, and text components but its value is not displayed. Max: 20 characters.</li>
+                                  <li>Required for the button of Flex Message. This property can be specified for the box, image, and text but its value is not displayed. Max: 20 characters.</li>
                                 </ul>
                               </td>
                             </tr>
@@ -9568,7 +9926,7 @@
                                   <li>Required for templates other than image carousel. Max: 20 characters.</li>
                                   <li>Optional for image carousel templates. Max: 12 characters.</li>
                                   <li>Optional for rich menus. Spoken when the accessibility feature is enabled on the client device. Max: 20 characters. Supported on LINE 8.2.0 and later for iOS.</li>
-                                  <li>Required for the button component of Flex Message. This property can be specified for the box, image, and text components but its value is not displayed. Max: 20 characters.</li>
+                                  <li>Required for the button of Flex Message. This property can be specified for the box, image, and text but its value is not displayed. Max: 20 characters.</li>
                                 </ul>
                               </td>
                             </tr>
@@ -9612,9 +9970,14 @@
                     <section class="SectionReference SectionReference-hasSide">
                       <div class="SectionReference_Spec">
                         <h3 id="datetime-picker-action" class="h3 h3">Datetime picker action</h3>
-                        <div class="Md108FrameNote">
-                          <p><span class="Md07TextBold">Note: </span>The datetime picker action is only supported on versions equal to or later than LINE 7.9.0 for iOS and LINE 7.12.0 for Android.
-                          </p>
+                        <div class="annotation is-note">
+                          <div class="annotation-header">
+                            <i class="global-icon global-icon_note">note</i>
+                            Note
+                          </div>
+                          <div class="annotation-body">
+                            <p>The datetime picker action is only supported on versions equal to or later than LINE 7.9.0 for iOS and LINE 7.12.0 for Android.</p>
+                          </div>
                         </div>
                         <p>When a control associated with this action is tapped, a <a href="#postback-event">postback event</a> is returned via webhook with the date and time selected by the user from the date and time selection dialog. The datetime picker action does not support time zones.</p>
                         <table class="Table">
@@ -9644,7 +10007,7 @@
                                   <li>Optional for image carousel templates. Max: 12 characters.</li>
                                   <li>Optional for rich menus. Spoken when the accessibility feature is enabled on the client device. Max: 20 characters. Supported on LINE 8.2.0 and later for iOS.</li>
                                   <li>Required for quick reply buttons. Max: 20 characters. Supported on LINE 8.11.0 and later for iOS and Android.</li>
-                                  <li>Required for the button component of Flex Message. This property can be specified for the box, image, and text components but its value is not displayed. Max: 20 characters.</li>
+                                  <li>Required for the button of Flex Message. This property can be specified for the box, image, and text but its value is not displayed. Max: 20 characters.</li>
                                 </ul>
                               </td>
                             </tr>
@@ -10269,8 +10632,8 @@
       <div class="GlobalFooterWrapper">
       </div>
     </footer>
-    <script src="/javascripts/vendors-site-2cec293a.js"></script>
-    <script src="/javascripts/site-07831a5c.js"></script>
+    <script src="/javascripts/vendors-site-2a5cf5ec.js"></script>
+    <script src="/javascripts/site-5c2d910d.js"></script>
     <script src="/assets/js/lib.js"></script>
     <script src="/assets/js/reference/local.js"></script>
   </body>
-- 
2.21.0