### Minimal Reproducible Example Setup (npm ci)

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

This snippet shows the commands for installing dependencies using `npm ci` and starting the development server with `npm run start`, often used in conjunction with a demo HTML file for bug reporting.

```bash
npm ci
npm run start
```

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

### Minimal Reproducible Example Setup (npm)

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

This snippet demonstrates how to set up a minimal reproducible example for bug reports using npm. It includes commands for installing dependencies and starting a development server.

```bash
npm install && npm run dev
```

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

### Install Dependencies

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

Command to install all necessary project dependencies using npm ci, which is recommended for CI environments for faster and more reliable installs.

```bash
npm ci
```

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

### Start Web Test Runner Development Server

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

Starts the Web Test Runner development server for testing purposes.

```bash
npm run serve
```

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

### Start Development Server and Watch Mode

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

Starts the development server and the TypeScript compiler in watch mode. It also opens the default browser, providing a comprehensive development environment.

```bash
npm start
```

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

### Set Active Element and Focus After Update (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-tree/default-active-item.html

Sets a specific list item (`li`) as active and then focuses it after its update is complete. This example targets an element with `data-path="1.1"` and sets its `active` property to true. It utilizes the `updateComplete` promise to ensure the element is updated before focusing. Assumes the existence of elements with the specified selectors and the `updateComplete` property.

```javascript
const bt = document.querySelector('#bt-set-active');
bt.addEventListener('click', () => {
  const li = document.querySelector('\\[data-path="1.1"\\]');
  li.active = true;
  li.updateComplete.then(() => {
    li.focus();
  });
});
```

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

### Log Events from Selector (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-context-menu/basic-example.html

A utility function to attach an event listener to a DOM element specified by a selector and log the event object to the console. It requires a valid CSS selector and an event type string as input.

```javascript
const logEvents = (selector, eventType) => {
  document.querySelector(selector).addEventListener(eventType, (ev) => {
    console.log(ev);
  });
};
```

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

### Initialize and Control Context Menu (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-context-menu/basic-example.html

Initializes a VSCode Elements context menu on DOMContentLoaded. It sets up the menu's data, toggles its visibility via a button click, and logs selected items. Dependencies include the 'vscode-elements' library and appropriate HTML structure with IDs '#context-menu' and '#toggle-menu-button'.

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const menu = document.querySelector('#context-menu');
  const button = document.querySelector('#toggle-menu-button');

  document.querySelector('#context-menu').data = [
    {
      label: 'Command palette...', 
      keybinding: 'Ctrl+Shift+A',
      value: 'menuitem1'
    },
    {
      separator: true
    },
    {
      label: 'Settings',
      keybinding: 'Ctrl+Comma',
      value: 'menuitem2'
    },
    {
      label: 'Extensions',
      keybinding: 'Ctrl+Shift+X',
      value: 'menuitem3'
    },
  ];

  button.addEventListener('click', () => {
    console.log(menu.show);
    menu.show = !menu.show;
  });

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

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

### CSS Custom Properties - VSCode Theming (CSS)

Source: https://context7.com/vscode-elements/elements/llms.txt

Applies VS Code-like theming to components using CSS custom properties. This example demonstrates setting global theme variables for buttons, input fields, focus borders, and fonts, as well as component-specific overrides for buttons and tables. It also includes an example for dark theme adjustments.

```css
/* Global theme customization */
:root {
  /* Button colors */
  --vscode-button-background: #0e639c;
  --vscode-button-foreground: #ffffff;
  --vscode-button-hoverBackground: #1177bb;

  /* Input colors */
  --vscode-settings-textInputBackground: #1e1e1e;
  --vscode-settings-textInputForeground: #cccccc;
  --vscode-settings-textInputBorder: #3c3c3c;

  /* Focus border */
  --vscode-focusBorder: #007acc;

  /* Font settings */
  --vscode-font-family: 'Segoe UI', system-ui, sans-serif;
  --vscode-font-size: 13px;
  --vscode-font-weight: normal;

  /* Error colors */
  --vscode-inputValidation-errorBackground: #5a1d1d;
  --vscode-inputValidation-errorBorder: #be1100;
}

/* Component-specific styling */
vscode-button {
  --vscode-button-background: #0078d4;
  --vscode-button-secondaryBackground: #313131;
}

vscode-table {
  --vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04);
  --vscode-sash-hoverBorder: #0078d4;
}

/* Dark theme example */
body.dark-theme {
  --vscode-button-background: #0e639c;
  --vscode-settings-textInputBackground: #1e1e1e;
  --vscode-foreground: #cccccc;
}
```

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

### Split Layout CSS - Min Size Styling

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-split-layout/min-size.html

This CSS defines the basic styling for the VS Code Elements split layout and its panes. It sets up font families, margins, and borders for the main VS Code demo and individual panes, including different background colors and text colors for the start and end panes.

```css
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.4;
  margin: 24px;
}

vscode-demo {
  display: block;
  margin-bottom: 32px;
}

.pane {
  border: 1px solid #555;
  box-sizing: border-box;
  padding: 12px;
}

.pane.start {
  background: #252526;
  color: #f0f0f0;
}

.pane.end {
  background: #1e1e1e;
  color: #d0d0d0;
}
```

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

### VscodeIcon Component Examples (TypeScript)

Source: https://context7.com/vscode-elements/elements/llms.txt

Demonstrates various ways to use the VscodeIcon component. It covers basic icon display, creating spinning icons for loading states, using icons as action buttons, and applying custom styling. The component requires the Codicons CSS to be loaded.

