open-index/open-npm huggingface dataset:
npm package: @scoped-vaadin/tabs
Description: vaadin-tabs
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/tabs

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

A web component for organizing and grouping content into sections.

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

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

```html
<vaadin24-tabs selected="3">
  <vaadin24-tab>Page 1</vaadin24-tab>
  <vaadin24-tab>Page 2</vaadin24-tab>
  <vaadin24-tab>Page 3</vaadin24-tab>
  <vaadin24-tab>Page 4</vaadin24-tab>
</vaadin24-tabs>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

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

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

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

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

# @scoped-vaadin/tabsheet

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

A web component for organizing and grouping content into sections.

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

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

```html
<vaadin24-tabsheet>
  <vaadin24-tabs slot="tabs">
    <vaadin24-tab id="tab-1">Tab 1</vaadin24-tab>
    <vaadin24-tab id="tab-2">Tab 2</vaadin24-tab>
    <vaadin24-tab id="tab-3">Tab 3</vaadin24-tab>
  </vaadin24-tabs>

  <div tab="tab-1">Panel 1</div>
  <div tab="tab-2">Panel 2</div>
  <div tab="tab-3">Panel 3</div>
</vaadin24-tabsheet>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

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

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

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

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

# @scoped-vaadin/text-area

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

An input field component for multi-line text input.

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

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

```html
<vaadin24-text-area label="Comment"></vaadin24-text-area>
```

## Installation

Install the component:

```sh
npm i @scoped-vaadin/text-area
```

Once installed, import the component in your application:

```js
import '@scoped-vaadin/text-area';
```

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

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

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

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

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

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

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

# @scoped-vaadin/text-field

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

A web component that allows the user to input and edit text.

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

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

```html
<vaadin24-text-field label="Street Address"></vaadin24-text-field>
```

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

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

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

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

# @scoped-vaadin/time-picker

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

A web component that allows to enter a time, either by typing, or by selecting from a set of pre-defined options.

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

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

```html
<vaadin24-time-picker label="Delivery Time"></vaadin24-time-picker>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

```js
import '@scoped-vaadin/time-picker/theme/lumo/vaadin-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/time-picker/src/vaadin-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/tooltip
Description: Web Component for creating tooltips
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/tooltip

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

A web component for creating tooltips.

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

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

```html
<vaadin24-button id="confirm">Confirm</vaadin24-button>
<vaadin24-tooltip text="Click to save changes" for="confirm"></vaadin24-tooltip>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

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

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

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

```js
import '@scoped-vaadin/tooltip/src/vaadin-tooltip.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/upload
Description: Web Component for uploading files with drag and drop support
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/upload

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

A web component for uploading files.

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

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

```html
<vaadin24-upload accept=".pdf">
  <span slot="drop-label">Drop your favourite Novels here (PDF files only)</span>
</vaadin24-upload>
```

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

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

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

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

