open-index/open-npm huggingface dataset:
npm package: @scoped-vaadin/a11y-base
Description: Vaadin accessibility helpers, mixins and controllers
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/a11y-base

This component is based on [@vaadin/a11y-base](https://www.npmjs.com/package/@vaadin/a11y-base)

A set of accessibility helpers, mixins and controllers used by Vaadin components.

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/accordion
Description: vaadin-accordion
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/accordion

This component is based on [@vaadin/accordion](https://www.npmjs.com/package/@vaadin/accordion)

A web component for displaying a vertically stacked set of expandable panels.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/accordion)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/accordion)](https://www.npmjs.com/package/@scoped-vaadin/accordion)

```html
<vaadin24-accordion>
  <vaadin24-accordion-panel theme="filled">
    <vaadin24-accordion-heading slot="summary">Accordion Panel 1</vaadin24-accordion-heading>
    <div>Accordion is a set of expandable sections.</div>
  </vaadin24-accordion-panel>
  <vaadin24-accordion-panel theme="filled">
    <vaadin24-accordion-heading slot="summary">Accordion Panel 2</vaadin24-accordion-heading>
    <div>Only one accordion panel can be opened.</div>
  </vaadin24-accordion-panel>
</vaadin24-accordion>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/accordion/screenshot.png" alt="Screenshot of vaadin-accordion" width="900">](https://vaadin.com/docs/latest/components/accordion)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/accordion
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/accordion';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/accordion/vaadin-accordion.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/accordion/theme/material/vaadin-accordion.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/accordion/theme/lumo/vaadin-accordion.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/accordion/src/vaadin-accordion.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/app-layout
Description: vaadin-app-layout
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/app-layout

This component is based on [@vaadin/app-layout](https://www.npmjs.com/package/@vaadin/app-layout)

A web component for building common application layouts.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/app-layout)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/app-layout)](https://www.npmjs.com/package/@scoped-vaadin/app-layout)

```html
<vaadin24-app-layout>
  <vaadin24-drawer-toggle slot="navbar touch-optimized"></vaadin24-drawer-toggle>
  <h3 slot="navbar touch-optimized">Application Name</h3>
  <vaadin24-tabs orientation="vertical" slot="drawer">
    <vaadin24-tab>
      <a href="/profile">
        <vaadin24-icon icon="lumo:user"></vaadin24-icon>
        Profile
      </a>
    </vaadin24-tab>
    <vaadin24-tab>
      <a href="/contact">
        <vaadin24-icon icon="lumo:phone"></vaadin24-icon>
        Contact
      </a>
    </vaadin24-tab>
  </vaadin24-tabs>
  <div>Page content</div>
</vaadin24-app-layout>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/app-layout/screenshot.png" width="900" alt="Screenshot of vaadin-app-layout">](https://vaadin.com/docs/latest/components/app-layout)

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/app-layout/screenshot-mobile.png" width="350" alt="Screenshot of vaadin-app-layout on mobile">](https://vaadin.com/docs/latest/components/app-layout)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/app-layout
```

Once installed, import the components in your application:

```js
import '@scoped-vaadin/app-layout';
import '@scoped-vaadin/app-layout/vaadin-drawer-toggle.js';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/app-layout/vaadin-app-layout.js) of the package uses the Lumo theme.

To use the Material theme, import the components from the `theme/material` folder:

```js
import '@scoped-vaadin/app-layout/theme/material/vaadin-app-layout.js';
import '@scoped-vaadin/app-layout/theme/material/vaadin-drawer-toggle.js';
```

You can also import the Lumo version of the components explicitly:

```js
import '@scoped-vaadin/app-layout/theme/lumo/vaadin-app-layout.js';
import '@scoped-vaadin/app-layout/theme/lumo/vaadin-drawer-toggle.js';
```

Finally, you can import the un-themed components from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/app-layout/src/vaadin-app-layout.js';
import '@scoped-vaadin/app-layout/src/vaadin-drawer-toggle.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/avatar
Description: vaadin-avatar
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/avatar