```typescript
import { VscodeIcon } from '@vscode-elements/elements';

// Basic icon display
const icon = document.createElement('vscode-icon');
icon.name = 'folder';
icon.size = 24;
document.body.appendChild(icon);

// Spinning icon for loading states
const loadingIcon = document.createElement('vscode-icon');
loadingIcon.name = 'sync';
loadingIcon.spin = true;
loadingIcon.spinDuration = 1.5;

// Action icon (behaves as button)
const actionIcon = document.createElement('vscode-icon');
actionIcon.name = 'close';
actionIcon.actionIcon = true;
actionIcon.label = 'Close panel';
actionIcon.size = 16;
actionIcon.addEventListener('vsc-click', (e) => {
  console.log('Icon clicked:', e.detail.originalEvent);
  // Close functionality
  panel.style.display = 'none';
});

// Larger icon with custom styling
const largeIcon = document.createElement('vscode-icon');
largeIcon.name = 'warning';
largeIcon.size = 32;
largeIcon.style.color = 'var(--vscode-editorWarning-foreground)';

```

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

### Start Web Test Runner in Watch Mode

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

Starts the Web Test Runner in watch mode without rebuilding files. This can be run in a separate terminal to catch errors as you code.

```bash
npm run wtr:watch
```

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

### Log Select Element Events with JavaScript

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/option-with-empty-value.html

This function logs select element events to the console. It takes a CSS selector and an event type as input. Ensure the selector accurately targets the desired select element.

```javascript
const logEvents = (selector, eventType) => {
  document.querySelector(selector).addEventListener(eventType, (ev) => {
    console.log(ev);
  });
 };
```

```javascript
logEvents('#vscode-select', 'change');
```

```javascript
logEvents('#native-select', 'change');
```

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

### VscodeCheckbox Component Examples (TypeScript)

Source: https://context7.com/vscode-elements/elements/llms.txt

Illustrates the functionality of the VscodeCheckbox component, including its use as a standard checkbox, a toggle switch, and its support for indeterminate states and form validation. It also shows how to handle custom values and events.

```typescript
import { VscodeCheckbox } from '@vscode-elements/elements';

// Basic checkbox
const checkbox = document.createElement('vscode-checkbox');
checkbox.textContent = 'Accept terms and conditions';
checkbox.required = true;
checkbox.addEventListener('change', (e) => {
  const target = e.target as VscodeCheckbox;
  console.log('Checked:', target.checked);
  console.log('Value:', target.value);
});

// Toggle switch with custom value
const toggleSwitch = document.createElement('vscode-checkbox');
toggleSwitch.textContent = 'Enable dark mode';
toggleSwitch.toggle = true;
toggleSwitch.checked = true;
toggleSwitch.value = 'dark-mode-enabled';
toggleSwitch.addEventListener('change', (e) => {
  const toggle = e.target as VscodeCheckbox;
  document.body.classList.toggle('dark-mode', toggle.checked);
  localStorage.setItem('darkMode', toggle.checked.toString());
});

// Indeterminate checkbox for "select all" functionality
const selectAllCheckbox = document.createElement('vscode-checkbox');
selectAllCheckbox.textContent = 'Select all items';
selectAllCheckbox.indeterminate = true;
selectAllCheckbox.addEventListener('change', () => {
  const allCheckboxes = document.querySelectorAll('.item-checkbox');
  allCheckboxes.forEach((cb: VscodeCheckbox) => {
    cb.checked = selectAllCheckbox.checked;
  });
  selectAllCheckbox.indeterminate = false;
});

// Form validation example
const agreementCheckbox = document.createElement('vscode-checkbox');
agreementCheckbox.name = 'agreement';
agreementCheckbox.textContent = 'I agree to the terms';
agreementCheckbox.required = true;
const isValid = agreementCheckbox.checkValidity();
if (!isValid) {
  console.log('Validation message:', agreementCheckbox.validationMessage);
}

```

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

### Create and Configure VscodeTextfield Component

Source: https://context7.com/vscode-elements/elements/llms.txt

Illustrates the creation and configuration of VscodeTextfield components for different input types and validation scenarios. Examples include email validation, password input with pattern matching, and number inputs with min/max constraints. It shows event listeners for input and change events.

```typescript
import { VscodeTextfield } from '@vscode-elements/elements';

// Basic text input with validation
const emailInput = document.createElement('vscode-textfield');
emailInput.type = 'email';
emailInput.placeholder = 'Enter your email';
emailInput.required = true;
emailInput.addEventListener('input', (e) => {
  const target = e.target as VscodeTextfield;
  console.log('Current value:', target.value);
  console.log('Is valid:', target.checkValidity());
});

// Password input with pattern validation
const passwordInput = document.createElement('vscode-textfield');
passwordInput.type = 'password';
passwordInput.name = 'password';
passwordInput.minLength = 8;
passwordInput.pattern = '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$';
passwordInput.placeholder = 'Password (min 8 chars)';
passwordInput.addEventListener('change', (e) => {
  const field = e.target as VscodeTextfield;
  if (!field.checkValidity()) {
    console.error('Validation error:', field.validationMessage);
    field.invalid = true;
  } else {
    field.invalid = false;
  }
});

// Number input with min/max constraints
const ageInput = document.createElement('vscode-textfield');
ageInput.type = 'number';
ageInput.min = 18;
ageInput.max = 120;
ageInput.step = 1;
ageInput.value = '25';
ageInput.addEventListener('input', () => {
  console.log('Age value:', ageInput.value);
  console.log('Validity:', ageInput.validity);
});
```

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

