### Install VSCode Elements

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Installs the VSCode Elements library using npm. This is the primary method for adding the library to your project.

```bash
npm i @vscode-elements/elements
```

--------------------------------

### Include Bundled VSCode Elements

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Includes the bundled version of VSCode Elements directly in your HTML file using a script tag. This is a simple way to get started.

```html
<script
  src="node_modules/@vscode-elements/elements/dist/bundled.js"
  type="module"
></script>
```

--------------------------------

### Set VSCode Element Attribute via HTML

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Shows how to configure a VSCode Element using HTML attributes, like setting the 'variant' for a vscode-badge.

```html
<vscode-badge variant="activity-bar-counter"></vscode-badge>
```

--------------------------------

### VSCode Element Default Slot Usage

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Shows the basic usage of a VSCode Element, like vscode-button, with content placed in the default slot.

```html
<vscode-button>Click here</vscode-button>
```

--------------------------------

### Set VSCode Element Property via JavaScript

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Demonstrates how to configure a VSCode Element's property, such as setting the 'variant' of a vscode-badge, using JavaScript.

```javascript
const badge = document.querySelector("vscode-badge");
badge.variant = "activity-bar-counter";
```

--------------------------------

### Listen to VSCode Element Events

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Demonstrates how to add an event listener to a VSCode Element, such as listening for the 'vsc-tabs-select' event on a vscode-tabs component.

```javascript
const tabs = document.querySelector("vscode-tabs");
tabs.addEventListener("vsc-tabs-select", () => {
  console.log("A tab has been selected.");
});
```

--------------------------------

### Call VSCode Element Method

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Illustrates how to invoke a method on a VSCode Element instance, such as calling 'reportValidity()' on a textfield.

```javascript
const textfield = document.querySelector("vscode-textfield");
textfield.reportValidity();
```

--------------------------------

### Basic Form Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/working-with-forms.mdx

Demonstrates a simple form submission using VSCode Elements components. This example shows how to create a form with a text input and a submit button, mimicking native HTML form behavior.

```html
<form
  action="/working-with-forms"
  method="get"
  enctype="application/x-www-form-urlencoded"
>
  <vscode-label for="query">Search query:</vscode-label>
  <vscode-textfield id="query" name="query"></vscode-textfield>
  <vscode-button type="submit">Search</vscode-button>
</form>
```

--------------------------------

### Starlight Project Commands

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/README.md

Lists essential npm commands for managing and running an Astro project with Starlight. These commands cover installation, development, building, and previewing.

```bash
npm install
npm run dev
npm run build
npm run preview
npm run astro ...
npm run astro -- --help
```

--------------------------------

### Basic Textfield Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/textfield.mdx

Demonstrates the fundamental usage of the vscode-textfield component with no additional attributes or slots.

```html
<vscode-textfield></vscode-textfield>
```

--------------------------------

### Basic Tabs Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/tabs.mdx

Demonstrates the basic usage of the vscode-tabs component with multiple tab headers and panels. Includes a badge for one of the tabs.

```html
<vscode-tabs selected-index="1">
  <vscode-tab-header slot="header">Lorem</vscode-tab-header>
  <vscode-tab-panel>
    <p>
      Lorem ipsum dolor...
    </p>
  </vscode-tab-panel>
  <vscode-tab-header slot="header">
    Ipsum<vscode-badge variant="counter" slot="content-after">2</vscode-badge>
  </vscode-tab-header>
  <vscode-tab-panel>
    <p>
      Aliquam malesuada rhoncus nulla...
    </p>
  </vscode-tab-panel>
  <vscode-tab-header slot="header">Dolor</vscode-tab-header>
  <vscode-tab-panel>
    <p>
      Nulla facilisi. Vivamus...
    </p>
  </vscode-tab-panel>
</vscode-tabs>
```

--------------------------------

### Toggleable Toolbar Button Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/toolbar-button.mdx

Provides an example of a toggleable vscode-toolbar-button and demonstrates how to handle the 'change' event using JavaScript.

```html
<vscode-toolbar-button
  icon="account"
  label="Account"
  toggleable
  id="toggle-example"
></vscode-toolbar-button>
```

```javascript
const el = document.querySelector("#toggle-example");

el.addEventListener("change", () => {
  console.log("Checked:", el.checked);
});
```

--------------------------------

### Toolbar Button Basic Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/toolbar-button.mdx

Demonstrates the basic usage of the vscode-toolbar-button component with an icon and a label for screen readers.

