open-index/open-npm huggingface dataset:
npm package: @scoped-vaadin/icons
Description: Collection of 600+ unique icons designed for web applications
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/icons

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

A set of 600+ icons designed for web applications.

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

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

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

## Installation

Install the iconset:

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

Once installed, import it in your application:

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

To display an icon, use [`<vaadin24-icon>`](https://www.npmjs.com/package/@scoped-vaadin/icon) element:

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

## License

The icon files (SVG, PNG, fonts) are licensed under Creative Commons [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/) license.

The source code in this repository is licensed under Apache License 2.0.

All brand icons are trademarks of their respective owners.
The use of these trademarks does not indicate endorsement of the trademark holder by Vaadin Icons, nor vice versa.
npm package: @scoped-vaadin/input-container
Description: vaadin-input-container
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/input-container

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

A web component used internally 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/integer-field
Description: vaadin-integer-field
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/integer-field

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

An extension of [`<vaadin24-number-field>`](https://www.npmjs.com/package/@scoped-vaadin/number-field) component that only allows entering integer numbers.

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

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

```html
<vaadin24-integer-field label="X"></vaadin24-integer-field>
```

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
import '@scoped-vaadin/integer-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/integer-field/vaadin-integer-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/integer-field/theme/material/vaadin-integer-field.js';
```

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

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

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

```js
import '@scoped-vaadin/integer-field/src/vaadin-integer-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/item
Description: vaadin-item
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/item

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

A web component for displaying items in list-box, context-menu or select components.

[Documentation + Live Demo ↗](https://vaadin.com/components/vaadin-item/html-examples)

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

```html
<vaadin24-item>Simple Item</vaadin24-item> <vaadin24-item disabled>Disabled Item</vaadin24-item>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/item/vaadin-item.js) of the package uses Lumo theme.

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

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

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

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

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

```js
import '@scoped-vaadin/item/src/vaadin-item.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/list-box
Description: vaadin-list-box
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/list-box

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

A web component for selecting one or more values from a scrollable list of items.

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

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

```html
<vaadin24-list-box selected="2">
  <b>Select an list-box</b>
  <vaadin24-list-box>list-box one</vaadin24-list-box>
  <vaadin24-list-box>list-box two</vaadin24-list-box>
  <hr />
  <vaadin24-list-box>list-box three</vaadin24-list-box>
  <vaadin24-list-box>list-box four</vaadin24-list-box>
</vaadin24-list-box>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
import '@scoped-vaadin/list-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/list-box/vaadin-list-box.js) of the package uses Lumo theme.

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

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

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

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

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

```js
import '@scoped-vaadin/list-box/src/vaadin-list-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/lit-renderer
Description: An abstract Lit directive for adding a renderer to a Vaadin web component
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/lit-renderer

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

An abstract Lit directive for adding a renderer to a Vaadin web component.

## License

Apache License 2.0
npm package: @scoped-vaadin/login
Description: vaadin-login
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/login

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

A web component for displaying a login form, either inline, or as an overlay.

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

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

```html
<vaadin24-login-overlay opened></vaadin24-login-overlay>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/list-box/vaadin-list-box.js) of the package uses Lumo theme.

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

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

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

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

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

```js
import '@scoped-vaadin/login/src/vaadin-login-overlay.js';
import '@scoped-vaadin/login/src/vaadin-login-form.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/markdown
Description: vaadin-markdown
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/markdown

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

A web component for rendering Markdown content.

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

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/master-detail-layout
Description: Web component for building UIs with a master area and a detail area.
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/master-detail-layout

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

A web component for building UIs with a master (or primary) area and a detail (or secondary) area.

> ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.masterDetailLayoutComponent = true`.

```html
<vaadin24-master-detail-layout>
  <div>Master content</div>
  <div slot="detail">Detail content</div>
</vaadin24-master-detail-layout>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/master-detail-layout
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/master-detail-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/master-detail-layout/vaadin-master-detail-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/master-detail-layout/theme/material/vaadin-master-detail-layout.js';
```

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

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

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

```js
import '@scoped-vaadin/master-detail-layout/src/vaadin-master-detail-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/menu-bar
Description: vaadin-menu-bar
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/menu-bar

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

A web component for creating a horizontal button bar with hierarchical drop-down menus.

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

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

```html
<vaadin24-menu-bar></vaadin24-menu-bar>

<script>
  document.querySelector('vaadin24-menu-bar').items = [
    { text: 'View' },
    { text: 'Edit' },
    {
      text: 'Move',
      children: [{ text: 'To folder' }, { text: 'To trash' }],
    },
    { text: 'Duplicate' },
  ];
</script>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/menu-bar/vaadin-menu-bar.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/menu-bar/theme/material/vaadin-menu-bar.js';
```

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

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

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

```js
import '@scoped-vaadin/menu-bar/src/vaadin-menu-bar.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/message-input
Description: vaadin-message-input
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/message-input

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

A web component that allows users to author and send messages.

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

```html
<vaadin24-message-input></vaadin24-message-input>
```

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

## Installation

Install the component:

```sh
npm i @scoped-vaadin/message-input
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/message-input';
```

## 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/message-input/vaadin-message-input.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/message-input/theme/material/vaadin-message-input.js';
```

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

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

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

```js
import '@scoped-vaadin/message-input/src/vaadin-message-input.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/message-list
Description: vaadin-messages
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/message-list

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

A web component that allows you to show a list of messages, for example, a chat log.

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

```html
<vaadin24-message-list></vaadin24-message-list>
<script>
  document.querySelector('vaadin24-message-list').items = [
    { userName: 'Alice', time: '8 Minutes ago', text: 'Lunch at the usual place?' },
    { userName: 'Bob', time: '6 Minutes ago', text: `Yeah, let's go together.` },
    { userName: 'Alice', time: '2 Minutes ago', text: 'Great! What about you, Charlie?' },
    { userName: 'Charlie', time: 'A few seconds ago', text: 'I will meet you there.' },
  ];
</script>
```

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

## Installation

Install the component:

```sh
npm i @scoped-vaadin/message-list
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/message-list';
```

## 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/message-list/vaadin-message-list.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/message-list/theme/material/vaadin-message-list.js';
```

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

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

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

```js
import '@scoped-vaadin/message-list/src/vaadin-message-list.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/multi-select-combo-box
Description: vaadin-multi-select-combo-box
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/multi-select-combo-box

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

A web component that wraps `<vaadin24-combo-box>` and allows selecting multiple items.

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

```html
<vaadin24-multi-select-combo-box style="width: 300px"></vaadin24-multi-select-combo-box>
<script>
  const comboBox = document.querySelector('vaadin24-multi-select-combo-box');
  comboBox.items = ['apple', 'banana', 'lemon', 'orange'];
  comboBox.selectedItems = ['apple', 'banana'];
</script>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
import '@scoped-vaadin/multi-select-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/multi-select-combo-box/vaadin-multi-select-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/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box.js';
```

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

```js
import '@scoped-vaadin/multi-select-combo-box/theme/lumo/vaadin-multi-select-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/multi-select-combo-box/src/vaadin-multi-select-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/notification
Description: vaadin-notification
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/notification

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

A web component for providing feedback to the user.

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

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

```html
<vaadin24-notification opened position="middle" duration="-1"></vaadin24-notification>

<script>
  const notification = document.querySelector('vaadin24-notification');

  notification.renderer = function (root) {
    root.textContent = 'Your work has been saved';
  };
</script>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/notification/vaadin-notification.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/notification/theme/material/vaadin-notification.js';
```

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

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

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

```js
import '@scoped-vaadin/notification/src/vaadin-notification.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/number-field
Description: vaadin-number-field
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/number-field

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

An input field web component that only accepts numeric input.

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

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

```html
<vaadin24-number-field label="Balance"></vaadin24-number-field>
```

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
import '@scoped-vaadin/number-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/number-field/vaadin-number-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/number-field/theme/material/vaadin-number-field.js';
```

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

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

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

```js
import '@scoped-vaadin/number-field/src/vaadin-number-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/overlay
Description: vaadin-overlay
Author: Vaadin Ltd
Latest version: 24.8.7

# &lt;vaadin-overlay&gt;

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

&lt;vaadin-overlay&gt; is a Web Component meant for internal use in Vaadin components.

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

## License

Apache License 2.0
npm package: @scoped-vaadin/password-field
Description: vaadin-password-field
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/password-field

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

An extension of [`<vaadin24-text-field>`](https://www.npmjs.com/package/@scoped-vaadin/text-field) component for entering passwords.

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

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

```html
<vaadin24-password-field label="Password"></vaadin24-password-field>
```

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
import '@scoped-vaadin/password-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/password-field/vaadin-password-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/password-field/theme/material/vaadin-password-field.js';
```

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

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

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

```js
import '@scoped-vaadin/password-field/src/vaadin-password-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/polymer-legacy-adapter
Description: polymer-legacy-adapter
Author: Vaadin Ltd
Latest version: 24.8.7

# polymer-legacy-adapter

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

A set of backwards compatibility adapters for Polymer Classic -specific legacy APIs

- style-modules.js: Adds support for `<dom-module>` based styling mechanism
- template-renderer.js: Adds declarative `<template>` APIs with Polymer binding support to Vaadin components.

## License

Apache License 2.0
npm package: @scoped-vaadin/popover
Description: vaadin-popover
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/popover

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

A web component for creating overlays that are positioned next to specified DOM element (target).

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

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/popover/vaadin-popover.js) of the package uses Lumo theme.

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

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

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

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

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

```js
import '@scoped-vaadin/popover/src/vaadin-popover.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/progress-bar
Description: vaadin-progress-bar
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/progress-bar

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

A web component for showing the completion status of a task or process.

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

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

```html
<vaadin24-progress-bar></vaadin24-progress-bar>
<vaadin24-progress-bar value="0.3"></vaadin24-progress-bar>
<vaadin24-progress-bar indeterminate></vaadin24-progress-bar>
```

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

## Installation

Install the component:

```sh
npm i @scoped-vaadin/progress-bar
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/progress-bar';
```

## 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/progress-bar/vaadin-progress-bar.js) of the package uses Lumo theme.

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

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

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

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

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

```js
import '@scoped-vaadin/progress-bar/src/vaadin-progress-bar.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/radio-group
Description: vaadin-radio-group
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/radio-group

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

A web component that allows the user to choose one item from a group of choices.

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

```html
<vaadin24-radio-group label="Travel class">
  <vaadin24-radio-button value="economy" label="Economy"></vaadin24-radio-button>
  <vaadin24-radio-button value="business" label="Business"></vaadin24-radio-button>
  <vaadin24-radio-button value="firstClass" label="First Class"></vaadin24-radio-button>
</vaadin24-radio-group>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
import '@scoped-vaadin/radio-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/radio-group/vaadin-radio-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/radio-group/theme/material/vaadin-radio-group.js';
```

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

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

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

```js
import '@scoped-vaadin/radio-group/src/vaadin-radio-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/scroller
Description: vaadin-scroller
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/scroller

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

A component container for creating scrollable areas in the UI.

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

```html
<vaadin24-scroller scroll-direction="vertical">
  <section>
    <h3>Personal information</h3>
    <vaadin24-text-field label="First name"></vaadin24-text-field>
    <vaadin24-text-field label="Last name"></vaadin24-text-field>
    <vaadin24-date-picker label="Birth date"></vaadin24-date-picker>
  </section>
  <section>
    <h3>Employment information</h3>
    <vaadin24-text-field label="Position"></vaadin24-text-field>
    <vaadin24-text-area label="Additional information"></vaadin24-text-area>
  </section>
</vaadin24-scroller>
```

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/scroller/vaadin-scroller.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/scroller/theme/material/vaadin-scroller.js';
```

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

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

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

```js
import '@scoped-vaadin/scroller/src/vaadin-scroller.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/select
Description: vaadin-select
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/select

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

A web component for selecting a single value from a list of options presented in an overlay.

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

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

```html
<vaadin24-select label="Sort by"></vaadin24-select>
<script>
  document.querySelector('vaadin24-select').renderer = (root) => {
    if (root.firstElementChild) {
      return;
    }

    // Note that innerHTML is only used for demo purposes here!
    // Consider using Lit or another template library instead.
    root.innerHTML = `
      <vaadin24-list-box>
        <vaadin24-item value="recent">Most recent first</vaadin24-item>
        <vaadin24-item value="rating-desc">Rating: high to low</vaadin24-item>
        <vaadin24-item value="rating-asc">Rating: low to high</vaadin24-item>
        <vaadin24-item value="price-desc">Price: high to low</vaadin24-item>
        <vaadin24-item value="price-asc">Price: low to high</vaadin24-item>
      </vaadin24-list-box>
    `;
  };
</script>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

## 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/select/vaadin-select.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/select/theme/material/vaadin-select.js';
```

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

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

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

```js
import '@scoped-vaadin/select/src/vaadin-select.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/side-nav
Description: vaadin-side-nav
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/side-nav

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

A web component for navigation menus.

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

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

```html
<vaadin24-side-nav collapsible>
  <span slot="label">Main menu</span>

  <vaadin24-side-nav-item path="/dashboard">
    <vaadin24-icon icon="vaadin:chart" slot="prefix"></vaadin24-icon>
    Dashboard
    <span theme="badge primary" slot="suffix" aria-label="(2 new items)">2</span>
  </vaadin24-side-nav-item>

  <vaadin24-side-nav-item>
    <vaadin24-icon icon="vaadin:folder-open" slot="prefix"></vaadin24-icon>
    Parent

    <vaadin24-side-nav-item path="/child1" slot="children"> Child 1 </vaadin24-side-nav-item>

    <vaadin24-side-nav-item path="/child2" slot="children"> Child 2 </vaadin24-side-nav-item>
  </vaadin24-side-nav-item>
</vaadin24-side-nav>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/side-nav
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/side-nav';
```

## 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/side-nav/vaadin-side-nav.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/side-nav/theme/material/vaadin-side-nav.js';
```

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

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

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

```js
import '@scoped-vaadin/side-nav/src/vaadin-side-nav.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/split-layout
Description: Web component for partitioning a layout into resizeable areas
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/split-layout

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

A web component with two content areas and a draggable split handle between them.

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

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

```html
<vaadin24-split-layout>
  <vaadin24-split-layout orientation="vertical">
    <div>First layout content</div>
    <div>Second layout content</div>
  </vaadin24-split-layout>
  <vaadin24-split-layout orientation="vertical">
    <div>Third layout content</div>
    <div>Fourth layout content</div>
  </vaadin24-split-layout>
</vaadin24-split-layout>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
import '@scoped-vaadin/split-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/split-layout/vaadin-split-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/split-layout/theme/material/vaadin-split-layout.js';
```

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

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

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

```js
import '@scoped-vaadin/split-layout/src/vaadin-split-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.