### VscodeTable: Create and Configure Resizable Data Tables (TypeScript)

Source: https://context7.com/vscode-elements/elements/llms.txt

Illustrates the creation of a resizable and zebra-striped data table with bordered columns. It shows how to define table headers and populate the table body with data. Further examples demonstrate responsive table behavior with a breakpoint and dynamic column sizing options. Dependencies include VscodeTable and related table elements from '@vscode-elements/elements'.

```typescript
import {
  VscodeTable,
  VscodeTableHeader,
  VscodeTableHeaderCell,
  VscodeTableBody,
  VscodeTableRow,
  VscodeTableCell
} from '@vscode-elements/elements';

// Create resizable table with zebra stripes
const table = document.createElement('vscode-table');
table.resizable = true;
table.zebra = true;
table.borderedColumns = true;
table.columns = ['30%', '40%', '30%'];

// Create header
const header = document.createElement('vscode-table-header');
['Name', 'Description', 'Status'].forEach((headerText) => {
  const headerCell = document.createElement('vscode-table-header-cell');
  headerCell.textContent = headerText;
  header.appendChild(headerCell);
});
table.appendChild(header);

// Create body with data
const body = document.createElement('vscode-table-body');
const data = [
  { name: 'Project A', description: 'Web application', status: 'Active' },
  { name: 'Project B', description: 'Mobile app', status: 'In Progress' },
  { name: 'Project C', description: 'API service', status: 'Completed' }
];

data.forEach((item) => {
  const row = document.createElement('vscode-table-row');

  Object.values(item).forEach((cellValue) => {
    const cell = document.createElement('vscode-table-cell');
    cell.textContent = cellValue;
    row.appendChild(cell);
  });

  body.appendChild(row);
});
table.appendChild(body);

// Responsive table with breakpoint
const responsiveTable = document.createElement('vscode-table');
responsiveTable.responsive = true;
responsiveTable.breakpoint = 600;
responsiveTable.bordered = true;

// Dynamic column sizing
const dynamicTable = document.createElement('vscode-table');
dynamicTable.resizable = true;
dynamicTable.delayedResizing = false;
dynamicTable.minColumnWidth = '100px';
dynamicTable.columns = ['auto', '200px', '25%', 'auto'];
```

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

### Set Tree Item Active and Focus using VSCode Elements

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-tree/multi-select.html

Basic example demonstrating how to set a tree item as active and then focus it. This involves selecting the button, adding a click listener, finding the tree item by its data-path attribute, activating it, and ensuring focus after an update. It utilizes the `logEvents` utility.

```javascript
const bt = document.querySelector('#bt-set-active');
bt.addEventListener('click', () => {
  const li = document.querySelector('\\[data-path="1.1"\\]');
  li.active = true;
  li.updateComplete.then(() => {
    li.focus();
  });
});
logEvents('vscode-tree', 'vsc-tree-select');
```

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

### Styling for Large Table with Delayed Resizing (CSS)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-table/other-examples.html

These CSS rules define the appearance and behavior of the large table component, specifically `.large-table-example-2`. It sets dimensions, handles initial rendering for undefined custom elements, and styles table cells for proper content display.

```css
.large-table-example-2 {
  height: 500px;
  width: 100%;
}

.large-table-example-2:not(:defined) {
  background-color: #f6f8fa;
  display: block;
  height: 500px;
  width: 100%;
}

.large-table-example-2:not(:defined) vscode-table-header,
.large-table-example-2:not(:defined) vscode-table-body {
  display: none;
}

.large-table-example-2 vscode-table-cell {
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: top;
  white-space: normal;
}
```

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

### Styling Invalid Select Elements with CSS

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/option-with-empty-value.html

This CSS rule provides a visual indicator for invalid select elements by applying a semi-transparent red background. This can be useful for form validation feedback.

```css
select:invalid {
  background-color: rgba(255, 0, 0, 0.2);
}
```

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

### Enable Delayed Resizing for Large Table (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-table/other-examples.html

This JavaScript snippet controls the delayed resizing feature for the large table component. It listens for changes on a checkbox input to toggle the 'delayed-resizing' attribute on the table element, affecting how it handles resize events.

```javascript
const cb = document.querySelector('#toggle-delayed-resizing');
const tbl = document.querySelector('.large-table-example');
cb.addEventListener('change', () => {
  if (cb.checked) {
    tbl.setAttribute('delayed-resizing', '');
  } else {
    tbl.removeAttribute('delayed-resizing');
  }
});
```

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

### Make Combobox Required with JavaScript

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/required-flag.html

This example illustrates how to make a VS Code Elements Combobox (select) component required using JavaScript. It targets the combobox and a button by their respective IDs. Clicking the button adds the 'required' attribute to the combobox, enforcing user input.

```javascript
const select = document.querySelector( '#none-required-combobox-example' );
const comboboxButton = document.querySelector( '#required-combobox-button' );

comboboxButton.addEventListener('click', () => {
  select.setAttribute('required', '');
});
```

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

### VSCode Elements Initialization and Event Logging

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-form-helper/csp.html

Initializes VSCode Elements with nonces and sets up an event listener for logging. This script is intended for use within a VSCode webview environment. It logs any event triggered by the specified selector to the console.

```javascript
window.vscodeWebviewPlaygroundNonce = 'abc123';
window.vscodeElementsNonce = 'abc123';
const logEvents = (selector, eventType) => {
  document.querySelector(selector).addEventListener(eventType, (ev) => {
    console.log(ev);
  });
};
```

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