```html
<vscode-toolbar-button
  icon="account"
  label="Account"
></vscode-toolbar-button>
```

--------------------------------

### Basic Toolbar Button Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/toolbar-container.mdx

Demonstrates the basic usage of vscode-toolbar-container and vscode-toolbar-button to create a functional toolbar with labeled buttons.

```html
<vscode-toolbar-container>
  <vscode-toolbar-button icon="files" label="Files"></vscode-toolbar-button>
  <vscode-toolbar-button icon="search" label="Search"></vscode-toolbar-button>
  <vscode-toolbar-button icon="source-control" label="Source Control"></vscode-toolbar-button>
  <vscode-toolbar-button icon="debug-alt" label="Debug"></vscode-toolbar-button>
  <vscode-toolbar-button icon="extensions" label="Extensions"></vscode-toolbar-button>
</vscode-toolbar-container>
```

--------------------------------

### Basic Multi Select Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/multi-select.mdx

Demonstrates the basic usage of the vscode-multi-select component with options and event handling.

```html
<vscode-multi-select id="select-example">
  <vscode-option description="Consectetur adipiscing elit">
    Lorem
  </vscode-option>
  <vscode-option selected description="Donec elit odio">
    Ipsum
  </vscode-option>
  <vscode-option description="Aliquam ac vulputate eros">
    Dolor
  </vscode-option>
</vscode-multi-select>
```

```javascript
const select = document.querySelector("#select-example");

select.addEventListener("change", () => {
  console.log(select.value);
});
```

--------------------------------

### Basic Progress Ring Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/progress-ring.mdx

Demonstrates the basic usage of the vscode-progress-ring component. This snippet shows the HTML structure required to render a simple progress ring.

```html
<vscode-progress-ring></vscode-progress-ring>
```

--------------------------------

### Basic vscode-collapsible Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/collapsible.mdx

Demonstrates the basic usage of the vscode-collapsible component, showing how to create collapsible sections that can be open by default or closed.

```html
<vscode-collapsible heading="Basic example" open>
  <p>Open by default</p>
</vscode-collapsible>
<vscode-collapsible heading="Basic example">
  <p>Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.</p>
</vscode-collapsible>
```

--------------------------------

### Import Specific VSCode Element Component

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Imports a specific VSCode Element component, such as vscode-button, for use in your TypeScript project. This allows for more granular control over dependencies.

```typescript
import "@vscode-elements/elements/dist/vscode-button/index.js";
```

--------------------------------

### Customize VSCode Element Appearance with CSS Properties

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Explains how to customize the appearance of VSCode Elements using CSS custom properties, such as changing the hover background of a vscode-button.

```css
vscode-button {
  --vscode-button-hoverBackground: red;
}
```

--------------------------------

### VSCode Element Named Slot Usage

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Demonstrates using a named slot ('decorations') within a VSCode Element (vscode-collapsible) to place another component (vscode-badge).

```html
<vscode-collapsible title="Decorations example" class="collapsible">
  <vscode-badge variant="counter" slot="decorations">99</vscode-badge>
  <p>
    Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
    efficitur augue.
  </p>
</vscode-collapsible>
```

--------------------------------

### Install Webview Playground

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/framework-integrations/react.mdx

Installs the @vscode-elements/webview-playground package as a development dependency for applying VSCode styles during development.

```bash
npm i -D @vscode-elements/webview-playground
```

--------------------------------

### Responsive Form Container Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/form-container.mdx

Demonstrates the responsive layout capabilities of the Form Container component.

```astro
<Demo>
  <ResponsiveExample />
</Demo>
```

--------------------------------

### VSCode Element Default View CSS

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Provides a default, hidden state for VSCode elements using CSS until they are registered. This prevents FOUC (Flash of Unstyled Content).

```css
vscode-buttton:not(:defined) {
  display: inline-block;
  height: 26px;
  visibility: hidden;
  width: 100px;
}
```

--------------------------------

### Basic Form Helper Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/form-helper.mdx

Demonstrates the basic usage of the vscode-form-helper component, allowing for rich HTML content within the helper text.

```html
<vscode-form-helper>
  <p>
    Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
    elit. <span class="error">Suspendisse</span> faucibus imperdiet sapien,
    a gravida <a href="#">dolor</a>.
  </p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>
</vscode-form-helper>
```

--------------------------------

### Basic Checkbox Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/checkbox.mdx

Demonstrates a standard checkbox with a label and a pre-checked state. Includes the component usage and its HTML representation.

