VSCode Elements

https://vscode-elements.github.io/
Admin
VSCode Elements is a web component library for developing Visual Studio Code extensions with...
Tokens:33,938
Snippets:328
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Webview Playground

Source: https://vscode-elements.github.io/guides/framework-integrations/react

Install the development tool package for applying VSCode webview styles.

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

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

### Install VSCode Elements

Source: https://vscode-elements.github.io/guides/getting-started

Install the library as an NPM package.

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

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

### Install React Elements Package

Source: https://vscode-elements.github.io/guides/framework-integrations/react

Install the wrapper components package for React 18 and older.

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

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

### Implement vscode-tree with Codicons

Source: https://vscode-elements.github.io/components/tree

Example of a tree structure using vscode-icon elements within the designated icon slots.

```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>
```

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

### Basic Collapsible Example

Source: https://vscode-elements.github.io/elements-lite/components/collapsible

A standard collapsible section using the vscode-collapsible class.

```html
<details class="vscode-collapsible">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Collapsible</h2>
  </summary>
  <div>
    <p>Collapsible content.</p>
  </div>
</details>
```

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

### Configure Tree Indent Guides

Source: https://vscode-elements.github.io/components/tree/api

Sets the visibility of tree indent guides using the IndentGuides constants.

```javascript
import {IndentGuides} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';

document.querySelector('vscode-tree').expandMode = IndentGuides.onHover;
```

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

### Basic Checkbox Example

Source: https://vscode-elements.github.io/components/checkbox

A standard checkbox implementation with a label and initial checked state.

```HTML
1
<vscode-checkbox
2
  label="Checkbox example"
3
  value="testvalue1"
4
  checked
5
></vscode-checkbox>
```

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

### Install VSCode Elements Lite via npm

Source: https://vscode-elements.github.io/elements-lite/guides/getting-started

Use this command to add the package to your project dependencies when using a bundler like Webpack or Vite.

```bash
npm install @vscode-elements/elements-lite
```

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

### Implement a button group in HTML

Source: https://vscode-elements.github.io/components/button-group

Use the vscode-button-group element to wrap multiple vscode-button components. This example demonstrates a toolbar layout with alignment and text formatting buttons.

```html
<div class="wysiwyg-toolbar">
  <vscode-button-group>
    <vscode-button secondary title="Align left" icon-only
      ><svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1 3.5C1 3.22386 1.22386 3 1.5 3H10.5C10.7761 3 11 3.22386 11 3.5C11 3.77614 10.7761 4 10.5 4H1.5C1.22386 4 1 3.77614 1 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H6.5C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
          fill="#212121"></path></svg
      ></vscode-button
    >
    <vscode-button secondary title="Align center" icon-only
      ><svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3 3.5C3 3.22386 3.22386 3 3.5 3H12.5C12.7761 3 13 3.22386 13 3.5C13 3.77614 12.7761 4 12.5 4H3.5C3.22386 4 3 3.77614 3 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM5 11.5C5 11.2239 5.22386 11 5.5 11H10.5C10.7761 11 11 11.2239 11 11.5C11 11.7761 10.7761 12 10.5 12H5.5C5.22386 12 5 11.7761 5 11.5Z"
          fill="#212121"></path></svg
      ></vscode-button
    >
    <vscode-button secondary title="Align right" icon-only
      ><svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M5 3.5C5 3.22386 5.22386 3 5.5 3H14.5C14.7761 3 15 3.22386 15 3.5C15 3.77614 14.7761 4 14.5 4H5.5C5.22386 4 5 3.77614 5 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H14.5C14.7761 11 15 11.2239 15 11.5C15 11.7761 14.7761 12 14.5 12H9.5C9.22386 12 9 11.7761 9 11.5Z"
          fill="#212121"></path></svg
      ></vscode-button
    >
    <vscode-button secondary title="Justified" icon-only
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="none"
      >
        <path
          fill="#212121"
          d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Z"
        ></path>
      </svg>
    </vscode-button>
  </vscode-button-group>
  <vscode-button-group>
    <vscode-button secondary icon-only title="Bold"
      ><span class="icon-letter b">B</span></vscode-button
    >
    <vscode-button secondary icon-only title="Italic"
      ><span class="icon-letter i">I</span></vscode-button
    >
    <vscode-button secondary icon-only title="Underline"
      ><span class="icon-letter u">U</span></vscode-button
    >
  </vscode-button-group>
</div>
```

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

