@italia/chip 0.1.0-alpha.2

package/AUTHORS

@@ -0,0 +1,3 @@
+Copyright (c) 2025 Dipartimento per la trasformazione digitale - Presidenza del Consiglio dei Ministri
+
+The version control system provides attribution for specific lines of code.

package/LICENSE

@@ -0,0 +1,11 @@
+Copyright (c) 2025, the respective contributors, as shown by the AUTHORS file.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,75 @@
+# \<it-chip>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i it-chip
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@italia/it-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`

package/custom-elements.json

@@ -0,0 +1,467 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItChip",
+          "declaration": {
+            "name": "ItChip",
+            "module": "./it-chip.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-chip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItChip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "dismissable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dismissable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ChipSize"
+              },
+              "default": "'sm'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "avatar",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "avatar",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "avatarAlt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "avatar-alt",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "a11yDescription",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "a11y-description",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ChipVariant"
+              },
+              "default": "''",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "is-disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "closeButton",
+              "type": {
+                "text": "HTMLButtonElement[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "ItIcon[]"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getAvatarSize",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateIcon",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "dismissable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dismissable"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ChipSize"
+              },
+              "default": "'sm'",
+              "fieldName": "size"
+            },
+            {
+              "name": "avatar",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "avatar"
+            },
+            {
+              "name": "avatar-alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "avatarAlt"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "href"
+            },
+            {
+              "name": "a11y-description",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "a11yDescription"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "ChipVariant"
+              },
+              "default": "''",
+              "fieldName": "variant"
+            },
+            {
+              "name": "is-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isDisabled"
+            }
+          ],
+          "superclass": {
+            "name": "BaseComponent",
+            "package": "@italia/globals"
+          },
+          "tagName": "it-chip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItChip",
+          "declaration": {
+            "name": "ItChip",
+            "module": "src/it-chip.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-chip",
+          "declaration": {
+            "name": "ItChip",
+            "module": "src/it-chip.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CHIP_VARIANTS",
+          "type": {
+            "text": "['primary', 'secondary', 'success', 'danger', 'warning', '']"
+          },
+          "default": "['primary', 'secondary', 'success', 'danger', 'warning', '']"
+        },
+        {
+          "kind": "variable",
+          "name": "CHIP_SIZES",
+          "type": {
+            "text": "['sm', 'lg']"
+          },
+          "default": "['sm', 'lg']"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CHIP_VARIANTS",
+          "declaration": {
+            "name": "CHIP_VARIANTS",
+            "module": "src/types.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CHIP_SIZES",
+          "declaration": {
+            "name": "CHIP_SIZES",
+            "module": "src/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-chip.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Chip', component: 'it-chip', tags: ['autodocs'], args: { size: 'sm', label: 'Etichetta', href: undefined, variant: 'primary', isDisabled: false, avatar: '', avatarAlt: 'Avatar', a11yDescription: '', dismissable: false, withIcon: false, withDismissButton: false, }, argTypes: { size: { control: 'select', description: 'Dimensione del chip (`sm` o `lg`).', options: CHIP_SIZES, table: { defaultValue: { summary: 'sm' } }, }, label: { control: 'text', description: \"Testo mostrato all'interno della chip.\", }, href: { control: 'text', description: 'Se valorizzato, la chip sarà un link (elemento `<a>`).', }, variant: { control: 'select', description: 'Colore della chip, secondo le varianti di Bootstrap Italia.', options: CHIP_VARIANTS, }, dismissable: { control: 'boolean', description: \"Indica che la chip può essere chiusa, ma non inserisce alcun pulsante automaticamente. Il pulsante deve essere inserito nello slot `dismiss-button` dall'utilizzatore, comprensivo di eventuale JavaScript per handling di eventi. Per un esempio completo con Javascript, vedi la story [Chip con chiusura](?path=/story/componenti-chip--chip-con-chiusura).\", table: { defaultValue: { summary: 'false' } }, }, isDisabled: { control: 'boolean', description: 'Disabilita la chip. Utile in contesti non interattivi o di sola lettura.', table: { defaultValue: { summary: 'false' } }, }, avatar: { control: 'text', description: `Percorso a un'immagine da mostrare come avatar, es. [randomuser.me](https://randomuser.me/api/portraits/men/46.jpg).`, table: { defaultValue: { summary: 'https://randomuser.me/api/portraits/men/46.jpg' } }, }, avatarAlt: { control: 'text', description: `Testo alternativo per l'immagine dell'avatar, utile per l'accessibilità.`, table: { defaultValue: { summary: 'Alt avatar' } }, }, a11yDescription: { control: 'text', description: `Testo descrittivo aggiuntivo per la chip, utile per l'accessibilità. Viene inserito come contenuto visivamente nascosto all'inizio della chip, ad esempio per specificare a che contenuto si fa riferimento, o assegnare una dicitur come \"Argomento:\".`, table: { defaultValue: { summary: '' } }, }, withIcon: { control: 'boolean', description: \"Simula la presenza di un'icona nella chip. Non è una proprietà del componente, ma serve per mostrare composizioni nel playground interattivo.\", }, withDismissButton: { control: 'boolean', description: 'Simula la presenza di un pulsante di rimozione nella chip. Non è una proprietà del componente, ma serve per mostrare composizioni nel playground interattivo.', }, }, parameters: { docs: { description: { component: ` <Description>Elementi compatti che rappresentano un input, attributo o azione.</Description> Il componente \\`<it-chip>\\` si compone principalmente di una label testuale e, opzionalmente, di: - un avatar (immagine) a sinistra, tramite la proprietà \\`avatar\\`; - un'icona inserita nello slot \\`icon\\`; - un pulsante di chiusura nello slot \\`dismiss-button\\`, per le chip cancellabili/rimuovibili (la logica di rimozione è a carico dell'utilizzatore, vedi sezione dedicata). Per indicazioni su \"Come e Quando usarlo\" si fa riferimento alla [guida del design-system](https://designers.italia.it/design-system/componenti/chips/). `, }, }, }, } satisfies Meta< ChipProps & { withIcon?: boolean; withDismissButton?: boolean; } >"
+        },
+        {
+          "kind": "variable",
+          "name": "EsempioInterattivo",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Esempio interattivo', args: { variant: 'primary', }, tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderComponent(params)}`, }"
+        },
+        {
+          "kind": "variable",
+          "name": "PersonalizzazioneDegliStili",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Personalizzazione degli stili', tags: ['!dev'], parameters: { viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas docs: { canvas: { hidden: true, sourceState: 'none' }, // nasconde solo il canvas nella docs page description: { story: ` Per la personalizzazione degli stili si può usare il selettore \\`::part\\` passando il valore \\`chip\\`. [Vedi qui la guida dettagliata](/docs/personalizzazione-degli-stili--documentazione#selettore-part). `, }, }, }, render: () => html`<div class=\"hide-preview\"></div>`, }"
+        },
+        {
+          "kind": "variable",
+          "name": "VarianteConLink",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Variante con link', args: { size: 'sm', variant: '', href: '#', }, render: () => html` <it-chip label=\"Etichetta\" size=\"sm\" variant=\"\" href=\"#\"></it-chip> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "VariantiColore",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Varianti di colore', args: { label: 'Etichetta', size: 'sm', dismissable: false }, parameters: { docs: { description: { story: ` Gli stili definiti da Bootstrap Italia utilizzano un naming consistente con Bootstrap, con alcune personalizzazioni: `, }, }, }, render: () => html` <div style=\"display: flex; gap: 1rem; flex-wrap: wrap;\"> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"secondary\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"success\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"danger\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"warning\"></it-chip> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "VariantiColoreLink",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Varianti di colore link', args: { label: 'Etichetta', size: 'sm', dismissable: false }, parameters: { docs: { description: { story: ` `, }, }, }, render: () => html` <div style=\"display: flex; gap: 1rem; flex-wrap: wrap;\"> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"secondary\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"success\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"danger\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"warning\" href=\"#\"></it-chip> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "VariantiDimensione",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Varianti di dimensione', args: { size: 'sm', variant: '', dismissable: true, }, render: () => html` <div style=\"display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;\"> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"\" dismissable></it-chip> <it-chip label=\"Etichetta\" size=\"lg\" variant=\"\" dismissable></it-chip> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ChipConChiusura",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Chip con chiusura', render: () => html` <it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\" dismissable id=\"chip-dismissable\"> <it-button slot=\"dismiss-button\" icon it-aria-label=\"Elimina etichetta\" it-aria-description=\"Puoi premere per eliminare la chip.\" @click=${(e: Event) => { const chip = (e.currentTarget as HTMLElement).closest('it-chip'); if (chip) chip.remove(); }} @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const chip = (e.currentTarget as HTMLElement).closest('it-chip'); if (chip) chip.remove(); } }} > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> `, parameters: { docs: { canvas: { sourceState: 'shown', }, description: { story: ` Questa composizione mostra una chip con funzionalità di chiusura. La proprietà \\`dismissable\\` **non aggiunge automaticamente il pulsante**: è responsabilità dell'utilizzatore fornire un \\`<it-button>\\` con \\`slot=\"dismiss-button\"\\` e logica di rimozione/logiche di esecuzione. L'icona di chiusura deve avere dimensione \\`sm\\` per rispettare il design. Il codice JS dell'esempio gestisce la rimozione della chip sia via click che via tastiera (\\`Enter\\` o \\`Spazio\\`). `, }, source: { code: `<it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\" dismissable id=\"chip-dismissable\"> <it-button slot=\"dismiss-button\" icon it-aria-label=\"Elimina etichetta\" it-aria-description=\"Puoi premere per eliminare la chip.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <script type=\"module\"> const dismissButtons = document.querySelectorAll('it-chip#chip-dismissable [slot=\"dismiss-button\"]'); dismissButtons.forEach((btn) => { const removeChip = (e) => { const chip = btn.closest('it-chip'); if (chip) chip.remove(); }; btn.addEventListener('click', removeChip); btn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); removeChip(e); } }); }); </script> `, language: 'html', }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ChipDisabilitata",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Chip disabilitata', args: { isDisabled: true, }, parameters: { docs: { description: { story: ` Aggiungendo l'attributo \\`is-disabled\\` si ottiene una chip disabilitata. `, }, }, }, render: (args) => html` <it-chip label=\"Etichetta\" size=\"sm\" variant=\"${args.variant}\" dismissable is-disabled> <it-button slot=\"dismiss-button\" icon it-aria-label=\"Elimina etichetta\" it-aria-disabled=\"true\" it-aria-description=\"Questa chip è disabilitata e non può essere rimossa.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ChipConAvatar",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Chip con avatar', parameters: { docs: { description: { story: ` Le chip possono includere un avatar utilizzando gli attributi \\`avatar\\` e \\`avatar-alt\\`. `, }, }, }, render: () => html` <div class=\"d-flex gap-2 flex-wrap align-items-center\"> <it-chip label=\"Mario Rossi\" size=\"sm\" variant=\"primary\" avatar=\"https://randomuser.me/api/portraits/men/46.jpg\" avatar-alt=\"Mario Rossi\" dismissable > <it-button slot=\"dismiss-button\" icon it-aria-label=\"Rimuovi Mario Rossi\" it-aria-description=\"Puoi premere per rimuovere questo utente.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <it-chip label=\"Anna Verdi\" size=\"lg\" variant=\"secondary\" avatar=\"https://randomuser.me/api/portraits/women/32.jpg\" avatar-alt=\"Anna Verdi\" dismissable > <it-button slot=\"dismiss-button\" icon it-aria-label=\"Rimuovi Anna Verdi\" it-aria-description=\"Puoi premere per rimuovere questo utente.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ChipConIcona",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Chip con icona', parameters: { docs: { description: { story: ` Le chip possono includere un'icona utilizzando lo slot \\`icon\\` con il componente it-icon. `, }, }, }, render: () => html` <div class=\"d-flex gap-2 flex-wrap align-items-center\"> <it-chip label=\"Download\" size=\"sm\" variant=\"primary\" dismissable> <it-icon slot=\"icon\" name=\"it-download\"></it-icon> <it-button slot=\"dismiss-button\" icon it-aria-label=\"Rimuovi download\" it-aria-description=\"Puoi premere per rimuovere questa azione.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <it-chip label=\"Carica file\" size=\"lg\" variant=\"success\" dismissable> <it-icon slot=\"icon\" name=\"it-upload\"></it-icon> <it-button slot=\"dismiss-button\" icon it-aria-label=\"Rimuovi carica file\" it-aria-description=\"Puoi premere per rimuovere questa azione.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <it-chip href=\"#\" label=\"Preferiti\" size=\"sm\" variant=\"warning\"> <it-icon slot=\"icon\" name=\"it-star-full\"></it-icon> </it-chip> </div> `, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EsempioInterattivo",
+          "declaration": {
+            "name": "EsempioInterattivo",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PersonalizzazioneDegliStili",
+          "declaration": {
+            "name": "PersonalizzazioneDegliStili",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VarianteConLink",
+          "declaration": {
+            "name": "VarianteConLink",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VariantiColore",
+          "declaration": {
+            "name": "VariantiColore",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VariantiColoreLink",
+          "declaration": {
+            "name": "VariantiColoreLink",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VariantiDimensione",
+          "declaration": {
+            "name": "VariantiDimensione",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ChipConChiusura",
+          "declaration": {
+            "name": "ChipConChiusura",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ChipDisabilitata",
+          "declaration": {
+            "name": "ChipDisabilitata",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ChipConAvatar",
+          "declaration": {
+            "name": "ChipConAvatar",
+            "module": "stories/it-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ChipConIcona",
+          "declaration": {
+            "name": "ChipConIcona",
+            "module": "stories/it-chip.stories.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { ItChip } from './it-chip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,6 @@
+export { ItChip } from './it-chip.js';
+import 'lit';
+import 'lit/directive.js';
+import 'lit/decorators.js';
+import 'lit/directives/class-map.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/src/it-chip.d.ts

@@ -0,0 +1,27 @@
+import { BaseComponent } from '@italia/globals';
+import type { ItIcon } from '@italia/icon';
+import { ChipSize, ChipVariant } from './types.js';
+export declare class ItChip extends BaseComponent {
+    static styles: import("lit").CSSResultGroup;
+    dismissable: boolean;
+    size: ChipSize;
+    avatar: string;
+    avatarAlt: string;
+    label: string;
+    href: string;
+    a11yDescription: string;
+    variant: ChipVariant;
+    isDisabled: boolean;
+    closeButton: HTMLButtonElement[];
+    icon: ItIcon[];
+    private getAvatarSize;
+    private updateIcon;
+    updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'it-chip': ItChip;
+    }
+}
+//# sourceMappingURL=it-chip.d.ts.map

package/dist/src/it-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"it-chip.d.ts","sourceRoot":"","sources":["../../src/it-chip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAInD,qBACa,MAAO,SAAQ,aAAa;IACvC,MAAM,CAAC,MAAM,+BAAU;IAEqB,WAAW,UAAS;IAErB,IAAI,EAAE,QAAQ,CAAQ;IAEtB,MAAM,SAAM;IAEa,SAAS,SAAM;IAExC,KAAK,SAAM;IAEX,IAAI,SAAM;IAEqB,eAAe,SAAM;IAEpD,OAAO,EAAE,WAAW,CAAM;IAEC,UAAU,UAAS;IAGzF,WAAW,EAAG,iBAAiB,EAAE,CAAC;IAGlC,IAAI,EAAG,MAAM,EAAE,CAAC;IAEhB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,UAAU;IAaT,OAAO;IAmChB,MAAM;CAyCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}