```astro
import FormControlInfo from "@components/form-control-info.md";

import Demo from "@components/Demo.astro";
import PageSwitcher from "@components/PageSwitcher.astro";
import Imports from "@components/examples/checkbox/Imports.astro";

<Imports />
<PageSwitcher />
<FormControlInfo />

## Basic example

<Demo>
  <vscode-checkbox
    label="Checkbox example"
    value="testvalue1"
    checked
  ></vscode-checkbox>
  <Fragment slot="html">
    ```html
    <vscode-checkbox
      label="Checkbox example"
      value="testvalue1"
      checked
    ></vscode-checkbox>
    ```
  </Fragment>
</Demo>
```

--------------------------------

### Install React Wrapper Components

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/framework-integrations/react.mdx

Installs the @vscode-elements/react-elements package for integrating VSCode Elements with React versions 18 and older.

```bash
npm i @vscode-elements/react-elements
```

--------------------------------

### Basic Divider HTML Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/divider.mdx

Demonstrates the basic usage of the vscode-divider custom HTML element to create a visual separator.

```html
<p>
  Praesent ultrices mauris ...
</p>
<vscode-divider></vscode-divider>
<p>
  Praesent ultrices mauris ...
</p>
```

--------------------------------

### Settings Page Form Group Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/form-group.mdx

Shows the 'settings-group' variant of the vscode-form-group, designed to mimic the native settings page appearance with a specific element order.

```html
<vscode-form-group variant="settings-group">
  <vscode-label for="settings-textfield-01">
    Lorem <span class="normal">ipsum</span>:
  </vscode-label>
  <vscode-form-helper>
    <p>
      Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
      elit. <span class="error">Suspendisse</span> faucibus imperdiet
      sapien, a gravida <a href="#">dolor</a>.
    </p>
  </vscode-form-helper>
  <vscode-textfield
    id="settings-textfield-01"
    placeholder="Placeholder example"
  ></vscode-textfield>
</vscode-form-group>
```

--------------------------------

### Basic Single Select Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/single-select.mdx

Demonstrates the fundamental usage of the vscode-single-select component, including how to add options and handle selection changes. It shows the HTML structure for the select element and JavaScript for event listening.

```html
<vscode-single-select id="select-example">
  <vscode-option description="Consectetur adipiscing elit">Lorem</vscode-option>
  <vscode-option selected description="Donec elit odio">Ipsum</vscode-option>
  <vscode-option description="Aliquam ac vulputate eros">Dolor</vscode-option>
</vscode-single-select>
```

```javascript
const select = document.querySelector('#select-example');

select.addEventListener('change', (event) => {
  console.log(select.value);
});
```

--------------------------------

### Form Container Imports

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/form-container.mdx

Imports necessary components for the Form Container, including Demo, PageSwitcher, and specific examples for form container functionality.

```astro
import Demo from "@components/Demo.astro";
import PageSwitcher from "@components/PageSwitcher.astro";
import Imports from "@components/examples/form-container/Imports.astro";
import ResponsiveExample from "@components/examples/form-container/ResponsiveExample.astro";
```

--------------------------------

### Split Button Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/button-group.mdx

Demonstrates a basic split button using vscode-button-group and vscode-button. The first button acts as the primary action, while the second button with an icon provides secondary actions.

```html
<vscode-button-group>
  <vscode-button>Split Button</vscode-button>
  <vscode-button
    icon="chevron-down"
    title="More actions..."
  ></vscode-button>
</vscode-button-group>
```

--------------------------------

### Basic Form Group Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/form-group.mdx

Demonstrates the default horizontal layout of the vscode-form-group component, used for organizing form elements.

```html
<vscode-form-group>
  <vscode-label for="basic-textfield-01">
    Lorem <span class="normal">ipsum</span>:
  </vscode-label>
  <vscode-textfield
    id="basic-textfield-01"
    placeholder="Placeholder example"
  ></vscode-textfield>
  <vscode-form-helper>
    <p>
      Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
      elit. <span class="error">Suspendisse</span> faucibus imperdiet
      sapien, a gravida <a href="#">dolor</a>.
    </p>
  </vscode-form-helper>
</vscode-form-group>
```

--------------------------------

### Basic vscode-table Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/table.mdx

Demonstrates the basic structure of the vscode-table component with a fixed header and bordered rows. It includes header cells for 'First name', 'Last name', and 'Email', and sample data rows.

