open-index/open-npm huggingface dataset:
npm package: @italia/accordion
Description: Web component it-accordion del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-accordion>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/accordion
```

## Usage

```html
<script type="module">
  import '@italia/accordion';
</script>

<it-accordion></it-accordion>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.
npm package: @italia/autocomplete
Description: Web component it-autocomplete del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-autocomplete>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/autocomplete
```

## Usage

```html
<script type="module">
  import '@italia/autocomplete';
</script>

<it-autocomplete></it-autocomplete>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/avatar
Description: Web component it-avatar del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-avatar>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/avatar
```

## Usage

```html
<script type="module">
  import '@italia/avatar';
</script>

<it-avatar></it-avatar>
```

## Running locally

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`

## Testing

```bash
npm run test
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/back-to-top
Description: Web component it-back-to-top del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-back-to-top>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/back-to-top
```

## Usage

```html
<script type="module">
  import '@italia/back-to-top';
</script>

<it-back-to-top></it-back-to-top>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/breadcrumbs
Description: Web component it-breadcrumbs del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# Breadcrumbs Web Component

Questo package contiene il web component `<it-breadcrumbs>`, conforme agli standard del progetto e con stili Bootstrap Italia.

## Installation

```bash
npm i @italia/breadcrumbs
```

## Usage

```html
<it-breadcrumbs it-aria-label="Percorso di navigazione">
  <it-breadcrumb-item><a href="#">Home</a></it-breadcrumb-item>
  <it-breadcrumb-item><a href="#">Sezione</a></it-breadcrumb-item>
  <it-breadcrumb-item>Voce corrente</it-breadcrumb-item>
</it-breadcrumbs>
```

## Sviluppo

- Stili: solo SCSS, no CSS inline
- Test: web-test-runner
- Storie: Storybook

## License

Vedi LICENSE.
npm package: @italia/button
Description: Web component it-button del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-button>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/button
```

## Usage

```html
<script type="module">
  import '@italia/button';
</script>

<it-button></it-button>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/callout
Description: Web component it-callout del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# Callout

Web component it-callout del Design system .italia

## Installazione

```bash
npm install @italia/callout
npm install @italia/collapse
```

Nel caso di non utilizzo del kit completo, la dipendenza `@italia/collapse` è necessaria per implementare la versione "Callout di approfondimento", che presenta una sezione collassabile implementata attraverso collapse.

```js
// it-callout-more-collapse.ts
import { ItCollapseBase } from '@italia/collapse';

export class ItCalloutMoreCollapse extends ItCollapseBase {}
```

## Utilizzo

```html
<it-callout variant="primary">
  <span slot="title">Titolo del callout</span>
  <p>Contenuto del callout con informazioni importanti per l'utente.</p>
</it-callout>
```

## Documentazione

Per maggiori informazioni consultare la [documentazione ufficiale](https://italia.github.io/dev-kit-italia).
npm package: @italia/card
Description: Web component it-card del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-card>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/card
```

## Usage

```html
<script type="module">
  import '@italia/card';
</script>

<it-card></it-card>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/checkbox
Description: Web component it-checkbox del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-checkbox>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/checkbox
```

## Usage

```html
<script type="module">
  import '@italia/checkbox';
</script>

<it-checkbox></it-checkbox>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/chip
Description: Web component it-chip del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-chip>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/chip
```

## Usage

```html
<script type="module">
  import '@italia/chip';
</script>

<it-chip></it-chip>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/collapse
Description: Web component it-collapse del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-collapse>

Web component `it-collapse` del Design System Italia.

## Installation

```bash
npm i @italia/collapse
```

## Usage

```html
<script type="module">
  import '@italia/collapse';
</script>

<it-collapse label="Collapse header" default-open>
  <div slot="content">
    <p>Contenuto del collapse.</p>
  </div>
</it-collapse>
```

## Con trigger personalizzato

```html
<it-collapse>
  <button slot="trigger">Custom trigger</button>
  <div slot="content">
    <p>Contenuto del collapse.</p>
  </div>
