@italia/dropdown 0.1.0-alpha.2

package/custom-elements.json

@@ -0,0 +1,745 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItDropdown",
+          "declaration": {
+            "name": "ItDropdown",
+            "module": "./it-dropdown.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ItDropdownItem",
+          "declaration": {
+            "name": "ItDropdownItem",
+            "module": "./it-dropdown-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-dropdown-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItDropdownItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "large",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "large",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "separator",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "separator",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "full-width",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "itRole",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "it-role"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getFocusableElement",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handlePress",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent | MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "href"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "active"
+            },
+            {
+              "name": "large",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "large"
+            },
+            {
+              "name": "separator",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "separator"
+            },
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "it-role",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "itRole"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "BaseComponent",
+            "package": "@italia/globals"
+          },
+          "tagName": "it-dropdown-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItDropdownItem",
+          "declaration": {
+            "name": "ItDropdownItem",
+            "module": "src/it-dropdown-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-dropdown-item",
+          "declaration": {
+            "name": "ItDropdownItem",
+            "module": "src/it-dropdown-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-dropdown.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItDropdown",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size | undefined"
+              },
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant | undefined"
+              },
+              "default": "'primary'",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "alignment",
+              "type": {
+                "text": "string"
+              },
+              "default": "'bottom-start'",
+              "attribute": "alignment"
+            },
+            {
+              "kind": "field",
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dark"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "full-width",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "itRole",
+              "type": {
+                "text": "string"
+              },
+              "default": "'menu'",
+              "attribute": "it-role"
+            },
+            {
+              "kind": "field",
+              "name": "itAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "it-aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "_popoverOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_buttonId",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_menuId",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_slotEl",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_ariaNav",
+              "privacy": "private",
+              "default": "new AriaKeyboardListController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_triggerEl",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_onTriggerClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onPopoverOpen",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onPopoverClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_menuItems",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_setChildrenProperties",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onKeyDown",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "Size | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant | undefined"
+              },
+              "default": "'primary'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "alignment",
+              "type": {
+                "text": "string"
+              },
+              "default": "'bottom-start'",
+              "fieldName": "alignment"
+            },
+            {
+              "name": "dark",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dark"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "it-role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'menu'",
+              "fieldName": "itRole"
+            },
+            {
+              "name": "it-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "itAriaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "BaseComponent",
+            "package": "@italia/globals"
+          },
+          "tagName": "it-dropdown",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItDropdown",
+          "declaration": {
+            "name": "ItDropdown",
+            "module": "src/it-dropdown.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-dropdown",
+          "declaration": {
+            "name": "ItDropdown",
+            "module": "src/it-dropdown.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-dropdown.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Dropdown', component: 'it-dropdown', tags: ['autodocs'], args: { label: 'Apri dropdown', disabled: false, alignment: undefined, variant: 'primary', size: undefined, 'it-role': undefined, dark: false, 'full-width': false, }, argTypes: { label: { control: 'text' }, disabled: { control: 'boolean' }, alignment: { control: 'select', options: [ 'top', 'right', 'bottom', 'left', 'top-start', 'top-end', 'right-start', 'right-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', ], }, variant: { control: 'select', options: ['primary', 'secondary', 'success', 'danger', 'warning', 'light', 'link'], }, size: { control: 'select', options: ['sm', 'lg'], }, 'it-role': { control: 'select', options: ['menu', 'list'], }, dark: { control: 'boolean' }, 'full-width': { control: 'boolean' }, }, decorators: [(Story) => html`<div style=${containerStyle}>${Story()}</div>`], parameters: { docs: { description: { component: ` <Description>Attiva o disattiva overlay contestuali per visualizzare liste di link ed altro ancora con questi menu a tendina.</Description> Per la creazione di un dropdown è necessario utilizzare il componente \\`<it-dropdown>\\` che può contenere al suo interno uno o più \\`<it-dropdown-item>\\`. È necessario specificare l'etichetta del menu tramite l'attributo \\`label\\`. È possibile specificare una variante tramite l'attributo \\`variant\\`, questa verrà applicata al pulsante di attivazione del menu. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p>Lo standard <a href=\"https://www.w3.org/TR/wai-aria/\">WAI ARIA</a> definisce un widget con proprietà <a href=\"https://www.w3.org/TR/wai-aria/#menu\">\\`role=\"menu\"\\`</a>, specifica per i menu applicativi con link o azioni. Questi menu possono contenere solo voci di menu, voci di menu di caselle di controllo, voci di menu dei pulsanti di opzione, gruppi di pulsanti di opzione e sottomenu.</p> <p>I dropdown di **Dev Kit Italia** sono progettati per essere invece generici e applicabili a una varietà di situazioni. Per questo motivo, il componente \\`it-dropdown\\` ha come ruolo predefinito il ruolo \\`menu\\` e gestisce automaticamente il ruolo degli elementi interni, ma gli autori potranno modificare il ruolo del Dropdown generato da questo componente ad una semplice lista impostando l'attributo \\`it-role=\"list\"\\`.</p> <p>Questo componente comprende di base il supporto per la maggior parte delle interazioni standard del menu della tastiera, come la possibilità di spostarsi tra i singoli elementi \\`it-dropdown-item\\` usando i tasti freccia, e chiude il menu con il tasto ESC.</p> </div></div> `, }, }, }, } satisfies Meta<DropdownProps>"
+        },
+        {
+          "kind": "variable",
+          "name": "Base",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: (args) => html` <it-dropdown label=${args.label} ?disabled=${args.disabled} alignment=${ifDefined(args.alignment)} size=${ifDefined(args.size)} variant=${args.variant} it-role=${ifDefined(args['it-role'])} ?dark=${args.dark} ?full-width=${args['full-width']} > <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> `, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, canvas: { sourceState: 'shown' }, }, }, tags: ['!autodocs', '!dev'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "Varianti",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Dropdown button varianti', render: () => html` <it-dropdown label=\"Primario\" variant=\"primary\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> <it-dropdown label=\"Secondario\" variant=\"secondary\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> <it-dropdown label=\"Success\" variant=\"success\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> <it-dropdown label=\"Danger\" variant=\"danger\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> `, decorators: [(Story) => html`<div style=\"${containerStyle}gap:0.5rem;flex-wrap:wrap;display:flex\">${Story()}</div>`], argTypes: { ...disabledControls() }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: 'Ovviamente sono disponibili tutte le varianti già disponibili per i pulsanti. Di seguito, un esempio di utilizzo con le varianti `primary`, `secondary`, `success` e `danger`.', }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Direzioni",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <it-dropdown label=\"Giù\" alignment=\"bottom-start\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> <it-dropdown label=\"Su\" alignment=\"top-start\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> <it-dropdown label=\"Sinistra\" alignment=\"left\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> <it-dropdown label=\"Destra\" alignment=\"right\"> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> `, decorators: [ (Story) => html`<div style=\"${containerStyle}gap:2rem;flex-wrap:wrap;align-items:space-between;justify-content:center;flex-direction:column;\" > ${Story()} </div>`, ], argTypes: { ...disabledControls() }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Per aprire le voci di menu in direzioni diverse, è possibile utilizzare l'attributo \\`alignment\\` con i valori \\`top\\`, \\`right\\`, \\`bottom\\`, \\`left\\`, \\`top-start\\`, \\`top-end\\`, \\`right-start\\`, \\`right-end\\`, \\`bottom-start\\`, \\`bottom-end\\`, \\`left-start\\` e \\`left-end\\`. I valori \\`top\\`, \\`right\\`, \\`bottom\\` e \\`left\\` aprono il menu in direzioni standard, centrate rispetto al trigger, mentre i valori \\`top-start\\`, \\`top-end\\`, \\`right-start\\`, \\`right-end\\`, \\`bottom-start\\`, \\`bottom-end\\`, \\`left-start\\` e \\`left-end\\` permettono di specificare la posizione esatta del menu rispetto al trigger. `, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuVociAttive",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu con voci attive', render: (args) => html` <it-dropdown label=${args.label} variant=${args.variant}> <it-dropdown-item href=\"#\" active>Attivo</it-dropdown-item> <it-dropdown-item href=\"#\">Non attivo</it-dropdown-item> <it-dropdown-item href=\"#\">Non attivo</it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['label', 'variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Aggiungere l'attributo active agli elementi del dropdown che si vogliono mostrare come attivi. Per questioni di accessibilità il componente aggiungerà automaticamente <span class=\"visually-hidden\"> attivo</span> in coda al testo degli elementi attivi.`, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuDisabilitato",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu disabilitato', args: { disabled: true }, render: (args) => html` <it-dropdown label=${args.label} ?disabled=${args.disabled} variant=${args.variant}> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['label', 'variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Aggiungere l'attributo \\`disabled\\` al dropdown per **disabilitarlo** completamente.`, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuVociDisabilitate",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu con voci disabilitate', render: (args) => html` <it-dropdown label=${args.label} variant=${args.variant}> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\" disabled>Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['label', 'variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Aggiungere l'attributo \\`disabled\\` agli elementi del dropdown che si vogliono mostrare come **disabilitati**.`, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuIntestazioniSeparatori",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu con intestazioni e separatori', render: (args) => html` <it-dropdown label=\"Item con separatore e header\" variant=${args.variant}> <h4 slot=\"header\" class=\"link-list-heading dropdown-header\">Intestazione</h4> <it-dropdown-item href=\"#\">Prima voce</it-dropdown-item> <it-dropdown-item separator></it-dropdown-item> <it-dropdown-item href=\"#\">Dopo separatore</it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `All'interno del menu dropdown possono essere inseriti header e separatori.`, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuVociGrandi",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu con voci grandi', render: (args) => html` <it-dropdown label=${args.label} variant=${args.variant}> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\" large>Grande</it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['label', 'variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Per aumentare la dimensione degli elementi contenuti nel dropdown è sufficiente aggiungere agli stessi l'attributo \\`large\\`.`, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuATuttaLarghezza",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu a tutta larghezza', args: { 'full-width': true }, render: (args) => html` <it-dropdown label=${args.label} ?disabled=${args.disabled} alignment=${ifDefined(args.alignment)} size=${ifDefined(args.size)} variant=${ifDefined(args.variant)} it-role=${ifDefined(args['it-role'])} ?dark=${args.dark} ?full-width=${args['full-width']} style=\"width: 100%;\" > <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> `, decorators: [(Story) => html`<div style=\"${containerStyle}min-width:300px\">${Story()}</div>`], parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Per ottenere un dropdown menu largo quanto l’elemento che contiene il dropdown button è sufficiente aggiungere l'attributo \\`full-width\\`. I link e testi contenuti al suo interno saranno disposti in orizzontale.`, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuIconaDestra",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu con icona a destra', render: (args) => html` <it-dropdown label=${args.label} variant=${args.variant}> <it-dropdown-item href=\"#\"> Azione 1 <it-icon slot=\"suffix\" name=\"it-star-outline\" size=\"sm\" color=\"primary\"></it-icon> </it-dropdown-item> <it-dropdown-item href=\"#\"> Azione 2 <it-icon slot=\"suffix\" name=\"it-star-outline\" size=\"sm\" color=\"primary\"></it-icon> </it-dropdown-item> <it-dropdown-item href=\"#\"> Azione 3 <it-icon slot=\"suffix\" name=\"it-star-outline\" size=\"sm\" color=\"primary\"></it-icon> </it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['label', 'variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Agli elementi contenuti nel menu può essere aggiunta un’icona illustrativa allineata a destra utilizzando lo slot \\`suffix\\``, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuIconaSinistra",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu con icona a sinistra', render: (args) => html` <it-dropdown label=${args.label} variant=${args.variant}> <it-dropdown-item href=\"#\"> <it-icon slot=\"prefix\" name=\"it-star-outline\" size=\"sm\" color=\"primary\"></it-icon> Azione 1 </it-dropdown-item> <it-dropdown-item href=\"#\"> <it-icon slot=\"prefix\" name=\"it-star-outline\" size=\"sm\" color=\"primary\"></it-icon> Azione 2 </it-dropdown-item> <it-dropdown-item href=\"#\"> <it-icon slot=\"prefix\" name=\"it-star-outline\" size=\"sm\" color=\"primary\"></it-icon> Azione 3 </it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['label', 'variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Agli elementi contenuti nel menu può essere aggiunta un’icona illustrativa allineata a sinistra utilizzando lo slot \\`prefix\\``, }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MenuScuro",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Menu scuro', args: { dark: true }, render: (args) => html` <it-dropdown label=${args.label} variant=${args.variant} dark> <h4 slot=\"header\" class=\"link-list-heading dropdown-header\">Intestazione</h4> <it-dropdown-item href=\"#\">Azione 1</it-dropdown-item> <it-dropdown-item href=\"#\">Azione 2</it-dropdown-item> <it-dropdown-item separator></it-dropdown-item> <it-dropdown-item href=\"#\">Azione 3</it-dropdown-item> </it-dropdown> `, argTypes: { ...disabledControls(['label', 'variant']) }, parameters: { ...meta.parameters, docs: { source: { excludeDecorators: true }, description: { story: `Aggiungendo l'attributo \\`dark\\` al dropdown si ottiene una versione con un colore primario scuro. Link ed elementi interni vengono declinati di conseguenza.`, }, }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Base",
+          "declaration": {
+            "name": "Base",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Varianti",
+          "declaration": {
+            "name": "Varianti",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Direzioni",
+          "declaration": {
+            "name": "Direzioni",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuVociAttive",
+          "declaration": {
+            "name": "MenuVociAttive",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuDisabilitato",
+          "declaration": {
+            "name": "MenuDisabilitato",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuVociDisabilitate",
+          "declaration": {
+            "name": "MenuVociDisabilitate",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuIntestazioniSeparatori",
+          "declaration": {
+            "name": "MenuIntestazioniSeparatori",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuVociGrandi",
+          "declaration": {
+            "name": "MenuVociGrandi",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuATuttaLarghezza",
+          "declaration": {
+            "name": "MenuATuttaLarghezza",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuIconaDestra",
+          "declaration": {
+            "name": "MenuIconaDestra",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuIconaSinistra",
+          "declaration": {
+            "name": "MenuIconaSinistra",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuScuro",
+          "declaration": {
+            "name": "MenuScuro",
+            "module": "stories/it-dropdown.stories.ts"
+          }
+        }
+      ]
+    }
+  ]
+}