```html
<vscode-table zebra bordered-rows>
  <vscode-table-header slot="header">
    <vscode-table-header-cell>First name</vscode-table-header-cell>
    <vscode-table-header-cell>Last name</vscode-table-header-cell>
    <vscode-table-header-cell>Email</vscode-table-header-cell>
  </vscode-table-header>
  <vscode-table-body slot="body">
    <vscode-table-row>
      <vscode-table-cell>Vincenza</vscode-table-cell>
      <vscode-table-cell>Lindgren</vscode-table-cell>
      <vscode-table-cell>Delia21@yahoo.com</vscode-table-cell>
    </vscode-table-row>
    <vscode-table-row>
      <vscode-table-cell>Clark</vscode-table-cell>
      <vscode-table-cell>Breitenberg</vscode-table-cell>
      <vscode-table-cell>Nat_Moore@gmail.com</vscode-table-cell>
    </vscode-table-row>
    <vscode-table-row>
      <vscode-table-cell>Fiona</vscode-table-cell>
      <vscode-table-cell>Wintheiser</vscode-table-cell>
      <vscode-table-cell>Asa30@gmail.com</vscode-table-cell>
    </vscode-table-row>
  </vscode-table-body>
</vscode-table>
```

--------------------------------

### Responsive vscode-table Layout

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/table.mdx

Implements a responsive vscode-table that switches to a compact layout on smaller screens. This example uses `responsive` and `breakpoint="400"` attributes, along with `bordered-columns` and `zebra` for styling.

```html
<vscode-table
  class="responsive-example"
  bordered-columns
  zebra
  responsive
  breakpoint="400"
>
  <vscode-table-header slot="header">
    <vscode-table-header-cell>First name</vscode-table-header-cell>
    <vscode-table-header-cell>Last name</vscode-table-header-cell>
  </vscode-table-header>
  <vscode-table-body slot="body">
    <vscode-table-row>
      <vscode-table-cell>Vincenza</vscode-table-cell>
      <vscode-table-cell>Lindgren</vscode-table-cell>
    </vscode-table-row>
    ...
  </vscode-table-body>
</vscode-table>
```

--------------------------------

### vscode-tree with Codicons

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/tree.mdx

Demonstrates the usage of the vscode-tree component with built-in codicons for folder and file representation. This example shows how to structure hierarchical data using vscode-tree-item elements and assign appropriate icons.

```html
<vscode-tree>
  <vscode-tree-item>
    <vscode-icon name="folder" slot="icon-branch"></vscode-icon>
    <vscode-icon
      name="folder-opened"
      slot="icon-branch-opened"
    ></vscode-icon>
    vscode-tree
    <vscode-tree-item>
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
      helpers.test.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>helpers.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>index.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
      tree-context.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
      vscode-tree.styles.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>
      vscode-tree.test.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <vscode-icon name="file" slot="icon-leaf"></vscode-icon>vscode-tree.ts
    </vscode-tree-item>
  </vscode-tree-item>
</vscode-tree>
```

--------------------------------

### Create Starlight Project

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/README.md

Command to create a new Astro project using the Starlight template. This sets up the basic structure for documentation sites.

```bash
npm create astro@latest -- --template starlight
```

--------------------------------

### Starlight Project Structure

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/README.md

Illustrates the typical directory and file structure of an Astro project integrated with Starlight. It highlights where documentation files, assets, and configuration reside.

```markdown
.\n├── public/\n├── src/\n│   ├── assets/\n│   ├── content/\n│   │   ├── docs/\n│   │   └── config.ts\n│   └── env.d.ts\n├── astro.config.mjs\n├── package.json\n└── tsconfig.json
```

--------------------------------

### Split Layout - Fixed Pane

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/split-layout.mdx

Shows how to fix one of the panes in a vscode-split-layout using the `fixed-pane` attribute. This example fixes the 'start' pane, preventing it from being resized.

```html
<vscode-split-layout fixed-pane="start">
  <div slot="start">Left</div>
  <div slot="end">Right</div>
</vscode-split-layout>
```

```css
vscode-split-layout {
  height: 250px;
  width: 100%;
}

vscode-split-layout [slot="start"],
vscode-split-layout [slot="end"] {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
```

--------------------------------

### Import VSCode Element Custom Event Type

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/guides/getting-started.mdx

Imports the TypeScript type for a custom event dispatched by a VSCode Element, like VscTabsSelectEvent for vscode-tabs.

```typescript
import type { VscTabsSelectEvent } from "@vscode-elements/elements/dist/vscode-tabs/vscode-tabs";
```