### Include Bundled Version

Source: https://vscode-elements.github.io/guides/getting-started

Load the entire library using a script tag.

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

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

### Basic Single Select Implementation

Source: https://vscode-elements.github.io/components/single-select

Demonstrates the basic structure of the component and how to listen for change events.

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

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

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

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

### Implement a primary button

Source: https://vscode-elements.github.io/elements-lite/components/button

Use the vscode-button class to create a standard primary button.

```html
<button type="button" class="vscode-button">Primary Button</button>
```

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

### Import Specific Components

Source: https://vscode-elements.github.io/guides/getting-started

Import only the necessary components to optimize bundle size.

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

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

### Display a basic badge

Source: https://vscode-elements.github.io/elements-lite/components/badge

Use the vscode-badge class to create a standard status badge.

```html
<span class="vscode-badge">308 Settings Found</span>
```

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

### Basic Progress Bar Implementation

Source: https://vscode-elements.github.io/components/progress-bar

Displays a standard indeterminate progress bar.

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

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

### Methods

Source: https://vscode-elements.github.io/components/badge/api

Methods available on the <vscode-badge> component instance.

```APIDOC
## Methods

### warn(message: string)
- **Description**: Triggers a warning state with the provided message.
```

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

### Create a basic checkbox

Source: https://vscode-elements.github.io/elements-lite/components/checkbox

Standard checkbox implementation using the vscode-checkbox class.

```html
<div class="vscode-checkbox">
  <input type="checkbox" id="checkbox-1">
  <label for="checkbox-1">
    <span class="icon">
      <i class="codicon codicon-check icon-checked"></i>
      <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
    </span>
    <span class="text">
      Checkbox example
    </span>
  </label>
</div>
```

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

### Implement a responsive table

Source: https://vscode-elements.github.io/components/table

Use the responsive attribute and define a breakpoint in pixels to switch the table to a compact layout.

```HTML
1
<vscode-table
2
  class="responsive-example"
3
  bordered-columns
4
  zebra
5
  responsive
6
  breakpoint="400"
7
>
8
  <vscode-table-header slot="header">
9
    <vscode-table-header-cell>First name</vscode-table-header-cell>
10
    <vscode-table-header-cell>Last name</vscode-table-header-cell>
11
  </vscode-table-header>
12
  <vscode-table-body slot="body">
13
    <vscode-table-row>
14
      <vscode-table-cell>Vincenza</vscode-table-cell>
15
      <vscode-table-cell>Lindgren</vscode-table-cell>
16
    </vscode-table-row>
17
    ...
18
  </vscode-table-body>
19
</vscode-table>
```

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

### Basic Button Usage

Source: https://vscode-elements.github.io/components/button

Standard implementation of the vscode-button component.

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

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

### Configure Webview Playground in Vite

Source: https://vscode-elements.github.io/guides/framework-integrations/react

Conditionally import the playground and add the dev toolbar in a Vite-based application.

```javascript
if (import.meta.env.DEV) {
  await import("@vscode-elements/webview-playground");
}

function App() {
  return (
    <>
      {import.meta.env.DEV ? <vscode-dev-toolbar></vscode-dev-toolbar> : null}
      <div>
        Rest of the app...
      </div>
    </>
  )
}

export default App;
```

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

### Basic form submission with VSCode Elements

Source: https://vscode-elements.github.io/guides/working-with-forms

Demonstrates a standard HTML form using VSCode Elements components without requiring custom JavaScript.