</it-collapse>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

```bash
npm run test:watch
```
npm package: @italia/dropdown
Description: Web component it-dropdown del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# Dropdown Web Component

Questo package contiene il web component `<it-dropdown>`, conforme agli standard del progetto e con stili Bootstrap Italia.

## Installation

```bash
npm i @italia/dropdown
```

## Usage

```
<it-dropdown>
  <button>Apri menu</button>
  <ul popover>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">Chi siamo</a></li>
    <li><a href="/contatti">Contatti</a></li>
  </ul>
</it-dropdown>
```

## Sviluppo

- Stili: solo SCSS, no CSS inline
- Test: web-test-runner
- Storie: Storybook

## License

Vedi LICENSE.
npm package: @italia/globals
Description: Utilities per i Web components del Design System .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# Globals

This package contains extendable BaseComponent and BaseLocalizedComponent, utils and mixins, reusable in all web-components packages.

## Installation

```bash
npm i globals
```

## Usage

```html
<script type="module">
  import '@italia/globals';
</script>
```

### BaseComponent

Base web-component

Example:

```js
import { BaseComponent } from '@italia/globals';

@customElement('my-element')
export class MyElement extends BaseComponent {
  render() {
    return html`<div>Your html</div>`;
  }
}
```

### BaseLocalizedComponent

Base localized component, to be used when you need translations in your component.

```js
import { registerTranslation } from '@italia/i18n';
import { BaseLocalizedComponent } from '@italia/globals';
import en from '../translations/en';
import es from '../translations/es';

registerTranslation(en, es);

@customElement('my-element')
export class MyElement extends BaseLocalizedComponent {
  render() {
    return html` <div>
        <h2>Lang</h2>
        ${this.$localize.lang()}
      </div>
      <div>
        <h2>Direction</h2>
        ${this.$localize.dir()}
      </div>
      <div>
        <h2>Translate string</h2>
        ${this.$t('hello_world')}
      </div>
      <div>
        <h2>Date</h2>
        ${this.$d('2021-09-15 14:00:00 ET', { year: 'numeric', month: 'long', day: 'numeric' })}
      </div>
      <div>
        <h2>Number</h2>
        ${this.$n(1234.56, { style: 'currency', currency: 'USD' })}
      </div>`;
  }
}
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/icon
Description: Web component it-icon del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-icon>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/icon
```

## Usage

```html
<script type="module">
  import '@italia/icon';
</script>

<it-icon></it-icon>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.
npm package: @italia/input
Description: Web component it-input del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-input>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/input
```

## Usage

```html
<script type="module">
  import '@italia/it-input';
</script>

<it-input></it-input>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/modal
Description: Web component it-modal del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-modal>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/modal
```

## Usage

```html
<script type="module">
  import '@italia/modal';
</script>
```

## Running locally

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`

## Testing

```bash
npm run test
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/navscroll
Description: Web component it-navscroll del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-navscroll>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/navscroll
```

## Usage

```html
<script type="module">
  import '@italia/navscroll';
</script>

<it-navscroll></it-navscroll>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/pagination
Description: Web component it-pagination del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# Pagination

Componente per la navigazione tra pagine di contenuto.

## Installazione

```bash
npm install @italia/pagination
```

## Uso

```html
<it-pagination value="3">
  <it-pagination-item page="1">
    <a href="?page=1">1</a>
  </it-pagination-item>
  <it-pagination-item page="2">
    <a href="?page=2">2</a>
  </it-pagination-item>
  <it-pagination-item page="3">
    <a href="?page=3">3</a>
  </it-pagination-item>
</it-pagination>
```

## Documentazione