--------------------------------

### Basic vscode-icon Usage

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/icon.mdx

Demonstrates the basic usage of the vscode-icon component with different size attributes. It also includes instructions on how to include the codicon stylesheet.

```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"
    href="path/to/codicon.css"
    id="vscode-codicon-stylesheet"
  />

<vscode-icon name="account"></vscode-icon>
<vscode-icon name="account" size="32"></vscode-icon>
<vscode-icon name="account" size="48"></vscode-icon>
<vscode-icon name="account" size="64"></vscode-icon>
```

--------------------------------

### Horizontal Radio Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/radio.mdx

Demonstrates the default horizontal layout of the Radio component within a Radio Group.

```html
<vscode-radio-group>
  <vscode-radio label="Lorem" name="horizontal-example"></vscode-radio>
  <vscode-radio label="Ipsum" name="horizontal-example"></vscode-radio>
  <vscode-radio label="Dolor" name="horizontal-example"></vscode-radio>
</vscode-radio-group>
```

--------------------------------

### Vertical Form Group Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/form-group.mdx

Illustrates the vertical layout option for the vscode-form-group component, arranging elements one below the other.

```html
<vscode-form-group variant="vertical">
  <vscode-label for="vertical-textfield-01">
    Lorem <span class="normal">ipsum</span>:
  </vscode-label>
  <vscode-textfield
    id="vertical-textfield-01"
    placeholder="Placeholder example"
  ></vscode-textfield>
  <vscode-form-helper>
    <p>
      Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
      elit. <span class="error">Suspendisse</span> faucibus imperdiet
      sapien, a gravida <a href="#">dolor</a>.
    </p>
  </vscode-form-helper>
</vscode-form-group>
```

--------------------------------

### Basic Button

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/button.mdx

Demonstrates the fundamental usage of the vscode-button component to create a standard button.

```html
<vscode-button>Button</vscode-button>
```

--------------------------------

### Vertical Radio Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/radio.mdx

Shows how to configure the Radio component for a vertical layout using the 'variant' attribute on the Radio Group.

```html
<vscode-radio-group variant="vertical">
  <vscode-radio label="Lorem" name="vertical-example"></vscode-radio>
  <vscode-radio label="Ipsum" name="vertical-example"></vscode-radio>
  <vscode-radio label="Dolor" name="vertical-example"></vscode-radio>
</vscode-radio-group>
```

--------------------------------

### Basic Textarea Usage

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/textarea.mdx

Demonstrates the basic implementation of the vscode-textarea component.

```html
<vscode-textarea></vscode-textarea>
```

--------------------------------

### Scrollable Component Example

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/collapsible.mdx

Demonstrates the usage of vscode-collapsible and vscode-scrollable components to display a tree structure within a fixed height. Includes icons with event listeners.

```html
<vscode-collapsible
  heading="Timeline"
  description="vscode-collapsible.ts"
  class="collapsible complex-example"
  open
>
  <vscode-icon name="pin" action-icon slot="actions" id="pin-icon"
  ></vscode-icon>
  <vscode-icon name="refresh" action-icon slot="actions" id="refresh-icon"
  ></vscode-icon>
  <vscode-icon name="filter" action-icon slot="actions" id="filter-icon"
  ></vscode-icon>
  <vscode-scrollable>
    <vscode-tree>
      <vscode-tree-item>
        <vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
        File saved
      </vscode-tree-item>
      <vscode-tree-item>
        <vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
        File saved
      </vscode-tree-item>
      ...
    </vscode-tree>
  </vscode-scrollable>
</vscode-collapsible>
```

```css
.collapsible.complex-example vscode-scrollable {
  height: 200px;
}
```

```javascript
document.getElementById("pin-icon").addEventListener("click", (ev) => {
  // Prevent collapsing of the component:
  ev.stopPropagation();
});
document.getElementById("refresh-icon").addEventListener("click", (ev) => {
  // Prevent collapsing of the component:
  ev.stopPropagation();
});
document.getElementById("filter-icon").addEventListener("click", (ev) => {
  // Prevent collapsing of the component:
  ev.stopPropagation();
});
```

--------------------------------

### Toggle Switch Checkbox

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/checkbox.mdx

Demonstrates the checkbox component used as a toggle switch for enabling/disabling functions. Explains the difference from standard checkboxes and provides component/HTML examples.