```HTML
1
<form
2
  action="/working-with-forms"
3
  method="get"
4
  enctype="application/x-www-form-urlencoded"
5
>
6
  <vscode-label for="query">Search query:</vscode-label>
7
  <vscode-textfield id="query" name="query"></vscode-textfield>
8
  <vscode-button type="submit">Search</vscode-button>
9
</form>
```

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

### selectAll()

Source: https://vscode-elements.github.io/components/multi-select/api

Selects all options in the component.

```APIDOC
## selectAll()

### Description
Selects all available options within the multi-select component.
```

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

### Configure Properties and Attributes

Source: https://vscode-elements.github.io/guides/getting-started

Set component configuration via JavaScript properties or HTML attributes.

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

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

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

### Methods

Source: https://vscode-elements.github.io/components/table-header/api

Public methods available on the <vscode-table-header> element.

```APIDOC
## Methods

### warn(message: string)
- **message** (string) - The warning message to display.
```

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

### Methods

Source: https://vscode-elements.github.io/components/button-group/api

Methods available on the <vscode-button-group> element.

```APIDOC
### warn(message: string)

- **message** (string) - The warning message to display.
```

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

### Import component styles

Source: https://vscode-elements.github.io/elements-lite/guides/getting-started

Include the specific CSS file for the component you are using in your project.

```javascript
import "@vscode-elements/elements-lite/components/button/button.css";
```

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

### Basic Icon Usage

Source: https://vscode-elements.github.io/components/icon

Display icons with different sizes using the vscode-icon element.

```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>
```

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

### Basic Textfield Usage

Source: https://vscode-elements.github.io/components/textfield

The standard implementation of the textfield component.

```HTML
<vscode-textfield></vscode-textfield>
```

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

### Implement a vertical split layout

Source: https://vscode-elements.github.io/components/split-layout

Use the default configuration to create a side-by-side vertical split.

```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;
}
```

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

### Basic Collapsible Usage

Source: https://vscode-elements.github.io/components/collapsible

Demonstrates how to define collapsible sections with and without the open attribute.

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

```css
1
vscode-collapsible p {
2
  margin: 10px;
3
}
```

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

### Implement Panel Mode with vscode-tabs

Source: https://vscode-elements.github.io/components/tabs

Structure a tabbed interface with headers, action icons, and scrollable content panels.

```html
1
<vscode-tabs selected-index="1" panel class="panel-example">
2
  <vscode-icon
3
    label="Maximize Panel Size"
4
    title="Maximize Panel Size"
5
    name="chevron-up"
6
    slot="addons"
7
    action-icon></vscode-icon>
8
  <vscode-icon
9
    label="Close Panel"
10
    title="Close Panel"
11
    name="close"
12
    slot="addons"
13
    action-icon></vscode-icon>
14
  <vscode-tab-header slot="header">
15
    Output<vscode-badge variant="counter" slot="content-after">2</vscode-badge>
16
  </vscode-tab-header>
17
  <vscode-tab-panel>
18
    <vscode-scrollable>
19
      <pre>
20
        2022-11-06 11:17:37.568 [info] Validating found git in: C:\Program Files\Git\cmd\git.exe
21
        ...
22
      </pre>
23
    </vscode-scrollable>
24
  </vscode-tab-panel>
25
  <vscode-tab-header slot="header">Terminal</vscode-tab-header>
26
  <vscode-tab-panel>
27
    <pre>
28
      Web Dev Server started...
29
    </pre>
30
  </vscode-tab-panel>
31
</vscode-tabs>
```

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

### vscode-split-layout Methods

Source: https://vscode-elements.github.io/components/split-layout/api

Methods available on the <vscode-split-layout> component instance.

```APIDOC
## Methods

- **resetHandlePosition()** - Sets the handle position to the value specified in the initialHandlePosition property.
- **warn(message: string)** - Logs a warning message.
```

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

### Basic usage of vscode-progress-ring

Source: https://vscode-elements.github.io/components/progress-ring

Displays a standard indeterminate progress ring element.

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

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

### Component Methods

Source: https://vscode-elements.github.io/components/single-select/api

Public methods available on the Single Select component instance.