```js
import '@scoped-vaadin/upload/src/vaadin-upload.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/vaadin-development-mode-detector
Description: Element for detecting that an application using Vaadin Elements is running in development mode
Author: Vaadin Ltd
Latest version: 0.1.0

Utility method for detecting that an application using Vaadin Elements is running in development mode

## Running Tests

There are no automatic tests as the functionality depends on the host the code is run on (localhost vs others) and the bundling status.

To verify functionality:
1. Run `npm install`
1. Run `bower install`
1. Run `npm start`
1. Open http://localhost:8081/test/index.html
  1. Verify that `mode` is `development` (green)
  1. Verify that `importIfDevelopmentMode` is `run` (green)
1. Open http://`<yourip>`:8081/test/index.html
  1. Verify that `mode` is `production` (orange)
  1. Verify that `importIfDevelopmentMode` is `ignored` (orange)
1. Run `npm run start:prod`
1. Open http://localhost:8081/test/index.html
  1. Verify that `mode` is `production` (orange)
  1. Verify that `importIfDevelopmentMode` is `ignored` (orange)
1. Open http://`<yourip>`:8081/test/index.html
    1. Verify that `mode` is `production` (orange)
    1. Verify that `importIfDevelopmentMode` is `ignored` (orange)
npm package: @scoped-vaadin/vaadin-list-mixin
Description: vaadin-list-mixin
Author: Vaadin Ltd
Latest version: 23.4.100

# vaadin-list-mixin

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

`vaadin-list-mixin` is a mixin for `nav` elements, facilitating navigation and selection of childNodes.

[![npm version](https://badgen.net/npm/v/@scoped-vaadin/vaadin-list-mixin)](https://www.npmjs.com/package/@scoped-vaadin/vaadin-list-mixin)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) 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
npm package: @scoped-vaadin/vaadin-lumo-styles
Description: Lumo is a design system foundation for modern web applications, used by Vaadin components
Author: Vaadin Ltd
Latest version: 24.8.7

# Lumo

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

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

> Lumo – ✨ enchantment (Finnish) and 🔆 light (Esperanto)

**Lumo is a design system foundation** for modern, beautiful and accessible web applications.

Lumo contains foundational styles – typography, colors, visual style, sizing & spacing and icons – that components and applications can use to achieve a consistent visual design.

[Documentation ↗](https://vaadin.com/docs/latest/styling/lumo)

## License

Apache License 2.0
npm package: @scoped-vaadin/vaadin-material-styles
Description: Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.
Author: Vaadin Ltd
Latest version: 24.8.7

# Material Theme for Vaadin components

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

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

`vaadin24-material-styles` is customizable theme for the [Vaadin components](https://vaadin.com/components).

[Documentation ↗](https://cdn.vaadin.com/vaadin-material-styles/1.3.2/demo/)

## License

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

# @vaadin/vaadin-messages

> ⚠️&nbsp; Starting from Vaadin 22, this package is deprecated.
> Please use [`@vaadin/message-input`](https://www.npmjs.com/package/@vaadin/message-input) and [`@vaadin/message-list`](https://www.npmjs.com/package/@vaadin/message-list) instead.

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)

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) 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/vaadin-ordered-layout
Description: vaadin-ordered-layout
Author: Vaadin Ltd
Latest version: 0.1.0

# @vaadin/vaadin-ordered-layout

> ⚠️&nbsp; Starting from Vaadin 22, this package is deprecated.
> Please use one of the following packages instead:
>
> - [`@vaadin/horizontal-layout`](https://www.npmjs.com/package/@vaadin/horizontal-layout)
> - [`@vaadin/vertical-layout`](https://www.npmjs.com/package/@vaadin/vertical-layout)
> - [`@vaadin/scroller`](https://www.npmjs.com/package/@vaadin/scroller)

Basic layout components for placing contents vertically and horizontally.

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

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) 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/vaadin-radio-button
Description: vaadin-radio-button
Author: Vaadin Ltd
Latest version: 0.1.0

# @vaadin/vaadin-radio-button

> ⚠️&nbsp; Starting from Vaadin 22, this package is deprecated.
> Please use [`@vaadin/radio-group`](https://www.npmjs.com/package/@vaadin/radio-group) instead.

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)

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) 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/vaadin-template-renderer
Description: vaadin-template-renderer
Author: Vaadin Ltd
Latest version: 0.1.0

# @vaadin/vaadin-template-renderer

> ⚠️&nbsp; Starting from Vaadin 22, this package is deprecated.
> Please use [`@vaadin/polymer-legacy-adapter`](https://www.npmjs.com/package/@vaadin/polymer-legacy-adapter) instead.

## License

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

# vaadin-themable-mixin

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

A mixin to enable customization of Shadow DOM used by Vaadin components.

[Documentation ↗](https://vaadin.com/docs/latest/styling/styling-components)

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

## License

Apache License 2.0
npm package: @scoped-vaadin/vaadin-usage-statistics
Description: Gathers usage statistics for components used during application development
Author: Vaadin Ltd
Latest version: 0.1.0

# Gathers usage statistics for components used during application development

To be able to understand and focus development more efficiently, Vaadin gathers product usage statistics during development time and ties this to users who are logged in to their Vaadin account. **No statistics or other data is collected from the users of the applications based on any Vaadin technologies.**

Statistics are only gathered when the application is in [development mode](https://github.com/vaadin/vaadin-development-mode-detector). Statistics are automatically disabled and the statistics gathering code is automatically excluded from production builds.

## Collected data
* Vaadin products used in the application, including version numbers
* [Frameworks](src/vaadin-usage-statistics.js#L9) used in the application, including version numbers
* [Flow features](https://github.com/search?utf8=%E2%9C%93&q=org%3Avaadin+UsageStatistics.markAsUsed&type=Code) used in the application, including version numers
* The first and last time a product was used
* The first time statistics were gathered
* Your Vaadin user account
* Whether you are a Vaadin Pro user or not (true/false)
* Browser user-agent string
* The IP address the statistics is sent from

## Opting out

### npm and Vaadin 14+ (using npm)

Using npm, you can disable it for the machine by running
```
npm explore @vaadin/vaadin-usage-statistics -- npm run disable
```
or you can disable it for the project by adding
```
   "vaadin": { "disableUsageStatistics": true }
