@italia/collapse 1.0.0-alpha.4

package/AUTHORS

@@ -0,0 +1 @@
+Presidenza del Consiglio dei Ministri

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,62 @@
+# \<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
+```

package/custom-elements.json

@@ -0,0 +1,1001 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItCollapse",
+          "declaration": {
+            "name": "ItCollapse",
+            "module": "./it-collapse.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ItCollapseBase",
+          "declaration": {
+            "name": "ItCollapseBase",
+            "module": "./it-collapse-base.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PressEvent",
+          "declaration": {
+            "name": "PressEvent",
+            "module": "./types.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TriggerTag",
+          "declaration": {
+            "name": "TriggerTag",
+            "module": "./types.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-collapse-base.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItCollapseBase",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...BaseComponent.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'primary'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "outline",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "attribute": "outline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "expanded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isAccordion",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "as",
+              "type": {
+                "text": "string"
+              },
+              "default": "'button'",
+              "attribute": "as",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "default-open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "contentElement",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "triggerElements",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "triggerElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isAnimating",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "type": {
+                "text": "Animation | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "animationDuration",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "350"
+            },
+            {
+              "kind": "field",
+              "name": "_triggerId",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_contentId",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "handleTriggerAction",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "toggle"
+            },
+            {
+              "kind": "method",
+              "name": "setInitialState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "cleanupAnimation",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateAriaAttributes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateBackgroundStyles",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "performExpand",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "performCollapse",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onTriggerSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrigger",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "hasSlottedTrigger",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isValidTag",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "tag",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "it-collapse-toggle",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "default": "'primary'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "size"
+            },
+            {
+              "name": "outline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "outline"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "as",
+              "type": {
+                "text": "string"
+              },
+              "default": "'button'",
+              "fieldName": "as"
+            },
+            {
+              "name": "default-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "defaultOpen"
+            }
+          ],
+          "superclass": {
+            "name": "BaseComponent",
+            "package": "@italia/globals"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItCollapseBase",
+          "declaration": {
+            "name": "ItCollapseBase",
+            "module": "src/it-collapse-base.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-collapse.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItCollapse",
+          "superclass": {
+            "name": "ItCollapseBase",
+            "module": "/src/it-collapse-base.js"
+          },
+          "tagName": "it-collapse",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "default": "'primary'",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "name": "outline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "outline",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "expanded",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "name": "as",
+              "type": {
+                "text": "string"
+              },
+              "default": "'button'",
+              "fieldName": "as",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "name": "default-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "defaultOpen",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...BaseComponent.shadowRootOptions, delegatesFocus: true, }",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'primary'",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "outline",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "attribute": "outline",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "expanded",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isAccordion",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "as",
+              "type": {
+                "text": "string"
+              },
+              "default": "'button'",
+              "attribute": "as",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "default-open",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "contentElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "triggerElements",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "triggerElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isAnimating",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "type": {
+                "text": "Animation | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "animationDuration",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "350",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_triggerId",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_contentId",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleTriggerAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setInitialState",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "cleanupAnimation",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateAriaAttributes",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateBackgroundStyles",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "performExpand",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "performCollapse",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onTriggerSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrigger",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasSlottedTrigger",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isValidTag",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "tag",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "it-collapse-toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "ItCollapseBase",
+                "module": "src/it-collapse-base.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItCollapse",
+          "declaration": {
+            "name": "ItCollapse",
+            "module": "src/it-collapse.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-collapse",
+          "declaration": {
+            "name": "ItCollapse",
+            "module": "src/it-collapse.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isMouseEvent",
+          "return": {
+            "type": {
+              "text": "event is MouseEvent"
+            }
+          },
+          "parameters": [
+            {
+              "name": "event",
+              "type": {
+                "text": "PressEvent"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isKeyboardEvent",
+          "return": {
+            "type": {
+              "text": "event is KeyboardEvent"
+            }
+          },
+          "parameters": [
+            {
+              "name": "event",
+              "type": {
+                "text": "PressEvent"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isMouseEvent",
+          "declaration": {
+            "name": "isMouseEvent",
+            "module": "src/types.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isKeyboardEvent",
+          "declaration": {
+            "name": "isKeyboardEvent",
+            "module": "src/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-collapse.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<CollapseProps>"
+          },
+          "default": "{ title: 'Componenti/Collapse', tags: ['new', 'component'], component: 'it-collapse', args: { // label: 'Toggle collapse', defaultOpen: false, content: CONTENT, variant: 'primary', size: '', outline: false, as: 'button', }, argTypes: { as: { control: 'text', description: 'Tipo di elemento HTML da utilizzare come trigger (es. button, a, div). Utilizza solo tag idonei per il ruolo di pulsante.', table: { defaultValue: { summary: 'button' } }, }, variant: { control: 'select', description: 'Variante di stile del trigger, basata sulle varianti Bootstrap Italia dei pulsanti.', options: BUTTON_VARIANTS, type: 'string', table: { defaultValue: { summary: 'primary' } }, }, size: { control: 'select', description: 'Dimensione del trigger, basata sulle dimensioni Bootstrap Italia dei pulsanti.', options: BUTTON_SIZES, type: 'string', table: { defaultValue: { summary: undefined } }, }, outline: { control: 'boolean', description: 'Se true, applica lo stile outline Bootstrap Italia dei pulsanti al trigger.', table: { defaultValue: { summary: 'false' } }, }, defaultOpen: { control: 'boolean', description: 'Se true, il collapse è aperto di default al primo rendering', table: { defaultValue: { summary: 'false' } }, name: 'default-open', }, content: { control: 'text', description: 'Contenuto del collapse (slot content), solo per playground interattivo.', }, }, parameters: { layout: 'padded', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Info",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...CollapsibleOrHiddenContentGuidelines(), tags: ['!dev'] }"
+        },
+        {
+          "kind": "variable",
+          "name": "EsempioInterattivo",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'hidden', }, }, }, render: (args) => renderComponent(args), }"
+        },
+        {
+          "kind": "variable",
+          "name": "PersonalizzazioneDegliStili",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Personalizzazione degli stili', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Comportamento",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ parameters: {}, render: () => html` <div> ${renderComponent({ label: 'Apri sezione (button)', as: 'button', variant: 'primary', })} ${renderComponent({ label: 'Apri sezione (a)', as: 'a', variant: 'link', })} </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TriggerClassi",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Varianti del trigger', parameters: { docs: { description: { story: ` `, }, }, }, render: () => html` <div style=\"display:flex;flex-direction:column;gap:1rem\"> <div style=\"display:flex;flex-wrap:wrap;gap:1rem;flex-grow:1;\"> ${renderComponent({ label: 'Pulsante primary', variant: 'primary', as: 'button' })} ${renderComponent({ label: 'Pulsante secondary', variant: 'secondary', as: 'button' })} ${renderComponent({ label: 'Pulsante success', variant: 'success', as: 'button' })} ${renderComponent({ label: 'Pulsante danger', variant: 'danger', as: 'button' })} ${renderComponent({ label: 'Pulsante warning', variant: 'warning', as: 'button' })} ${renderComponent({ label: 'Pulsante link', variant: 'link', as: 'button' })} </div> <div style=\"display:flex;flex-wrap:wrap;gap:1rem;\"> ${renderComponent({ label: 'Pulsante outline primary', variant: 'primary', outline: true, as: 'button' })} ${renderComponent({ label: 'Pulsante outline secondary', variant: 'secondary', outline: true, as: 'button' })} ${renderComponent({ label: 'Pulsante outline success', variant: 'success', outline: true, as: 'button' })} ${renderComponent({ label: 'Pulsante outline danger', variant: 'danger', outline: true, as: 'button' })} ${renderComponent({ label: 'Pulsante outline warning', variant: 'warning', outline: true, as: 'button' })} </div> <div style=\"display:flex;flex-wrap:wrap;gap:1rem;\"> ${renderComponent({ label: 'Pulsante xs', size: 'xs', variant: 'primary', as: 'button' })} ${renderComponent({ label: 'Pulsante default', size: '', variant: 'primary', as: 'button' })} ${renderComponent({ label: 'Pulsante lg', size: 'lg', variant: 'primary', as: 'button' })} </div> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Aperto",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Stato iniziale aperto', parameters: { docs: { description: { story: ` `, }, }, }, render: () => html` <div> ${renderComponent({ label: 'Apri sezione (espansa di default)', defaultOpen: true, as: 'button', })} ${renderComponent({ label: 'Apri sezione', as: 'button', })} </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "LinkCollapse",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Link come trigger', parameters: { docs: { description: { story: ` `, }, }, }, render: () => html` ${renderComponent({ label: 'Link per aprire il collapse', as: 'a', })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TriggerPersonalizzato",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Trigger personalizzato', parameters: { docs: { description: { story: ` `, }, }, }, render: () => html` <it-collapse> <button class=\"my-custom-collapse-button\" slot=\"trigger\"><span slot=\"label\">Trigger custom</span></button> <div slot=\"content\" style=\"padding: 1.5rem 1rem; background-color: #fff;\">${CONTENT}</div> </it-collapse> <style> .my-custom-collapse-button { background-color: #e0e0e0; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 1rem; } .my-custom-collapse-button:hover { background-color: #d5d5d5; } </style> `, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Info",
+          "declaration": {
+            "name": "Info",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EsempioInterattivo",
+          "declaration": {
+            "name": "EsempioInterattivo",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PersonalizzazioneDegliStili",
+          "declaration": {
+            "name": "PersonalizzazioneDegliStili",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Comportamento",
+          "declaration": {
+            "name": "Comportamento",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TriggerClassi",
+          "declaration": {
+            "name": "TriggerClassi",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Aperto",
+          "declaration": {
+            "name": "Aperto",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LinkCollapse",
+          "declaration": {
+            "name": "LinkCollapse",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TriggerPersonalizzato",
+          "declaration": {
+            "name": "TriggerPersonalizzato",
+            "module": "stories/it-collapse.stories.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export { ItCollapse } from './it-collapse.js';
+export { ItCollapseBase } from './it-collapse-base.js';
+export type { PressEvent, TriggerTag } from './types.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,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,7 @@
+export { I as ItCollapse, a as ItCollapseBase } from '../it-collapse--1EOUaR0.js';
+import 'lit/decorators.js';
+import 'lit/directive.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/static-html.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-collapse-base.d.ts

@@ -0,0 +1,45 @@
+import { BaseComponent } from '@italia/globals';
+import { PressEvent } from './types.js';
+export declare class ItCollapseBase extends BaseComponent {
+    static styles: import("lit").CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private variant;
+    private size;
+    private outline;
+    expanded: boolean;
+    protected isAccordion: boolean;
+    as: string;
+    defaultOpen: boolean;
+    contentElement: HTMLElement;
+    private triggerElements;
+    get triggerElement(): HTMLElement | null;
+    private isAnimating;
+    private animation?;
+    private readonly animationDuration;
+    protected _triggerId: string;
+    protected _contentId: string;
+    connectedCallback(): void;
+    protected handleTriggerAction: (e: PressEvent) => void;
+    toggle(): Promise<void>;
+    private setInitialState;
+    private cleanupAnimation;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateAriaAttributes;
+    protected updateBackgroundStyles(): void;
+    private performExpand;
+    private performCollapse;
+    private _onTriggerSlotChange;
+    protected renderDefaultTrigger(): import("lit").TemplateResult<1>;
+    private hasSlottedTrigger;
+    protected isValidTag(tag: string): boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=it-collapse-base.d.ts.map

package/dist/src/it-collapse-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"it-collapse-base.d.ts","sourceRoot":"","sources":["../../src/it-collapse-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOhD,OAAO,EAAiC,UAAU,EAAE,MAAM,YAAY,CAAC;AAIvE,qBAAa,cAAe,SAAQ,aAAa;IAC/C,MAAM,CAAC,MAAM,+BAAU;IAEvB,OAAgB,iBAAiB;;;;;;;MAG/B;IAEyC,OAAO,CAAC,OAAO,CAAa;IAE5B,OAAO,CAAC,IAAI,CAAM;IAEjB,OAAO,CAAC,OAAO,CAAS;IAGpE,QAAQ,UAAS;IAEjB,SAAS,CAAC,WAAW,EAAE,OAAO,CAAS;IAGvC,EAAE,EAAE,MAAM,CAAY;IAGtB,WAAW,UAAS;IAGpB,cAAc,EAAG,WAAW,CAAC;IAG7B,OAAO,CAAC,eAAe,CAAiB;IAExC,IAAI,cAAc,IAAI,WAAW,GAAG,IAAI,CAEvC;IAED,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,SAAS,CAAC,CAAY;IAE9B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAO;IAEzC,SAAS,CAAC,UAAU,SAA0C;IAE9D,SAAS,CAAC,UAAU,SAA0C;IAErD,iBAAiB;IAQ1B,SAAS,CAAC,mBAAmB,GAAI,GAAG,UAAU,UAa5C;IAEI,MAAM;IAmBZ,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB;IAYf,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAgCjF,OAAO,CAAC,oBAAoB;IAwB5B,SAAS,CAAC,sBAAsB;IAEhC,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,eAAe;IAkCvB,OAAO,CAAC,oBAAoB,CAK1B;IAEF,SAAS,CAAC,oBAAoB;IAmC9B,OAAO,CAAC,iBAAiB;IAKzB,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM;IAKhC,MAAM;CA0BP"}

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

@@ -0,0 +1,9 @@
+import { ItCollapseBase } from './it-collapse-base.js';
+export declare class ItCollapse extends ItCollapseBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'it-collapse': ItCollapse;
+    }
+}
+//# sourceMappingURL=it-collapse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"it-collapse.d.ts","sourceRoot":"","sources":["../../src/it-collapse.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,qBACa,UAAW,SAAQ,cAAc;CAE7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/src/it-collapse.js

@@ -0,0 +1,7 @@
+export { I as ItCollapse } from '../it-collapse--1EOUaR0.js';
+import 'lit/decorators.js';
+import 'lit/directive.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/static-html.js';
+//# sourceMappingURL=it-collapse.js.map

package/dist/src/it-collapse.js.map

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

package/dist/src/types.d.ts

@@ -0,0 +1,5 @@
+export type TriggerTag = keyof HTMLElementTagNameMap;
+export type PressEvent = MouseEvent | KeyboardEvent | PointerEvent;
+export declare const isMouseEvent: (event: PressEvent) => event is MouseEvent;
+export declare const isKeyboardEvent: (event: PressEvent) => event is KeyboardEvent;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,qBAAqB,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,CAAC;AACnE,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,KAAK,IAAI,UAAyC,CAAC;AACpG,eAAO,MAAM,eAAe,GAAI,OAAO,UAAU,KAAG,KAAK,IAAI,aAA+C,CAAC"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@italia/collapse",
+  "description": "Web component it-collapse del Design system .italia",
+  "version": "1.0.0-alpha.4",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/italia/dev-kit-italia.git",
+    "directory": "packages/collapse"
+  },
+  "author": "Presidenza del Consiglio dei Ministri",
+  "homepage": "https://italia.github.io/dev-kit-italia",
+  "bugs": {
+    "url": "https://github.com/italia/dev-kit-italia/issues"
+  },
+  "type": "module",
+  "main": "./dist/src/index.js",
+  "module": "./dist/src/index.js",
+  "types": "./dist/src/it-collapse.d.ts",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./it-collapse.js": "./dist/src/it-collapse.js",
+    "./it-collapse-base.js": "./dist/src/it-collapse-base.js",
+    "./styles/*": "./styles/*"
+  },
+  "files": [
+    "dist/src",
+    "README.md",
+    "AUTHORS",
+    "LICENSE",
+    "custom-elements.json",
+    "styles"
+  ],
+  "dependencies": {
+    "bootstrap-italia": "github:italia/bootstrap-italia#ba6eddb24194f44d1080deb24701e0603457d176",
+    "lit": "^3.3.0",
+    "@italia/globals": "^1.0.0-alpha.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/testing": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/mocha": "^10.0.10",
+    "@web/test-runner": "^0.18.2",
+    "rollup": "^4.42.0",
+    "rollup-plugin-scss-lit": "^2.1.0",
+    "sass": "^1.89.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "@italia/icon": "^1.0.0-alpha.4",
+    "@italia/button": "^1.0.0-alpha.4",
+    "@italia/test-config": "^0.0.0",
+    "@italia/typescript-config": "^0.0.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "analyze": "cem analyze --litelement --exclude dist",
+    "build": "rollup --config rollup.config.js",
+    "clean": "rimraf node_modules .turbo .rollup.cache dist coverage",
+    "lint": "eslint --ext .ts \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" && prettier \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --check",
+    "format": "eslint --ext .ts \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --fix && prettier \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --write",
+    "test": "wtr --coverage --node-resolve --config web-test-runner.config.js"
+  }
+}

package/styles/globals.scss

@@ -0,0 +1,24 @@
+it-collapse {
+  &:not(:defined) {
+    [slot='content'] {
+      display: block;
+    }
+
+    [slot='label'] {
+      display: inline-flex;
+      height: 44.8px;
+      align-items: center;
+      padding: 0 1rem;
+      border-radius: var(--bs-btn-border-radius, 4px);
+    }
+
+    &:not([default-open]) {
+      [slot='content'] {
+        height: 0 !important;
+        padding: 0 !important;
+        visibility: hidden;
+        width: 0;
+      }
+    }
+  }
+}