From 35326b6ed93b61d882b338e76f4183bbd31bffcc Mon Sep 17 00:00:00 2001
From: Mark Provo Kluit <mprovok@proton.me>
Date: Thu, 1 Oct 2026 14:10:11 +0200
Subject: [PATCH] docs(landing-page): describe supporting pane on Getting
 started page

---
 apps/landing-page/src/routes/get-started.tsx | 32 +++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/apps/landing-page/src/routes/get-started.tsx b/apps/landing-page/src/routes/get-started.tsx
index 9ca99fa2..9380e9d0 100644
--- a/apps/landing-page/src/routes/get-started.tsx
+++ b/apps/landing-page/src/routes/get-started.tsx
@@ -303,9 +303,15 @@ const PageGetStarted: Component = () => {
                     <code>fixed-flexible</code>
                   </p>
                 </li>
+                <li>
+                  <p>
+                    <code>flexible-flexible</code>
+                  </p>
+                </li>
               </ul>
               <p>
-                Use the boolean prop <code>showDragHandle</code> to allow the user to resize the panes.
+                Use the boolean prop <code>showDragHandle</code> to allow the user to resize the panes and the boolean
+                prop <code>rounded</code> to enable or disable rounded panes.
               </p>
               <H3 role="headline" size="small">
                 Canonical layouts
@@ -319,6 +325,30 @@ const PageGetStarted: Component = () => {
                     <code>selected</code> to display either the detail pane or the list pane on compact width screens.
                   </p>
                 </li>
+                <li>
+                  <p>
+                    <strong>Supporting pane</strong>: use <code>&lt;MaterialSupportingPaneLayout&gt;</code>instead of{' '}
+                    <code>&lt;MaterialBodyLayout&gt;</code> for a layout with one flexible pane and one supporting pane.
+                    It should have one <code>&lt;MaterialPane&gt;</code> and a one{' '}
+                    <code>&lt;MaterialSupportingPane&gt;</code>
+                    as its children. The supporting pane requires the property <code>variant</code> with one of the
+                    following values:
+                  </p>
+                  <ul>
+                    <li>
+                      <p>
+                        <code>standard</code>: display the supporting pane below the main pane on compact or medium
+                        width screens, or on the trailing edge on larger screens.
+                      </p>
+                    </li>
+                    <li>
+                      <p>
+                        <code>modal</code>: display the supporting pane in a modal bottom sheet on compact or medium
+                        width screens, or in a modal side sheet on larger screens.
+                      </p>
+                    </li>
+                  </ul>
+                </li>
               </ul>
             </Span>
           </main>