### Initialize and Populate VS Code Multi-Select Element

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-multi-select/set-value-before-options.html

Demonstrates how to select a 'vscode-multi-select' element, set its initial values, and dynamically create and append 'vscode-option' elements. It also shows how to retrieve data from a FormData object associated with a form.

```javascript
const select = document.querySelector('vscode-multi-select');
select.value = ['lorem', 'ipsum'];
const op1 = document.createElement('vscode-option');
const op2 = document.createElement('vscode-option');
const op3 = document.createElement('vscode-option');
op1.innerHTML = 'lorem';
op2.innerHTML = 'ipsum';
op3.innerHTML = 'dolor';
select.appendChild(op1);
select.appendChild(op2);
select.appendChild(op3);

const form = document.querySelector('form');
const fd = new FormData(form);
console.log(fd.get('test'));
```

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

### Run Tests with Coverage Report

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

Runs all tests and generates a code coverage report.

```bash
npm run test:coverage
```

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

### Compile and Run Tests

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

Compiles test files (including a TypeScript transpilation step) and runs them.

```bash
npm test
```

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

### Link VSCode Elements Locally with npm

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

Instructions for linking the VSCode Elements library locally in your project. This involves running `npm link` in the VSCode Elements directory and then linking it to your target project using `npm link @vscode-elements/elements`. Ensure you link multiple packages with a single command if necessary.

```bash
cd VSCode-Elements-directory
npm link
cd ../your-library-directory
npm link @vscode-elements/elements
```

```bash
npm link @vscode-elements/elements @vscode-elements/webview-playground
```

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

### Build All VSCode Elements Packages

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

Builds all files included in the package, such as transpiled JavaScript, type definitions, source maps, custom elements manifest, VSCode custom data, and a minified JavaScript file.

```bash
npm run build
```

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

### Create and Configure VS Code Single Select Element

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/set-value-before-options.html

This snippet demonstrates how to create and configure a `vscode-single-select` element using vanilla JavaScript. It involves selecting the element, setting its initial value, creating multiple `vscode-option` elements, setting their inner HTML, and appending them to the select element. Assumes the `vscode-single-select` and `vscode-option` custom elements are registered.

```javascript
const select = document.querySelector('vscode-single-select');
select.value = 'dolor';

const op1 = document.createElement('vscode-option');
const op2 = document.createElement('vscode-option');
const op3 = document.createElement('vscode-option');

op1.innerHTML = 'lorem';
op2.innerHTML = 'ipsum';
op3.innerHTML = 'dolor';

select.appendChild(op1);
select.appendChild(op2);
select.appendChild(op3);
```

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

### Generate Icon List for Documentation

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

Generates an icon list intended for use in the documentation site.

```bash
npm run icons
```

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

### VscodeTabs - Creating and Managing Tabs (TypeScript)

Source: https://context7.com/vscode-elements/elements/llms.txt

Demonstrates how to programmatically create and manage a tabbed interface using VscodeTabs, VscodeTabHeader, and VscodeTabPanel components. It covers creating headers and panels, appending them to the tabs component, listening for tab change events, and programmatically switching tabs. Requires importing the necessary components from '@vscode-elements/elements'.

```typescript
import { VscodeTabs, VscodeTabHeader, VscodeTabPanel } from '@vscode-elements/elements';

// Create tabbed interface
const tabs = document.createElement('vscode-tabs');

// Create tab headers
const tabHeader1 = document.createElement('vscode-tab-header');
tabHeader1.textContent = 'Overview';
tabHeader1.icon = 'home';

const tabHeader2 = document.createElement('vscode-tab-header');
tabHeader2.textContent = 'Settings';
tabHeader2.icon = 'gear';

const tabHeader3 = document.createElement('vscode-tab-header');
tabHeader3.textContent = 'Extensions';
tabHeader3.icon = 'extensions';

tabs.appendChild(tabHeader1);
tabs.appendChild(tabHeader2);
tabs.appendChild(tabHeader3);

// Create tab panels
const panel1 = document.createElement('vscode-tab-panel');
panel1.innerHTML = '<h2>Welcome to the Overview</h2><p>This is the main dashboard.</p>';

const panel2 = document.createElement('vscode-tab-panel');
panel2.innerHTML = '<h2>Settings</h2><p>Configure your preferences here.</p>';

const panel3 = document.createElement('vscode-tab-panel');
panel3.innerHTML = '<h2>Extensions</h2><p>Manage installed extensions.</p>';

tabs.appendChild(panel1);
tabs.appendChild(panel2);
tabs.appendChild(panel3);

// Listen for tab changes
tabs.addEventListener('vsc-tab-change', (e) => {
  console.log('Active tab index:', e.detail.activeIndex);
  console.log('Active tab header:', e.detail.activeTabHeader);
});

// Programmatically switch tabs
tabs.activeIndex = 1; // Switch to Settings tab
```

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

### Toggle VSCode Context Menu Visibility

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-context-menu/fallback-styles.html

This script initializes a VSCode context menu and its associated toggle button. It sets up the menu's data, adds a click listener to the button to toggle the menu's `show` property, and logs selection events from the menu. This functionality relies on the `DOMContentLoaded` event and custom VSCode element attributes.