```APIDOC
## checkValidity()

### Description
Checks the validity of the component.

### Returns
- **boolean** - Returns true if valid, false otherwise.

## reportValidity()

### Description
Reports the validity of the component.

### Returns
- **boolean** - Returns true if valid, false otherwise.

## warn(message: string)

### Description
Displays a warning message.

### Parameters
- **message** (string) - The warning message to display.
```

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

### <vscode-context-menu> Properties

Source: https://vscode-elements.github.io/components/context-menu/api

Properties available for the <vscode-context-menu> component.

```APIDOC
## Properties

- **data** (MenuItemData[]) - The data source for the menu items.
- **prevent-close** (boolean) - Optional - Default: false. Prevents the menu from closing when an item is clicked.
- **show** (boolean) - Controls the visibility of the menu.
- **version** (string) - Readonly. Returns the current VSCode Elements version.
```

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

### HTML structure for Context Menu

Source: https://vscode-elements.github.io/components/context-menu

Defines the container, toggle button, and context menu element.

```html
1
<div class="menu-wrapper">
2
  <vscode-icon
3
    name="menu"
4
    size="32"
5
    id="toggle-menu-button"
6
    action-icon
7
    title="Toggle Menu"
8
    class="toggle-menu-button"
9
  ></vscode-icon>
10
  <vscode-context-menu
11
    id="context-menu"
12
    class="context-menu"
13
  ></vscode-context-menu>
14
</div>
```

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

### Implement Default Badge

Source: https://vscode-elements.github.io/components/badge

Displays the standard badge style without additional variants.

```HTML
<vscode-badge>308 Settings Found</vscode-badge>
```

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

### vscode-radio Component API

Source: https://vscode-elements.github.io/components/radio/api

Documentation for the <vscode-radio> web component properties, methods, and events.

```APIDOC
## <vscode-radio> Properties

- **autofocus** (boolean) - Default: false - Reflects autofocus attribute.
- **checked** (boolean) - Default: false - Reflects checked attribute.
- **defaultChecked** (boolean) - Default: false - Reflects default-checked attribute.
- **disabled** (boolean) - Default: false - Reflects disabled attribute.
- **focused** (boolean) - Default: false - Reflects focused attribute.
- **form** (HTMLFormElement | null) - Readonly - The form element associated with this radio.
- **invalid** (boolean) - Default: false - Reflects invalid attribute.
- **label** (string) - Label text. Only applied if innerHTML contains no text.
- **name** (string) - Default: '' - Name used as a variable in form-container data.
- **required** (boolean) - Default: false - Reflects required attribute.
- **validationMessage** (string) - Readonly - The validation message.
- **validity** (ValidityState) - Readonly - The validity state of the element.
- **value** (string) - Default: '' - The value of the radio button.
- **version** (string) - Readonly - VSCode Elements version.
- **willValidate** (boolean) - Readonly - Indicates if the element will be validated.

## Methods

- **checkValidity()** : boolean - Returns true if the element is valid.
- **reportValidity()** : boolean - Reports the validity state of the element.
- **warn(message: string)** - Displays a warning message.

## Events

- **change** (Event) - Dispatched when checked state is changed.
- **invalid** (Event) - Dispatched when the element is invalid and checkValidity() is called or form is submitted.
```

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

### Create a basic table with zebra striping and borders

Source: https://vscode-elements.github.io/components/table

Uses the vscode-table element with zebra and bordered-rows attributes to display structured data.

```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>
```

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

### Properties

Source: https://vscode-elements.github.io/components/badge/api

Configuration attributes for the <vscode-badge> component.

```APIDOC
## Properties

### variant
- **Type**: 'default' | 'counter' | 'activity-bar-counter' | 'tab-header-counter'
- **Default**: 'default'
- **Description**: Defines the visual style of the badge.

### version
- **Type**: string
- **Description**: VSCode Elements version.
```

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

### Create a settings page group

Source: https://vscode-elements.github.io/components/form-group

The settings-group variant mimics the native VS Code settings page layout, requiring the order: label, helper text, form control.