```
to your project `package.json` and running `npm install` again (remove `node_modules` if needed).

You can verify this by checking that `vaadin-usage-statistics.js` contains an empty function.

### Vaadin 10 - 14 (using Bower)

Add to your pom.xml:
```
<dependency>
  <groupId>org.webjars.bowergithub.vaadin</groupId>
  <artifactId>vaadin-usage-statistics</artifactId>
  <version>1.0.0-optout</version>
</dependency>
```

### Bower

To opt-out from statistics, install the no-op version of the `vaadin-usage-statistics` package using
```
bower install --save vaadin/vaadin-usage-statistics#optout
```
You can verify this by checking that `vaadin-usage-statistics.html` is empty.


If you have any questions on the use of the statistics, please contact statistics@vaadin.com.
npm package: @scoped-vaadin/vertical-layout
Description: vaadin-vertical-layout
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/vertical-layout

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

A web component that places its content top-to-bottom in a column.

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

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

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

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

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

```js
import '@scoped-vaadin/vertical-layout/src/vaadin-vertical-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/virtual-list
Description: Web Component for displaying a virtual/infinite list of items.
Author: Vaadin Ltd
Latest version: 24.8.7

# @scoped-vaadin/virtual-list

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

A web component for rendering a long list of items without sacrificing performance.

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

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

```html
<vaadin24-virtual-list></vaadin24-virtual-list>

<script>
  const list = document.querySelector('vaadin24-virtual-list');
  list.items = items; // An array of data items
  list.renderer = (root, list, { item, index }) => {
    root.textContent = `#${index}: ${item.name}`;
  };
</script>
```

## Installation

Install the component:

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

Once installed, import the component in your application:

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

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

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

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

```js
import '@scoped-vaadin/virtual-list/src/vaadin-virtual-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: @scopedelement/matarial-web
Description: Scoped Material Web Components
Latest version: 3.0.0

# Material Web

This is a fork of Material web in its newest version. This repository uses [Scoped Custom Element](https://open-wc.org/docs/development/scoped-elements/) to make sure that components are side-effect free and as such can be used in deistributed application better.

## Breaking Change to fork
>This changes requires the [Scoped CustomElementRegistry polyfill ](https://www.npmjs.com/package/@webcomponents/scoped-custom-element-registry).

## Usage
```ts
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { MdFilledTextField } from '@scoped-material/matarial-web/textfield/MdFilledTextField.js';

class MyElement extends ScopedElementsMixin(LitElement) {
  static scopedElements = {
    'md-filled-text-field': MdFilledTextField,
  };

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = '<md-filled-text-field>click</md-filled-text-field>';
  }
}

```
npm package: @scopedelement/material-web
Description: Scoped Material Web Components
Latest version: 3.12.0

# Material Web

This is a fork of Material web in its newest version. This repository uses [Scoped Custom Element](https://open-wc.org/docs/development/scoped-elements/) to make sure that components are side-effect free and as such can be used in deistributed application better.

## Breaking Change to fork
>This changes requires the [Scoped CustomElementRegistry polyfill ](https://www.npmjs.com/package/@webcomponents/scoped-custom-element-registry).

## Usage
```ts
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { MdFilledTextField } from '@scoped-material/matarial-web/textfield/MdFilledTextField.js';

class MyElement extends ScopedElementsMixin(LitElement) {
  static scopedElements = {
    'md-filled-text-field': MdFilledTextField,
  };

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = '<md-filled-text-field>click</md-filled-text-field>';
  }
}

```