```javascript
document.addEventListener('DOMContentLoaded', () => { const menu = document.querySelector('#context-menu'); const button = document.querySelector('#toggle-menu-button'); document.querySelector('#context-menu').data = [ { label: 'Command palette...', keybinding: 'Ctrl+Shift+A', value: 'menuitem1', }, { separator: true, }, { label: 'Settings', keybinding: 'Ctrl+Comma', value: 'menuitem2', }, { label: 'Extensions', keybinding: 'Ctrl+Shift+X', value: 'menuitem3', }, ]; button.addEventListener('click', () => { console.log(menu.show); menu.show = !menu.show; }); menu.addEventListener('vsc-select', (event) => { console.log(event); }); });
```

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

### Create and Configure VscodeButton Component

Source: https://context7.com/vscode-elements/elements/llms.txt

Demonstrates how to create and configure VscodeButton components for various use cases, including basic buttons with icons, secondary buttons, submit buttons with loading indicators, and icon-only buttons. It shows event handling and attribute manipulation.

```typescript
import { VscodeButton } from '@vscode-elements/elements';

// Basic button with icon
const button = document.createElement('vscode-button');
button.textContent = 'Submit';
button.icon = 'check';
button.addEventListener('click', () => {
  console.log('Button clicked!');
});
document.body.appendChild(button);

// Secondary button with icon after text
const secondaryBtn = document.createElement('vscode-button');
secondaryBtn.textContent = 'Cancel';
secondaryBtn.secondary = true;
secondaryBtn.iconAfter = 'close';
secondaryBtn.addEventListener('click', (e) => {
  if (e.target.disabled) return;
  console.log('Action cancelled');
});

// Submit button with spinning icon
const submitBtn = document.createElement('vscode-button');
submitBtn.type = 'submit';
submitBtn.icon = 'loading';
submitBtn.iconSpin = true;
submitBtn.iconSpinDuration = 1;
submitBtn.textContent = 'Processing...';
submitBtn.disabled = true;

// Icon-only button
const iconBtn = document.createElement('vscode-button');
iconBtn.icon = 'settings-gear';
iconBtn.iconOnly = true;
iconBtn.setAttribute('aria-label', 'Open Settings');
```

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

### Display Bundled Library File Size

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

Displays the file size in bytes of the bundled library located at `dist/bundled.js`.

```bash
npm run checksize
```

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

### Configure VS Code Single Select Element

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/set-empty-value-before-options.html

This snippet shows how to create and populate a 'vscode-single-select' element with options using vanilla JavaScript. It selects the element, creates new 'vscode-option' elements, sets their inner HTML, appends them to the select element, and demonstrates FormData retrieval from a form containing the select element. Assumes a 'form' element with an input named 'test' exists in the DOM.

```javascript
const select = document.querySelector('vscode-single-select');
select.value = '';

const op1 = document.createElement('vscode-option');
const op2 = document.createElement('vscode-option');
const op3 = document.createElement('vscode-option');

op1.innerHTML = 'lorem';
op2.innerHTML = 'ipsum';
op3.innerHTML = 'dolor';

select.appendChild(op1);
select.appendChild(op2);
select.appendChild(op3);

const form = document.querySelector('form');
const fd = new FormData(form);
console.log(fd.get('test'));
```

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

### Git Commands in VSCode Elements Project

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-tabs/panel-style.html

This section details various Git commands executed within the VSCode Elements project directory. It includes commands for checking Git status, configuration, branches, remotes, and file staging. The logs show timings for each command.

```bash
git rev-parse --show-toplevel
git rev-parse --git-dir --git-common-dir
git status -z -uall
git config --get commit.template
git for-each-ref --sort -committerdate --format %(refname) %(objectname) %(*objectname)
git remote --verbose
git for-each-ref --format=%(refname)%00%(upstream:short)%00%(objectname)%00%(upstream:track)%00%(upstream:remotename)%00%(upstream:remoteref) refs/heads/rel-0.8.0 refs/remotes/rel-0.8.0
git check-ignore -v -z --stdin
git config --local branch.rel-0.8.0.github-pr-owner-number
git ls-files --stage -- C:\workspace\vscode-webview-elements\docs-src\components\vscode-tabs\index.md
git show --textconv :docs-src/components/vscode-tabs/index.md
git cat-file -s 4c1e90e114a3131bb812d660615e092b1257ffb5
```

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

### Check Code Formatting with Prettier

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

Checks code formatting using Prettier to ensure consistent styling across the project.

```bash
npm run prettier
```

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

### Generate Custom Elements Manifest

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

Generates a custom elements manifest file, which is used by the documentation site's API view and shipped with the package.

```bash
npm run analyze
```

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

### JavaScript: Mount Options for vscode-single-select

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/issue-530.html

This JavaScript code mounts options into a 'vscode-single-select' element. It creates placeholder, 'one', and 'two' options and appends them to the select element. The function relies on the existence of a 'vscode-single-select' element with the ID 'sel' and 'vscode-option' elements.

```javascript
const sel = document.getElementById('sel');
const out = document.getElementById('out');
const log = (m) => (out.textContent += m + '\n');

function mountOptions() {
  sel.innerHTML = '';
  const ph = document.createElement('vscode-option');
  ph.value = '';
  ph.textContent = 'placeholder';
  const one = document.createElement('vscode-option');
  one.value = 'one';
  one.textContent = 'one';
  const two = document.createElement('vscode-option');
  two.value = 'two';
  two.textContent = 'two';
  sel.append(ph, one, two);
}

document.getElementById('mount').onclick = async () => {
  mountOptions();
  await sel.updateComplete;
  log('Mounted options: placeholder, one, two');
};
```

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

### Create and Append Options to VS Code Select Element

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/default-empty.html

Demonstrates how to create and append options to a 'vscode-single-select' element. It involves creating 'vscode-option' elements and setting their inner HTML. Currently, the appending is commented out.