```HTML

1
<vscode-form-group variant="settings-group">
2
  <vscode-label for="settings-textfield-01">
3
    Lorem <span class="normal">ipsum</span>:
4
  </vscode-label>
5
  <vscode-form-helper>
6
    <p>
7
      Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
8
      elit. <span class="error">Suspendisse</span> faucibus imperdiet
9
      sapien, a gravida <a href="#">dolor</a>.
10
    </p>
11
  </vscode-form-helper>
12
  <vscode-textfield
13
    id="settings-textfield-01"
14
    placeholder="Placeholder example"
15
  ></vscode-textfield>
16
</vscode-form-group>

```

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

### Implement Custom Icons with CSS

Source: https://vscode-elements.github.io/components/tree

Using img tags for custom icons requires CSS to enforce the 16x16 pixel size constraint.

```html
<vscode-tree>
  <vscode-tree-item open>
    <img src="/material-icons/folder.svg" slot="icon-branch" />
    <img src="/material-icons/folder-open.svg" slot="icon-branch-opened" />
    vscode-tree
    <vscode-tree-item>
      <img src="/material-icons/test-ts.svg" slot="icon-leaf" />
      helpers.test.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
      helpers.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
      index.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
      tree-context.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
      vscode-tree.styles.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <img src="/material-icons/test-ts.svg" slot="icon-leaf" />
      vscode-tree.test.ts
    </vscode-tree-item>
    <vscode-tree-item>
      <img src="/material-icons/typescript.svg" slot="icon-leaf" />
      vscode-tree.ts
    </vscode-tree-item>
  </vscode-tree-item>
</vscode-tree>
```

```css
img[slot="icon-branch"],
img[slot="icon-branch-opened"],
img[slot="icon-leaf"] {
  display: block;
  height: 16px;
  width: 16px;
}
```

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

### Basic Form Helper Usage

Source: https://vscode-elements.github.io/components/form-helper

Displays a standard Form Helper component containing paragraph text and an unordered list.

```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 Toolbar Container Usage

Source: https://vscode-elements.github.io/components/toolbar-container

Arrange toolbar buttons within the vscode-toolbar-container element.

```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>
```

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

### Component Methods

Source: https://vscode-elements.github.io/components/textarea/api

Methods available on the Textarea component instance.

```APIDOC
## checkValidity()

### Description
Checks the validity of the textarea element.

### Returns
- **boolean** - Returns true if the element is valid, false otherwise.

## reportValidity()

### Description
Reports the validity of the textarea element.

### Returns
- **boolean** - Returns true if the element is valid, false otherwise.

## warn(message: string)

### Description
Displays a warning message on the component.

### Parameters
- **message** (string) - The warning message to display.
```

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

### vscode-split-layout Properties

Source: https://vscode-elements.github.io/components/split-layout/api

Configuration properties for the <vscode-split-layout> component.

```APIDOC
## Properties

- **fixed-pane** (string) - The size of the fixed pane will not change when the component is resized. Options: 'start', 'end', 'none'.
- **handle-position** (string) - Set the handle position programmatically. Must include a unit (% or px).
- **handle-size** (number) - Controls the draggable area size in pixels. Default: 4.
- **initial-handle-position** (string) - The handler position to reset to on double-click or resetHandlePosition() call. Default: '50%'.
- **min-end** (string) - Minimum size of the end pane in px or %.
- **min-start** (string) - Minimum size of the start pane in px or %.
- **reset-on-dbl-click** (boolean) - Whether the handle position resets on double-click. Default: false.
- **split** (Orientation) - Direction of the divider.
- **version** (string) - VSCode Elements version (read-only).
```

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

### vscode-tab-panel Component API

Source: https://vscode-elements.github.io/components/tab-panel/api

Documentation for the properties and methods available on the <vscode-tab-panel> web component.

```APIDOC
## <vscode-tab-panel>

### Properties
- **hidden** (boolean) - Default: false - Whether the panel is hidden.
- **panel** (boolean) - Default: false - Enables a panel-like look.
- **version** (string) - Readonly - The current VSCode Elements version.