This component is based on [@vaadin/avatar](https://www.npmjs.com/package/@vaadin/avatar)

A web component for graphical representation of an object or entity, for example a person or an organization.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/avatar)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/avatar)](https://www.npmjs.com/package/@scoped-vaadin/avatar)

```html
<vaadin24-avatar></vaadin24-avatar>
<vaadin24-avatar name="Jens Jansson"></vaadin24-avatar>
<vaadin24-avatar abbr="SK"></vaadin24-avatar>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/avatar/screenshot.png" width="132" alt="Screenshot of vaadin-avatar">](https://vaadin.com/docs/latest/components/avatar)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/avatar
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/avatar';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/avatar/vaadin-avatar.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/avatar/theme/material/vaadin-avatar.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/avatar/theme/lumo/vaadin-avatar.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/avatar/src/vaadin-avatar.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/avatar-group
Description: vaadin-avatar-group
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/avatar-group

This component is based on [@vaadin/avatar-group](https://www.npmjs.com/package/@vaadin/avatar-group)

A web component for grouping multiple [`<vaadin24-avatar>`](https://www.npmjs.com/package/@scoped-vaadin/avatar-group) components together.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/avatar/#avatar-group)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/avatar-group)](https://www.npmjs.com/package/@scoped-vaadin/avatar-group)

```html
<vaadin24-avatar-group max-items-visible="3"></vaadin24-avatar-group>
<script>
  document.querySelector('vaadin24-avatar-group').items = [
    { name: 'Foo Bar', colorIndex: 1 },
    { colorIndex: 2 },
    { name: 'Foo Bar', colorIndex: 3 },
    { colorIndex: 4 },
  ];
</script>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/avatar-group/screenshot.png" width="108" alt="Screenshot of vaadin-avatar-group">](https://vaadin.com/docs/latest/components/avatar/#avatar-group)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/avatar-group
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/avatar-group';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/avatar-group/vaadin-avatar-group.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/avatar-group/theme/material/vaadin-avatar-group.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/avatar-group/theme/lumo/vaadin-avatar-group.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/avatar-group/src/vaadin-avatar-group.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/button
Description: vaadin-button
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/button

This component is based on [@vaadin/button](https://www.npmjs.com/package/@vaadin/button)

An accessible and customizable button that allows users to perform actions.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/button)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/button)](https://www.npmjs.com/package/@scoped-vaadin/button)

```html
<vaadin24-button theme="primary">Primary</vaadin24-button>
<vaadin24-button theme="secondary">Secondary</vaadin24-button>
<vaadin24-button theme="tertiary">Tertiary</vaadin24-button>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/button/screenshot.png" width="296" alt="Screenshot of vaadin-button">](https://vaadin.com/docs/latest/components/button)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/button
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/button';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/button/vaadin-button.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/button/theme/material/vaadin-button.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/button/theme/lumo/vaadin-button.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/button/src/vaadin-button.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/checkbox
Description: vaadin-checkbox
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/checkbox

This component is based on [@vaadin/checkbox](https://www.npmjs.com/package/@vaadin/checkbox)

An input field representing a binary choice.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/checkbox)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/checkbox)](https://www.npmjs.com/package/@scoped-vaadin/checkbox)

```html
<vaadin24-checkbox label="Checked" checked></vaadin24-checkbox>
<vaadin24-checkbox label="Unchecked"></vaadin24-checkbox>
<vaadin24-checkbox label="Indeterminate" indeterminate></vaadin24-checkbox>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/checkbox/screenshot.png" width="400" alt="Screenshot of vaadin-checkbox">](https://vaadin.com/docs/latest/components/checkbox)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/checkbox
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/checkbox';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/checkbox/vaadin-checkbox.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/checkbox/theme/material/vaadin-checkbox.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/checkbox/src/vaadin-checkbox.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/checkbox-group
Description: vaadin-checkbox-group
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/checkbox-group

This component is based on [@vaadin/checkbox-group](https://www.npmjs.com/package/@vaadin/checkbox-group)

A web component that allows the user to choose several items from a group of binary choices.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/checkbox)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/checkbox-group)](https://www.npmjs.com/package/@scoped-vaadin/checkbox-group)

```html
<vaadin24-checkbox-group label="Export data">
  <vaadin24-checkbox value="0" label="Order ID"></vaadin24-checkbox>
  <vaadin24-checkbox value="1" label="Product name"></vaadin24-checkbox>
  <vaadin24-checkbox value="2" label="Customer"></vaadin24-checkbox>
  <vaadin24-checkbox value="3" label="Status"></vaadin24-checkbox>
</vaadin24-checkbox-group>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/checkbox-group
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/checkbox-group';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/checkbox-group/vaadin-checkbox-group.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/checkbox-group/theme/material/vaadin-checkbox-group.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/checkbox-group/theme/lumo/vaadin-checkbox-group.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/checkbox-group/src/vaadin-checkbox-group.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/combo-box
Description: Web Component for displaying a list of items with filtering
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/combo-box

This component is based on [@vaadin/combo-box](https://www.npmjs.com/package/@vaadin/combo-box)

A web component for choosing a value from a filterable list of options presented in an overlay.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/combo-box)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/combo-box)](https://www.npmjs.com/package/@scoped-vaadin/combo-box)

```html
<vaadin24-combo-box
  label="User"
  placeholder="Please select"
  item-value-path="email"
  item-label-path="email"
></vaadin24-combo-box>

<script>
  const comboBox = document.querySelector('vaadin24-combo-box');

  fetch('https://randomuser.me/api?results=100&inc=name,email')
    .then((res) => res.json())
    .then((json) => (comboBox.items = json.results));
</script>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/combo-box/screenshot.png" width="208" alt="Screenshot of vaadin-combo-box">](https://vaadin.com/docs/latest/components/combo-box)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/combo-box
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/combo-box';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/combo-box/vaadin-combo-box.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/combo-box/theme/material/vaadin-combo-box.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/combo-box/theme/lumo/vaadin-combo-box.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/combo-box/src/vaadin-combo-box.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/component-base
Description: Vaadin component base mixins
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/component-base

This component is based on [@vaadin/component-base](https://www.npmjs.com/package/@vaadin/component-base)

A set of helpers and mixins used by Vaadin components.

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/confirm-dialog
Description: vaadin-confirm-dialog
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/confirm-dialog

This component is based on [@vaadin/confirm-dialog](https://www.npmjs.com/package/@vaadin/confirm-dialog)

A modal dialog web component for confirming user actions.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/confirm-dialog)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/confirm-dialog)](https://www.npmjs.com/package/@scoped-vaadin/confirm-dialog)

```html
<vaadin24-confirm-dialog header="Unsaved changes" confirm-text="Save" reject-text="Discard" cancel reject>
  Do you want to save or discard your changes before navigating away?
</vaadin24-confirm-dialog>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/confirm-dialog/screenshot.png" width="200" alt="Screenshot of vaadin-confirm-dialog">](https://vaadin.com/docs/latest/components/confirm-dialog)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/confirm-dialog
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/confirm-dialog';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/confirm-dialog/vaadin-confirm-dialog.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/context-menu
Description: Web Component for showing context dependent items for any element on the page
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/context-menu

This component is based on [@vaadin/context-menu](https://www.npmjs.com/package/@vaadin/context-menu)

A web component that can be attached to any component to display a context menu.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/context-menu)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/context-menu)](https://www.npmjs.com/package/@scoped-vaadin/context-menu)

```html
<vaadin24-context-menu>
  <span>Open a context menu with <b>right click</b> or with <b>long touch.</b></span>
</vaadin24-context-menu>

<script>
  const contextMenu = document.querySelector('vaadin24-context-menu');
  contextMenu.renderer = function (root) {
    let listBox = root.firstElementChild;
    // Check if there is a list-box generated with the previous renderer call to update its content instead of recreation
    if (listBox) {
      listBox.innerHTML = '';
    } else {
      listBox = document.createElement('vaadin24-list-box');
      root.appendChild(listBox);
    }

    ['First', 'Second', 'Third'].forEach(function (name) {
      const item = document.createElement('vaadin24-item');
      item.textContent = name + ' menu item';
      listBox.appendChild(item);
    });
  };
</script>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/context-menu/screenshot.png" width="493" alt="Screenshot of vaadin-context-menu">](https://vaadin.com/docs/latest/components/context-menu)

**Note:** [`<vaadin24-list-box>`](https://github.com/vaadin/vaadin-list-box) component used in the above example should be installed and imported separately.

## Installation

Install the component:

```sh
npm i @scoped-vaadin/context-menu
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/context-menu';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/context-menu/vaadin-context-menu.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/context-menu/theme/material/vaadin-context-menu.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/context-menu/theme/lumo/vaadin-context-menu.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/context-menu/src/vaadin-context-menu.js';
```

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/custom-field
Description: vaadin-custom-field
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/custom-field

This component is based on [@vaadin/custom-field](https://www.npmjs.com/package/@vaadin/custom-field)

A web component for wrapping multiple components as a single field.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/custom-field)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/custom-field)](https://www.npmjs.com/package/@scoped-vaadin/custom-field)

```html
<vaadin24-custom-field label="Enrollment period" helper-text="Cannot be longer than 30 days" required>
  <vaadin24-date-picker id="start" placeholder="Start date"></vaadin24-date-picker>
  &ndash;
  <vaadin24-date-picker id="end" placeholder="End date"></vaadin24-date-picker>
</vaadin24-custom-field>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/custom-field/screenshot.png" width="401" alt="Screenshot of vaadin-custom-field">](https://vaadin.com/docs/latest/components/custom-field)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/custom-field
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/custom-field';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/custom-field/vaadin-custom-field.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/custom-field/theme/material/vaadin-custom-field.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/custom-field/theme/lumo/vaadin-custom-field.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/custom-field/src/vaadin-custom-field.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/date-picker
Description: Web component providing a date selection field with scrollable month calendar
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/date-picker

This component is based on [@vaadin/date-picker](https://www.npmjs.com/package/@vaadin/date-picker)

A web component that allows to enter a date by typing or by selecting from a calendar overlay.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/date-picker)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/date-picker)](https://www.npmjs.com/package/@scoped-vaadin/date-picker)

```html
<vaadin24-date-picker label="Label" value="2018-12-03" clear-button-visible></vaadin24-date-picker>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/date-picker/screenshot.png" width="343" alt="Screenshot of vaadin-date-picker">](https://vaadin.com/docs/latest/components/date-picker)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/date-picker
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/date-picker';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/date-picker/vaadin-date-picker.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/date-picker/theme/material/vaadin-date-picker.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/date-picker/theme/lumo/vaadin-date-picker.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/date-picker/src/vaadin-date-picker.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/date-time-picker
Description: vaadin-date-time-picker
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/date-time-picker

This component is based on [@vaadin/date-time-picker](https://www.npmjs.com/package/@vaadin/date-time-picker)

An input field web component for selecting both a date and a time.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/date-time-picker)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/date-time-picker)](https://www.npmjs.com/package/@scoped-vaadin/date-time-picker)

```html
<vaadin24-date-time-picker></vaadin24-date-time-picker>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/date-time-picker
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/date-time-picker';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/date-time-picker/vaadin-date-time-picker.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/date-time-picker/theme/material/vaadin-date-time-picker.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/date-time-picker/theme/lumo/vaadin-date-time-picker.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/date-time-picker/src/vaadin-date-time-picker.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/details
Description: vaadin-details
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/details

This component is based on [@vaadin/details](https://www.npmjs.com/package/@vaadin/details)

A web component that provides an expandable panel for showing and hiding content.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/details)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/details)](https://www.npmjs.com/package/@scoped-vaadin/details)

```html
<vaadin24-details opened>
  <vaadin24-details-summary slot="summary">Expandable Details</vaadin24-details-summary>
  <div>Toggle using mouse, Enter and Space keys.</div>
</vaadin24-details>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/details/screenshot.png" alt="Screenshot of vaadin-details" width="320">](https://vaadin.com/docs/latest/components/details)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/details
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/details';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/details/vaadin-details.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/details/theme/material/vaadin-details.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/details/theme/lumo/vaadin-details.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/details/src/vaadin-details.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/dialog
Description: vaadin-dialog
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/dialog

This component is based on [@vaadin/dialog](https://www.npmjs.com/package/@vaadin/dialog)

A web component for presenting information and user interface elements in an overlay.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dialog)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/dialog)](https://www.npmjs.com/package/@scoped-vaadin/dialog)

```html
<vaadin24-dialog opened></vaadin24-dialog>

<script>
  const dialog = document.querySelector('vaadin24-dialog');
  dialog.renderer = function (root, dialog) {
    root.textContent = 'Sample dialog';
  };
</script>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/dialog/screenshot.png" width="264" alt="Screenshot of vaadin-dialog">](https://vaadin.com/docs/latest/components/dialog)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/dialog
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/dialog';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/dialog/vaadin-dialog.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/dialog/theme/material/vaadin-dialog.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/dialog/theme/lumo/vaadin-dialog.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/dialog/src/vaadin-dialog.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/email-field
Description: vaadin-email-field
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/email-field

This component is based on [@vaadin/email-field](https://www.npmjs.com/package/@vaadin/email-field)

An extension of [`<vaadin24-text-field>`](https://www.npmjs.com/package/@scoped-vaadin/text-field) component that only accepts email addresses as input.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/email-field)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/email-field)](https://www.npmjs.com/package/@scoped-vaadin/email-field)

```html
<vaadin24-email-field label="Email"></vaadin24-email-field>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/email-field
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/email-field';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/email-field/vaadin-email-field.js) of the package uses Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/email-field/theme/material/vaadin-email-field.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/email-field/theme/lumo/vaadin-email-field.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/email-field/src/vaadin-email-field.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/field-base
Description: Vaadin field base mixins
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/field-base

This component is based on [@vaadin/field-base](https://www.npmjs.com/package/@vaadin/field-base)

A set of mixins and controllers used by Vaadin field components.

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/field-highlighter
Description: vaadin-field-highlighter
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/field-highlighter

This component is based on [@vaadin/field-highlighter](https://www.npmjs.com/package/@vaadin/field-highlighter)

A set of field helpers used by [Vaadin Collaboration Engine](https://vaadin.com/collaboration).

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/form-layout
Description: Web component providing configurable responsive layout for form elements
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/form-layout

This component is based on [@vaadin/form-layout](https://www.npmjs.com/package/@vaadin/form-layout)

A web component for building responsive forms with multiple columns.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/form-layout)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/form-layout)](https://www.npmjs.com/package/@scoped-vaadin/form-layout)

```html
<vaadin24-form-layout>
  <vaadin24-text-field label="First Name" value="Jane"></vaadin24-text-field>
  <vaadin24-text-field label="Last Name" value="Doe"></vaadin24-text-field>
  <vaadin24-text-field label="Email" value="jane.doe@example.com"></vaadin24-text-field>
</vaadin24-form-layout>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/form-layout/screenshot.png" width="880" alt="Screenshot of vaadin-form-layout">](https://vaadin.com/docs/latest/components/form-layout)

## Installation

Install the component:

```sh
npm i @scoped-vaadin/form-layout
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/form-layout';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/form-layout/vaadin-form-layout.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/form-layout/theme/material/vaadin-form-layout.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/form-layout/src/vaadin-form-layout.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/horizontal-layout
Description: vaadin-horizontal-layout
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/horizontal-layout

This component is based on [@vaadin/horizontal-layout](https://www.npmjs.com/package/@vaadin/horizontal-layout)

A web component that places its content side-by-side in a row.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/horizontal-layout)

```html
<vaadin24-horizontal-layout theme="spacing padding">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</vaadin24-horizontal-layout>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/horizontal-layout
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/horizontal-layout';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/horizontal-layout/vaadin-horizontal-layout.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/horizontal-layout/theme/material/vaadin-horizontal-layout.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/horizontal-layout/theme/lumo/vaadin-horizontal-layout.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/horizontal-layout/src/vaadin-horizontal-layout.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
npm package: @scoped-vaadin/icon
Description: Web component for creating SVG icons
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/icon

This component is based on [@vaadin/icon](https://www.npmjs.com/package/@vaadin/icon)

A web component for displaying SVG icons.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/icons)

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/icon)](https://www.npmjs.com/package/@scoped-vaadin/icon)

```html
<vaadin24-icon name="vaadin:user"></vaadin24-icon>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/icon
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/icon';
```

## Themes

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/icon/vaadin-icon.js) of the package uses the Lumo theme.

To use the Material theme, import the component from the `theme/material` folder:

```js
import '@scoped-vaadin/icon/theme/material/vaadin-icon.js';
```

You can also import the Lumo version of the component explicitly:

```js
import '@scoped-vaadin/icon/theme/lumo/vaadin-icon.js';
```

Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:

```js
import '@scoped-vaadin/icon/src/vaadin-icon.js';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.