Merge remote-tracking branch 'origin/main' into docs-new

Author: bendera

.gitignore

@@ -23,4 +23,4 @@ pnpm-debug.log*
 
 .vscode
 !.vscode/extensions.json
-!.vscode/launch.json
+!.vscode/launch.json

public/googlede42a4469fcf47eb.html

@@ -0,0 +1 @@
+google-site-verification: googlede42a4469fcf47eb.html

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

@@ -3,6 +3,8 @@
   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/components/examples/collapsible/ToggleExample.astro

@@ -0,0 +1,11 @@
+<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
+  <p>Test content</p>
+</vscode-collapsible>
+
+<script>
+  const el = document.querySelector("#toggle-event-example");
+
+  el?.addEventListener("vsc-collapsible-toggle", (ev) => {
+    console.log(ev);
+  });
+</script>

src/content/docs/components/collapsible.mdx

@@ -10,6 +10,8 @@ import BasicExample from "@components/examples/collapsible/BasicExample.astro";
 import ActionsExample from "@components/examples/collapsible/ActionsExample.astro";
 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";
 
 <Imports />
 <PageSwitcher />
@@ -37,6 +39,30 @@ import ScrollableExample from "@components/examples/collapsible/ScrollableExampl
   </Fragment>
 </Demo>
 
+## Toggle event
+
+A custom event is dispatched when the visibility of content changes.
+
+<Demo>
+  <ToggleExample />
+  <Fragment slot="html">
+    ```html
+    <vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
+      <p>Test content</p>
+    </vscode-collapsible>
+    ```
+  </Fragment>
+  <Fragment slot="js">
+    ```javascript
+    const el = document.querySelector("#toggle-event-example");
+
+    el.addEventListener("vsc-collapsible-toggle", (ev) => {
+      console.log(ev);
+    });
+    ```
+  </Fragment>
+</Demo>
+
 ## Actions
 
 Clickable action icons. Please review the developer console for logged messages. These icons are
@@ -138,6 +164,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.

src/content/docs/components/icon.mdx

@@ -22,6 +22,11 @@ import Imports from "@components/examples/icon/Imports.astro";
   ```html
   <!--
     Download codicons from https://github.com/microsoft/vscode-codicons
+
+    Note the required `id` on the link element!
+    To use web fonts in web components, the component needs to include
+    the font stylesheet in addition to the page. This id serves as a lookup so
+    the icon component can automatically create and insert it's own link tag.
   -->
   <link
     rel="stylesheet"