### Methods
- **warn(message: string)** - Logs a warning message.

### CSS Custom Properties
- **--vscode-focusBorder** - Default: #0078d4
- **--vscode-panel--background** - Default: #181818
```

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

### <vscode-option> Properties

Source: https://vscode-elements.github.io/components/option/api

List of attributes and properties available for the <vscode-option> component.

```APIDOC
## <vscode-option> Properties

- **description** (string) - Default: '' - The description attribute.
- **disabled** (boolean) - Default: false - Reflects the disabled state.
- **selected** (boolean) - Default: false - Reflects the selected state.
- **value** (string | undefined) - The value associated with the option.
- **version** (string) - Readonly - The VSCode Elements version.
```

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

### Configure Tree Expansion Mode

Source: https://vscode-elements.github.io/components/tree/api

Sets the folder expansion behavior using the ExpandMode constants.

```javascript
import {ExpandMode} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';

document.querySelector('vscode-tree').expandMode = ExpandMode.singleClick;
```

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

### Implement a resizable table with delayed resizing

Source: https://vscode-elements.github.io/components/table

Use the resizable and delayed-resizing attributes on the vscode-table element to enable column resizing with a deferred update behavior.

```html
<vscode-table class="resizable-example" zebra bordered-columns resizable delayed-resizing>
  <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>
```

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

### Implement a split button with a dropdown menu

Source: https://vscode-elements.github.io/components/button-group

Combines a button group with a context menu to provide additional actions. Requires CSS positioning for the menu and JavaScript to handle the toggle and selection events.

```html
<div class="button-with-menu">
  <vscode-button-group>
    <vscode-button>Send</vscode-button>
    <vscode-button
      icon="chevron-down"
      title="More actions..."
      id="toggle-menu-button"
    ></vscode-button>
  </vscode-button-group>
  <vscode-context-menu
    id="dropdown-menu"
    class="dropdown-menu"
  ></vscode-context-menu>
</div>
```

```css
.button-with-menu {
  display: inline-block;
  position: relative;
}

.dropdown-menu {
  left: 100%;
  margin-left: -26px;
  position: absolute;
  width: auto;
  z-index: 10;
}
```

```javascript
const menu = document.querySelector("#dropdown-menu");
const button = document.querySelector("#toggle-menu-button");

menu.data = [
  {
    label: "Schedule for later",
    value: "schedule",
  },
  {
    label: "Delete",
    value: "delete",
  },
  {
    label: "Save draft",
    value: "save",
  },
];

button.addEventListener("click", () => {
  menu.show = !menu.show;
});

menu.addEventListener("vsc-select", (event) => {
  console.log(event);
});
```

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

### Style Panel Components

Source: https://vscode-elements.github.io/components/tabs

Apply height constraints and VS Code theme variables to tab panels and preformatted text.

```css
1
.panel-example vscode-tab-panel,
2
.panel-example vscode-scrollable {
3
  height: 200px;
4
}
5


6
vscode-tab-panel pre {
7
  color: var(--vscode-terminal-foreground);
8
  font-family: var(--vscode-editor-font-family);
9
  font-size: var(--vscode-editor-font-size);
10
  font-weight: var(--vscode-editor-font-weight);
11
  margin: 0;
12
  white-space: pre-line;
13
}
```

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

### Implement Activity Bar Counter Badge

Source: https://vscode-elements.github.io/components/badge

Displays a badge using the activity-bar-counter variant.

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

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

### CSS styling for Context Menu

Source: https://vscode-elements.github.io/components/context-menu

Sets the positioning and layout for the menu wrapper and the context menu itself.

```css
1
.menu-wrapper {
2
  overflow: visible;
3
  position: relative;
4
}
5


6
.toggle-menu-button {
7
  cursor: pointer;
8
  display: block;
9
}
10