Per la documentazione completa visita [https://italia.github.io/dev-kit-italia](https://italia.github.io/dev-kit-italia)
npm package: @italia/popover
Description: Web component it-popover del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-popover>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/popover
```

## Usage

```html
<script type="module">
  import '@italia/popover';
</script>

<it-popover></it-popover>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.
npm package: @italia/radio
Description: Web component it-radio del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-radio> & \<it-radio-group>

## Installation

```bash
npm i @italia/radio
```

## Usage

### Utilizzo Base

```html
<script type="module">
  import '@italia/radio';
</script>

<it-radio-group name="gruppo">
  <span slot="legend">Seleziona un'opzione</span>
  <it-radio value="opzione1" checked>
    <span slot="label">Opzione 1</span>
  </it-radio>
  <it-radio value="opzione2">
    <span slot="label">Opzione 2</span>
  </it-radio>
  <it-radio value="opzione3">
    <span slot="label">Opzione 3</span>
  </it-radio>
</it-radio-group>
```

### Con testo di supporto

```html
<it-radio-group name="gruppo">
  <span slot="legend">Gruppo di radio</span>
  <it-radio value="opt1" support-text="Testo di aiuto per questa opzione">
    <span slot="label">Radio con supporto</span>
  </it-radio>
  <it-radio value="opt2">
    <span slot="label">Radio semplice</span>
  </it-radio>
</it-radio-group>
```

### Radio inline

```html
<it-radio-group name="gruppo-inline">
  <span slot="legend">Gruppo inline</span>
  <it-radio value="opt1" inline>
    <span slot="label">Opzione 1</span>
  </it-radio>
  <it-radio value="opt2" inline>
    <span slot="label">Opzione 2</span>
  </it-radio>
  <it-radio value="opt3" inline>
    <span slot="label">Opzione 3</span>
  </it-radio>
</it-radio-group>
```

### Radio raggruppati visivamente

```html
<it-radio-group name="gruppo">
  <span slot="legend">Gruppo visivamente evidenziato</span>
  <it-radio value="opt1" group>
    <span slot="label">Opzione 1</span>
  </it-radio>
  <it-radio value="opt2" group>
    <span slot="label">Opzione 2</span>
  </it-radio>
</it-radio-group>
```

### Con validazione (required)

```html
<form>
  <it-radio-group name="scelta" required>
    <span slot="legend">Seleziona un'opzione *</span>
    <it-radio value="si">
      <span slot="label">Sì, accetto</span>
    </it-radio>
    <it-radio value="no">
      <span slot="label">No, non accetto</span>
    </it-radio>
  </it-radio-group>
  <button type="submit">Invia</button>
</form>
```

### Stato disabilitato

```html
<it-radio-group name="gruppo" disabled>
  <span slot="legend">Gruppo disabilitato</span>
  <it-radio value="opt1" checked>
    <span slot="label">Opzione 1</span>
  </it-radio>
  <it-radio value="opt2">
    <span slot="label">Opzione 2</span>
  </it-radio>
</it-radio-group>
```
npm package: @italia/section
Description: Web component it-section del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-section>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/section
```

## Usage

```html
<script type="module">
  import '@italia/section';
</script>

<it-section></it-section>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/select
Description: Web component it-select del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-select>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/select
```

## Usage

```html
<script type="module">
  import '@italia/it-select';
</script>

<it-select></it-select>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/skiplinks
Description: Web component it-skiplinks del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-skiplinks>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/skiplinks
```

## Usage

```html
<script type="module">
  import '@italia/it-skiplinks';
</script>

<it-skiplinks></it-skiplinks>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/sticky
Description: Web component it-sticky del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-sticky>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/sticky
```

## Usage

```html
<script type="module">
  import '@italia/it-sticky';
</script>

<it-sticky></it-sticky>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/tabs
Description: Web component it-tabs del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 0.0.0

# \<it-tabs>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i it-tabs
```

## Usage

```html
<script type="module">
  import '@italia/it-tabs';
</script>

<it-tabs></it-tabs>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @italia/video
Description: Web component it-video del Design system .italia
Author: Presidenza del Consiglio dei Ministri
Latest version: 1.0.0-alpha.6

# \<it-video>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @italia/video
```

## Usage

```html
<script type="module">
  import '@italia/video';
</script>

<it-video></it-video>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

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

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`