```javascript
const select = document.querySelector('vscode-single-select');
const op1 = document.createElement('vscode-option');
const op2 = document.createElement('vscode-option');
const op3 = document.createElement('vscode-option');
op1.innerHTML = 'lorem';
op2.innerHTML = 'ipsum';
op3.innerHTML = 'dolor';
// select.appendChild(op1);
// select.appendChild(op2);
// select.appendChild(op3);
```

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

### Manage Multi-Select Element Values in JavaScript

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-multi-select/set-option.html

Demonstrates how to interact with a multi-select HTML element using JavaScript. It shows how to wait for the page to load, retrieve the element, log its initial value, set multiple values, and log the updated value. Assumes an HTML element with the ID 'my-select' exists.

```javascript
await new Promise((resolve) => setTimeout(resolve, 0));
const select = document.getElementById('my-select');
console.log(select.value); // show initially empty
select.value = ['A', 'B', 'C']; // fill with all values
console.log(select.value); // show all set now
```

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

### Generate VSCode Custom Data Files

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

Generates HTML and CSS custom data files in the format expected by VSCode for code completions.

```bash
npm run vscode-data
```

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

### VscodeSingleSelect: Create and Manage Dropdown Selections (TypeScript)

Source: https://context7.com/vscode-elements/elements/llms.txt

Demonstrates how to create a basic single select dropdown, configure it as a combobox with filtering, and implement form validation for required selections. It covers event handling for 'change' events and programmatic value setting. Dependencies include VscodeSingleSelect and VscodeOption from '@vscode-elements/elements'.

```typescript
import { VscodeSingleSelect, VscodeOption } from '@vscode-elements/elements';

// Basic select dropdown
const select = document.createElement('vscode-single-select');
select.name = 'country';

const options = ['United States', 'Canada', 'United Kingdom', 'Germany'];
options.forEach((optionText) => {
  const option = document.createElement('vscode-option');
  option.textContent = optionText;
  option.value = optionText.toLowerCase().replace(/\s+/g, '-');
  select.appendChild(option);
});

select.addEventListener('change', (e) => {
  const target = e.target as VscodeSingleSelect;
  console.log('Selected value:', target.value);
  console.log('Selected index:', target.selectedIndex);
});

// Combobox with filtering
const combobox = document.createElement('vscode-single-select');
combobox.combobox = true;
combobox.filter = 'fuzzy';
combobox.placeholder = 'Search for a language...';

const languages = [
  { label: 'JavaScript', value: 'js' },
  { label: 'TypeScript', value: 'ts' },
  { label: 'Python', value: 'py' },
  { label: 'Rust', value: 'rs' }
];

languages.forEach(({ label, value }) => {
  const option = document.createElement('vscode-option');
  option.textContent = label;
  option.value = value;
  combobox.appendChild(option);
});

// Required select with validation
const requiredSelect = document.createElement('vscode-single-select');
requiredSelect.name = 'priority';
requiredSelect.required = true;
requiredSelect.defaultValue = '';

['Low', 'Medium', 'High', 'Critical'].forEach((priority) => {
  const opt = document.createElement('vscode-option');
  opt.textContent = priority;
  opt.value = priority.toLowerCase();
  requiredSelect.appendChild(opt);
});

requiredSelect.addEventListener('change', () => {
  const isValid = requiredSelect.checkValidity();
  requiredSelect.invalid = !isValid;
  if (!isValid) {
    console.error('Please select a priority level');
  }
});

// Programmatically set value
requiredSelect.value = 'medium';
console.log('Current selection:', requiredSelect.selectedIndex);
```

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

### Dynamically Add Content at Intervals (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/issue-514.html

This script dynamically creates and appends paragraph elements to the DOM at regular intervals. It initializes a counter, and every 700 milliseconds, it creates a new 'p' element, sets its content to the current counter value, increments the counter, and appends it to the element with the ID 'lines'.

```javascript
let counter = 1;
setInterval(() => {
  const line = document.createElement('p');
  line.innerHTML = counter;
  counter++;
  document.getElementById('lines').appendChild(line);
}, 700);
```

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

### Manipulate VSCode Options (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-multi-select/sync-options.html

Demonstrates how to select and modify individual VSCode option elements. It shows how to disable an option, set its description, and programmatically select it. This requires the presence of 'vscode-option' elements in the DOM.

```javascript
document.querySelector('#button').addEventListener('click', () => {
  const op1 = document.querySelectorAll('vscode-option')[0];
  const op2 = document.querySelectorAll('vscode-option')[1];
  const op3 = document.querySelectorAll('vscode-option')[2];
  op1.disabled = true;
  op2.description = 'Test description';
  op3.selected = true;
});
```

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

### Handle VSCode Single Select Element Events

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html

This snippet demonstrates how to listen for 'change' events on a 'vscode-single-select' element to log its current value, and also how to capture custom 'vsc-single-select-create-option' events, logging the event object.

```javascript
const sl = document.querySelector('vscode-single-select');

sl.addEventListener('change', () => {
  console.log(sl.value);
});

sl.addEventListener('vsc-single-select-create-option', (ev) => {
  console.log(ev);
});
```

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

### Lint Code with ESLint

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

Performs a code style check using ESLint to ensure code quality and consistency.

```bash
npm run lint
```

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

### Transpile TypeScript to JavaScript (No Minification)

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

Transpiles TypeScript files to standard ES6 JavaScript without minification. These files are suitable for direct import and optimization within end-user applications.

```bash
npm run built:ts
```

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

### Include Codicons Stylesheet