11
.context-menu {
12
  bottom: 36px;
13
  left: 16px;
14
  position: absolute;
15
  z-index: 2;
16
}
```

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

### File Input Textfield

Source: https://vscode-elements.github.io/components/textfield

Configure the textfield to accept file inputs by setting the type attribute to file.

```HTML
<vscode-textfield type="file"></vscode-textfield>
```

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

### <vscode-icon> Properties

Source: https://vscode-elements.github.io/components/icon/api

Configuration properties for the <vscode-icon> component.

```APIDOC
## <vscode-icon> Properties

- **action-icon** (boolean) - Optional - Behaves like a button. Default: false.
- **label** (string) - Optional - Set a meaningful label in action-icon mode for screen readers. Default: ''.
- **name** (string) - Optional - Codicon icon name. Default: ''.
- **size** (number) - Optional - Icon size in pixels. Default: 16.
- **spin** (boolean) - Optional - Enable rotation animation. Default: false.
- **spin-duration** (number) - Optional - Animation duration in seconds. Default: 1.5.
- **version** (string) - Readonly - VSCode Elements version.
```

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

### vscode-tree Methods

Source: https://vscode-elements.github.io/components/tree/api

Methods available on the <vscode-tree> component instance.

```APIDOC
## Methods

- **collapseAll()** - Collapses all folders in the tree.
- **expandAll()** - Expands all folders in the tree.
- **warn(message: string)** - Displays a warning message.
```

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

### <vscode-toolbar-button> Component

Source: https://vscode-elements.github.io/components/toolbar-button/api

Documentation for the properties, methods, and events of the vscode-toolbar-button web component.

```APIDOC
## <vscode-toolbar-button>

### Properties
- **checked** (boolean) - Default: false - Reflects as attribute. Indicates if the button is in a checked state.
- **icon** (string) - Default: '' - Reflects as attribute. The icon identifier for the button.
- **label** (string | undefined) - Default: undefined - The text label for the button.
- **toggleable** (boolean) - Default: false - Reflects as attribute. Whether the button supports a toggle state.
- **version** (string) - Readonly. Returns the VSCode Elements version.

### Methods
- **warn(message: string)** - Logs a warning message.

### Events
- **change** (Event) - Dispatched when the button state changes.
```

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

### Style tree and message components with CSS

Source: https://vscode-elements.github.io/components/tree

CSS definitions for layout, spacing, and state-based visibility of tree elements and message details.

```css

1
.file {
2
  align-items: center;
3
  display: flex;
4
}
5


6
.file vscode-icon {
7
  margin-right: 6px;
8
}
9


10
.filename {
11
  display: block;
12
}
13


14
vscode-badge[variant="counter"] {
15
  display: block;
16
  margin-left: 10px;
17
}
18


19
.message {
20
  display: flex;
21
}
22


23
.actions {
24
  align-items: center;
25
  display: flex;
26
  height: 22px;
27
  margin: 0 6px;
28
}
29


30
.actions vscode-icon {
31
  color: var(--vscode-problemsErrorIcon-foreground);
32
}
33


34
.message-details {
35
  overflow: hidden;
36
}
37


38
.toggleable {
39
  display: none;
40
}
41


42
.toggleable.open {
43
  display: block;
44
}
45


46
.message-line {
47
  display: flex;
48
  white-space: nowrap;
49
}
50


51
.message-raw {
52
  display: block;
53
  overflow: hidden;
54
  text-overflow: ellipsis;
55
  white-space: nowrap;
56
}
57


58
.message-error-code {
59
  margin-left: 6px;
60
  opacity: 0.7;
61
}
62


63
.message-location {
64
  margin-left: 6px;
65
  opacity: 0.7;
66
}
67


68
.action-bar {
69
  margin-left: 6px;
70
}
71


72
.action-bar vscode-toolbar-button {
73
  display: block;
74
}
75


76
.action-bar vscode-toolbar-button.open {
77
  transform: rotate(180deg);
78
}
```

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

### Implement Counter Badge

Source: https://vscode-elements.github.io/components/badge

Displays a badge using the counter variant.

```HTML
<vscode-badge variant="counter">42</vscode-badge>
```

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

### Properties

Source: https://vscode-elements.github.io/components/button-group/api

Properties available on the <vscode-button-group> element.

```APIDOC
### Properties