```astro
import Demo from "@components/Demo.astro";

<Demo>
  <vscode-checkbox toggle>Toggle switch</vscode-checkbox>
  <Fragment slot="html">
    ```html "toggle"
    <vscode-checkbox toggle>Toggle switch</vscode-checkbox>
    ```
  </Fragment>
</Demo>
```

--------------------------------

### Split Layout - Basic Vertical

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/split-layout.mdx

Demonstrates the default vertical splitting behavior of the vscode-split-layout component. It divides the available space into a 'start' and 'end' pane.

```html
<vscode-split-layout>
  <div slot="start">Left</div>
  <div slot="end">Right</div>
</vscode-split-layout>
```

```css
vscode-split-layout {
  height: 200px;
  width: 500px;
}

[slot="start"],
[slot="end"] {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
```

--------------------------------

### VS Code Icon Component Usage

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/icon.mdx

Demonstrates the usage of the `<vscode-icon>` component to display different icons. The `name` attribute specifies the icon to render, and the `title` attribute provides accessibility and a tooltip.

```html
<vscode-icon name="wand" title="wand"></vscode-icon>
<vscode-icon name="warning" title="warning"></vscode-icon>
<vscode-icon name="watch" title="watch"></vscode-icon>
<vscode-icon name="whitespace" title="whitespace"></vscode-icon>
<vscode-icon name="whole-word" title="whole-word"></vscode-icon>
<vscode-icon name="window" title="window"></vscode-icon>
<vscode-icon name="word-wrap" title="word-wrap"></vscode-icon>
<vscode-icon name="workspace-trusted" title="workspace-trusted"></vscode-icon>
<vscode-icon name="workspace-unknown" title="workspace-unknown"></vscode-icon>
<vscode-icon name="workspace-untrusted" title="workspace-untrusted"></vscode-icon>
<vscode-icon name="wrench" title="wrench"></vscode-icon>
<vscode-icon name="wrench-subaction" title="wrench-subaction"></vscode-icon>
<vscode-icon name="x" title="x"></vscode-icon>
<vscode-icon name="zap" title="zap"></vscode-icon>
<vscode-icon name="zoom-in" title="zoom-in"></vscode-icon>
<vscode-icon name="zoom-out" title="zoom-out"></vscode-icon>
```

--------------------------------

### Basic Tree Structure

Source: https://github.com/vscode-elements/vscode-elements.github.io/blob/main/src/content/docs/components/tree.mdx

Demonstrates the fundamental structure of a vscode-tree component with nested vscode-tree-item elements to create a hierarchical view. This example shows how to define branches and leaves.

```html
<vscode-tree id="tree-basic-example">
  <vscode-tree-item>
    Fruits
    <vscode-tree-item>
      Citrus Fruits
      <vscode-tree-item>Orange</vscode-tree-item>
      <vscode-tree-item>Lemon</vscode-tree-item>
      <vscode-tree-item>Grapefruit</vscode-tree-item>
    </vscode-tree-item>
    <vscode-tree-item>
      Berries
      <vscode-tree-item>Strawberry</vscode-tree-item>
      <vscode-tree-item>Blueberry</vscode-tree-item>
      <vscode-tree-item>Raspberry</vscode-tree-item>
    </vscode-tree-item>
    <vscode-tree-item>
      Tropical Fruits
      <vscode-tree-item>Mango</vscode-tree-item>
      <vscode-tree-item>Pineapple</vscode-tree-item>
      <vscode-tree-item>Papaya</vscode-tree-item>
    </vscode-tree-item>
  </vscode-tree-item>
  <vscode-tree-item>
    Vegetables
    <vscode-tree-item>
      Leafy Greens
      <vscode-tree-item>Spinach</vscode-tree-item>
      <vscode-tree-item>Lettuce</vscode-tree-item>
      <vscode-tree-item>Kale</vscode-tree-item>
    </vscode-tree-item>
    <vscode-tree-item>
      Root Vegetables
      <vscode-tree-item>Carrot</vscode-tree-item>
      <vscode-tree-item>Beetroot</vscode-tree-item>
      <vscode-tree-item>Radish</vscode-tree-item>
    </vscode-tree-item>
    <vscode-tree-item>
      Nightshades
      <vscode-tree-item>Tomato</vscode-tree-item>
      <vscode-tree-item>Eggplant</vscode-tree-item>
      <vscode-tree-item>Bell Pepper</vscode-tree-item>
    </vscode-tree-item>
  </vscode-tree-item>
</vscode-tree>
```