Source: https://context7.com/vscode-elements/elements/llms.txt

This snippet shows how to include the necessary Codicons CSS stylesheet in your HTML document. This is a prerequisite for using the VscodeIcon component.

```html
<!-- Required: Include codicons stylesheet in your HTML -->
<link
  id="vscode-codicon-stylesheet"
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vscode/codicons/dist/codicon.css"
/>
```

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

### Watch and Recompile TypeScript Files

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

Runs the TypeScript compiler in watch mode, automatically recompiling modified files. This is useful for continuous development workflows.

```bash
npm run build:watch
```

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

### VSCode Textfield Event Handling (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-textfield/basic-example.html

This JavaScript code handles various events for a VSCode Textfield element, including invalid, input, change, select, focus, blur, and click events on an associated icon. It also demonstrates how to programmatically focus the textfield.

```javascript
const el = document.getElementById('field-1');
const icon = document.getElementById('search-icon');
document.addEventListener('invalid', (ev) => {
  console.log(ev);
});
document.addEventListener('input', (ev) => {
  console.log(ev);
});
el.addEventListener('change', (ev) => {
  console.log(ev);
});
el.addEventListener('select', (ev) => {
  console.log(ev);
});
el.addEventListener('invalid', (ev) => {
  console.log(ev);
});
icon.addEventListener('click', (ev) => {
  console.log(ev);
});
el.addEventListener('focus', (ev) => {
  console.log(ev);
});
el.addEventListener('blur', (ev) => {
  console.log(ev);
});
document.getElementById('bt-focus').addEventListener('click', () => {
  document.getElementById('field-1').focus();
});
```

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

### Implement Tree Expand/Collapse with Event Listeners (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-tree/expand-all-collapse-all.html

Handles the expand and collapse functionality for a VSCode Tree component. It selects the expand/collapse buttons and the tree element, then attaches click event listeners to toggle the tree's state using 'expandAll' and 'collapseAll' methods. Requires the 'vscode-tree' component and buttons with IDs 'bt-expand' and 'bt-collapse' to be present in the DOM.

```javascript
const btExpand = document.querySelector('#bt-expand');
const btCollapse = document.querySelector('#bt-collapse');
const tree = document.querySelector('vscode-tree');

btExpand.addEventListener('click', () => {
  tree.expandAll();
});

btCollapse.addEventListener('click', () => {
  tree.collapseAll();
});
```

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

### Automatically Fix Code Formatting Issues

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

Automatically fixes code formatting issues identified by Prettier.

```bash
npm run prettier:fix
```

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

### JavaScript for VS Code Dropdown Menu Interaction

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-button-group/dropdown-menu.html

Handles the dynamic behavior of a VS Code dropdown menu. It populates the context menu with items, including labels, keybindings, and separators. The script manages the visibility of the menu when the associated button is clicked and listens for selection events.

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const menu = document.querySelector('#context-menu');
  const button = document.querySelector('#toggle-menu-button');

  menu.data = [
    { label: 'Command palette...', keybinding: 'Ctrl+Shift+A', value: 'menuitem1' },
    { separator: true },
    { label: 'Settings', keybinding: 'Ctrl+Comma', value: 'menuitem2' },
    { label: 'Extensions', keybinding: 'Ctrl+Shift+X', value: 'menuitem3' },
  ];

  button.addEventListener('click', () => {
    console.log(menu.show);
    menu.show = !menu.show;
  });

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

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

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

### Git Commit Message Style

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

This refers to the recommended style for Git commit messages, known as the 50/72 style. It emphasizes concise subject lines and detailed bodies.

```markdown
# Conventional Commits

feat(scope): add new functionality

fix(scope): fix a bug

chore(scope): maintenance tasks

refactor(scope): code changes that neither fix a bug nor add a feature

perf(scope): improve performance

test(scope): add missing tests

docs(scope): documentation only changes

style(scope): changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)

build(scope): changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)

ci(scope): changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)

![Commit Message Convention](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)

```

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

### Automatically Fix Code Style Issues

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

Automatically fixes code style issues identified by ESLint.

```bash
npm run lint:fix
```

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

### Clean Generated Files

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

Removes all files that have been generated by the build process.

```bash
npm run clean
```

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

### JavaScript: Shrink Options to Placeholder in vscode-single-select

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/issue-530.html

This JavaScript code demonstrates how to 'shrink' the options in a 'vscode-single-select' element, leaving only the placeholder. It clears the existing options, creates a new placeholder option, appends it, and then logs the selected index after the update. This simulates a rerender where only the placeholder remains.

```javascript
const sel = document.getElementById('sel');
const out = document.getElementById('out');
const log = (m) => (out.textContent += m + '\n');

document.getElementById('shrink').onclick = async () => {
  // React-like rerender: only placeholder remains
  sel.innerHTML = '';
  const only = document.createElement('vscode-option');
  only.value = '';
  only.textContent = 'placeholder';
  sel.appendChild(only);
  await sel.updateComplete;
  log(`After shrink: selectedIndex=${sel.selectedIndex}`);
};
```

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

### Expand All Button Event Listener (TypeScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-tree/stress-test.html

This TypeScript snippet attaches a click event listener to a button with the ID 'bt-expand'. When clicked, it prevents default behavior and calls the 'expandAll' method on a 'vscode-tree' element, implying interaction with a VS Code web component.

```typescript
const bt = document.querySelector('#bt-expand');
bt.addEventListener('click', (ev) => {
  ev.stopPropagation();
  ev.preventDefault();
  document.querySelector('vscode-tree').expandAll();
});
```

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

