Add Collapsible css part example

Author: bendera

src/components/examples/collapsible/CssBodyPartExample.astro

@@ -0,0 +1,23 @@
+<style>
+  .css-part-example::part(body) {
+    overflow: visible;
+  }
+
+  .css-part-example p:last-child {
+    margin-bottom: 0;
+  }
+</style>
+
+<vscode-collapsible title="Customized CSS part example" class="css-part-example" open>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <vscode-single-select>
+    <vscode-option>Lorem</vscode-option>
+    <vscode-option>Ipsum</vscode-option>
+    <vscode-option>Dolor</vscode-option>
+    <vscode-option>Sit</vscode-option>
+    <vscode-option>Et</vscode-option>
+    <vscode-option>Amur</vscode-option>
+    <vscode-option>Sadispcing</vscode-option>
+  </vscode-single-select>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</vscode-collapsible>

src/components/examples/collapsible/Imports.astro

@@ -6,5 +6,7 @@
   import "@vscode-elements/elements/dist/vscode-badge/index.js";
   import "@vscode-elements/elements/dist/vscode-scrollable/index.js";
   import "@vscode-elements/elements/dist/vscode-tree/index.js";
+  import "@vscode-elements/elements/dist/vscode-single-select/index.js";
+  import "@vscode-elements/elements/dist/vscode-option/index.js";
   import "@vscode-elements/elements/dist/vscode-collapsible/index.js";
 </script>

src/content/components/collapsible.mdx

@@ -8,6 +8,7 @@ import ActionsExample from "@components/examples/collapsible/ActionsExample.astr
 import DecorationsExample from "@components/examples/collapsible/DecorationsExample.astro";
 import ScrollableExample from "@components/examples/collapsible/ScrollableExample.astro";
 import ToggleExample from "@components/examples/collapsible/ToggleExample.astro";
+import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExample.astro";
 import Imports from "@components/examples/collapsible/Imports.astro";
 
 <Imports />
@@ -160,6 +161,43 @@ Elements in the `decorations` slot are always visible, in contrast to the `actio
   </Fragment>
 </Demo>
 
+## Overflown content
+
+The overflown content of the Collapsible component is hidden by default. Sometimes, this behavior 
+can be problematic. In such cases, it is useful that the Collapsible body is customizable.
+
+<Demo>
+  <CssBodyPartExample />
+  <Fragment slot="html">
+    ```html
+    <vscode-collapsible title="Customized CSS part example" class="css-part-example" open>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <vscode-single-select>
+        <vscode-option>Lorem</vscode-option>
+        <vscode-option>Ipsum</vscode-option>
+        <vscode-option>Dolor</vscode-option>
+        <vscode-option>Sit</vscode-option>
+        <vscode-option>Et</vscode-option>
+        <vscode-option>Amur</vscode-option>
+        <vscode-option>Sadispcing</vscode-option>
+      </vscode-single-select>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </vscode-collapsible>
+    ```
+  </Fragment>
+  <Fragment slot="css">
+    ```css
+    .css-part-example::part(body) {
+      overflow: visible;
+    }
+
+    .css-part-example p:last-child {
+      margin-bottom: 0;
+    }
+    ```
+  </Fragment>
+</Demo>
+
 ## Displaying large amounts of data
 
 Long content can be managed by the [Scrollable](/components/scrollable) component.