- **version** (string) - Readonly - VSCode Elements version
```

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

### <vscode-checkbox> Methods

Source: https://vscode-elements.github.io/components/checkbox/api

Methods available on the <vscode-checkbox> component instance.

```APIDOC
## Methods

- **checkValidity()** (boolean) - Returns true if the element's value is valid; otherwise, it returns false.
- **reportValidity()** (boolean) - Returns true if the element's value is valid; otherwise, it returns false and triggers an invalid event.
- **warn(message: string)** - Displays a warning message.
```

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

### vscode-tab-header Component API

Source: https://vscode-elements.github.io/components/tab-header/api

Documentation for the properties and methods of the <vscode-tab-header> component.

```APIDOC
## <vscode-tab-header>

### Properties
- **active** (boolean) - Default: false - Reflects the active state.
- **panel** (boolean) - Default: false - Provides a panel-like look.
- **version** (string) - Read-only - Returns the VSCode Elements version.

### Methods
- **warn(message: string)** - Logs a warning message.

### CSS Custom Properties
- **--vscode-focusBorder** - Default: #0078d4
- **--vscode-foreground** - Default: #cccccc
- **--vscode-panelTitle-activeBorder** - Default: #0078d4
- **--vscode-panelTitle-activeForeground** - Default: #cccccc
- **--vscode-panelTitle-inactiveForeground** - Default: #9d9d9d
```

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

### Use Slots for Content

Source: https://vscode-elements.github.io/guides/getting-started

Insert HTML content into components using default or named slots.

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

```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>
```

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

### <vscode-collapsible> Component

Source: https://vscode-elements.github.io/components/collapsible/api

Documentation for the <vscode-collapsible> web component properties, methods, events, and slots.

```APIDOC
## <vscode-collapsible>

### Description
A web component that allows users to reveal or hide related content on a page.

### Properties
- **always-show-header-actions** (boolean) - Optional - When enabled, header actions are always visible when the component is open.
- **description** (string) - Optional - Less prominent text in the header.
- **heading** (string) - Optional - Heading text.
- **open** (boolean) - Optional - Controls the visibility of the content.
- **title** (string) - Deprecated - Use the heading property instead.
- **version** (string) - Readonly - VSCode Elements version.

### Methods
- **warn(message: string)** - Logs a warning message.

### Events
- **vsc-collapsible-toggle** - Dispatched when the content visibility is changed.

### Slots
- **default** - Main content.
- **actions** - Header action icons or elements, visible only when open.
- **decorations** - Elements that are always visible in the header.
```

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

### <vscode-progress-bar> Properties

Source: https://vscode-elements.github.io/components/progress-bar/api

Configuration properties for the progress bar component.

```APIDOC
## Properties

- **indeterminate** (boolean) - Default: false - Force indeterminate mode even if value is set.
- **longRunningThreshold** (number) - Default: 15000 - Switch to a gentler animation after this many ms in indeterminate mode.
- **max** (number) - Default: 100 - Maximum value for determinate mode.
- **value** (number | undefined) - Current value for determinate mode. If undefined/NaN, the bar is indeterminate.
- **version** (string) - Readonly - VSCode Elements version.
```

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

### CSS Custom Properties

Source: https://vscode-elements.github.io/components/progress-bar/api

Styling variables for the progress bar.

```APIDOC
## CSS Custom Properties

- **--vscode-progressBar-background** - Default: #0078d4 - Sets the background color of the progress bar.
```

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

### Implement a basic divider in HTML

Source: https://vscode-elements.github.io/components/divider

Use the vscode-divider element to insert a horizontal line between two content sections.

```html

1
<p>
2
  Praesent ultrices mauris ...
3
</p>
4
<vscode-divider></vscode-divider>
5
<p>
6
  Praesent ultrices mauris ...
7
</p>

```
Tokens:
Raw