### Run Tests in Watch Mode

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

Watches for file changes and automatically re-runs tests when modifications are detected.

```bash
npm run test:watch
```

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

### Custom VSCode Radio Group Element

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-radio-group/issue-511.html

Defines a custom HTML element 'demo-element' that extends HTMLElement. This element uses a VSCode radio group within its shadow DOM and applies basic styling. It requires the VSCode Elements library to be loaded.

```javascript
class DemoElement extends HTMLElement { static template = (() => { const t = document.createElement('template'); t.innerHTML = ` <vscode-radio-group> <vscode-radio value="1">Option 1</vscode-radio> <vscode-radio value="2">Option 2</vscode-radio> <vscode-radio value="3" default-checked>Option 3</vscode-radio> </vscode-radio-group> `; return t; })(); constructor() { super(); const shadow = this.attachShadow({mode: 'open'}); shadow.appendChild(DemoElement.template.content.cloneNode(true)); const sheet = new CSSStyleSheet(); sheet.replaceSync(` :host { display: block; padding: 16px; } `); shadow.adoptedStyleSheets = [sheet]; } } customElements.define('demo-element', DemoElement);
```

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

### Set Active Element with VSCode Elements

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-tree/guides-has-arrows.html

Sets a specific list item element as active and then focuses it. It selects a button and adds a click listener. When clicked, it finds a list item by its data-path attribute, sets its 'active' property to true, waits for updates, and then focuses the element. Assumes the existence of elements with the specified selectors and attributes.

```javascript
const bt = document.querySelector('#bt-set-active');
bt.addEventListener('click', () => {
  const li = document.querySelector('[data-path="1.1"]');
  li.active = true;
  li.updateComplete.then(() => {
    li.focus();
  });
});
```

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

### Log Split Layout Events with JavaScript

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-split-layout/horizontal.html

This JavaScript function, `logEvents`, attaches an event listener to a specified DOM element. It logs the event object to the console when the specified event type occurs. This is useful for debugging and understanding user interactions with the split layout.

```javascript
const logEvents = (selector, eventType) => {
  document.querySelector(selector).addEventListener(eventType, (ev) => {
    console.log(ev);
  });
};

logEvents('#split-example', 'vsc-split-layout-position-change');
```

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

### Handle VSCode Single Select Create Option Event

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/large-list.html

Listens for the 'vsc-single-select-create-option' event on a 'vscode-single-select' element and logs the event object to the console. This is useful for custom option creation workflows within the select component.

```javascript
const sl = document.querySelector('vscode-single-select');
sl.addEventListener('vsc-single-select-create-option', (ev) => {
  console.log(ev);
});
```

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

### Handle VSCode Single Select Change Event

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-single-select/select-mode/large-list.html

Listens for the 'change' event on a 'vscode-single-select' element and logs the selected value to the console. This snippet demonstrates how to capture user selections from a custom select component.

```javascript
const sl = document.querySelector('vscode-single-select');
sl.addEventListener('change', () => {
  console.log(sl.value);
});
```

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

### Handle Icon Events (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-collapsible/always-show-header-actions.html

This code snippet handles 'click' and 'keydown' events for VSCode action icons. It selects all elements with the tag 'vscode-icon' and the attribute 'action-icon'. It logs the event object on click and on 'Enter' key press. It also prevents event propagation.

```javascript
const icons = document.querySelectorAll('vscode-icon[action-icon]'); icons.forEach((i) => { i.addEventListener('click', (event) => { event.stopPropagation(); console.log(event); }); i.addEventListener('keydown', (event) => { event.stopPropagation(); if (event.key === 'Enter') { console.log(event); } }); });
```

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

### HTML Structure for VS Code Dropdown Menu

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-button-group/dropdown-menu.html

Defines the HTML elements for a VS Code button group that functions as a dropdown menu. It includes a button to toggle the menu and a VS Code context menu component to display options. The CSS styles position the dropdown menu relative to the button.

```html
<vscode-button-group>
  Demo
</vscode-button-group>

.dropdown-menu {
  display: inline-block;
  position: relative;
}

.dropdown-menu vscode-context-menu {
  left: 100%;
  margin-left: -26px;
  margin-top: 1px;
  position: absolute;
  top: 100%;
}
```

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

### Event Logging Function (JavaScript)

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-scrollable/csp.html

A JavaScript function that attaches an event listener to a specified DOM element. It logs the event object to the console when the event occurs. It requires a valid CSS selector and an event type as input.

```javascript
window.vscodeWebviewPlaygroundNonce = 'abc123';
const logEvents = (selector, eventType) => {
  document.querySelector(selector).addEventListener(eventType, (ev) => {
    console.log(ev);
  });
};
```

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

### Log DOM Events with Selector and Event Type

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-context-menu/fallback-styles.html

This JavaScript function, `logEvents`, attaches an event listener to a DOM element identified by a CSS selector. It logs the event object to the console whenever the specified event type occurs. Dependencies include the browser's DOM API. It takes a selector string and an event type string as input.

```javascript
const logEvents = (selector, eventType) => { document.querySelector(selector).addEventListener(eventType, (ev) => { console.log(ev); }); };
```

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

### Table Styling with CSS

Source: https://github.com/vscode-elements/elements/blob/main/dev/vscode-table/basic-example.html

This CSS rule defines the dimensions for elements with the class 'table'. It sets a fixed width and height for these elements. This style is useful for creating consistent layouts for tabular data.

```css
.table { width: 500px; height: 300px; }
```