@italia/globals 0.1.0-alpha.1 → 1.0.0-alpha.4

package/custom-elements.json

@@ -17,26 +17,42 @@
         },
         {
           "kind": "js",
-          "name": "FormMixin",
+          "name": "setAttributes",
           "declaration": {
-            "name": "FormMixin",
+            "name": "setAttributes",
             "module": "src/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ValidityMixin",
+          "name": "AriaKeyboardListController",
           "declaration": {
-            "name": "ValidityMixin",
+            "name": "AriaKeyboardListController",
             "module": "src/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "setAttributes",
+          "name": "AriaKeyboardConfig",
           "declaration": {
-            "name": "setAttributes",
-            "module": "src/index.ts"
+            "name": "AriaKeyboardConfig",
+            "module": "./controllers/aria-keyboard-list-controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RovingTabindexController",
+          "declaration": {
+            "name": "RovingTabindexController",
+            "module": "./controllers/roving-tabindex-controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RovingTabindexConfig",
+          "declaration": {
+            "name": "RovingTabindexConfig",
+            "module": "./controllers/roving-tabindex-controller.js"
           }
         },
         {
@@ -73,10 +89,58 @@
         },
         {
           "kind": "js",
-          "name": "VALIDATION_STATUS",
+          "name": "AriaKeyboardAccordionController",
+          "declaration": {
+            "name": "AriaKeyboardAccordionController",
+            "module": "./controllers/aria-keyboard-accordion-controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AriaKeyboardAccordionConfig",
+          "declaration": {
+            "name": "AriaKeyboardAccordionConfig",
+            "module": "./controllers/aria-keyboard-accordion-controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CollapseAnimationController",
+          "declaration": {
+            "name": "CollapseAnimationController",
+            "module": "./controllers/collapse-controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormControl",
           "declaration": {
-            "name": "VALIDATION_STATUS",
-            "module": "./mixins/validity.js"
+            "name": "FormControl",
+            "module": "./form/form-control.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "formCollections",
+          "declaration": {
+            "name": "formCollections",
+            "module": "./form/form-controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormControlControllerOptions",
+          "declaration": {
+            "name": "FormControlControllerOptions",
+            "module": "./form/form-controller.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormControlController",
+          "declaration": {
+            "name": "FormControlController",
+            "module": "./form/form-controller.js"
           }
         },
         {
@@ -86,6 +150,183 @@
             "name": "cookies",
             "module": "./utils/cookies.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WindowManager",
+          "declaration": {
+            "name": "WindowManager",
+            "module": "./window-manager.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ScrollCallback",
+          "declaration": {
+            "name": "ScrollCallback",
+            "module": "./window-manager.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ScrollState",
+          "declaration": {
+            "name": "ScrollState",
+            "module": "./window-manager.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "StoryFormControlMethodAndProps",
+          "declaration": {
+            "name": "StoryFormControlMethodAndProps",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CollapsibleOrHiddenContentGuidelines",
+          "declaration": {
+            "name": "CollapsibleOrHiddenContentGuidelines",
+            "module": "src/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/window-manager.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "WindowManager",
+          "members": [
+            {
+              "kind": "field",
+              "name": "initialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "subscribers",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ScrollCallback>()"
+            },
+            {
+              "kind": "field",
+              "name": "lastScrollY",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "lastWidth",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "lastHeight",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "ticking",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "init",
+              "static": true
+            },
+            {
+              "kind": "method",
+              "name": "requestTick",
+              "privacy": "private",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "forceRecalc",
+                  "default": "false"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "tick",
+              "privacy": "private",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "forceRecalc",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "subscribe",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "cb",
+                  "type": {
+                    "text": "ScrollCallback"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "unsubscribe",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "cb",
+                  "type": {
+                    "text": "ScrollCallback"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WindowManager",
+          "declaration": {
+            "name": "WindowManager",
+            "module": "src/window-manager.ts"
+          }
         }
       ]
     },
@@ -107,6 +348,20 @@
               "privacy": "protected",
               "default": "new Logger(this.tagName.toLowerCase())"
             },
+            {
+              "kind": "field",
+              "name": "composeClass",
+              "privacy": "protected",
+              "default": "clsx"
+            },
+            {
+              "kind": "field",
+              "name": "_id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "_ariaAttributes",
@@ -114,143 +369,1323 @@
                 "text": "Record<string, string>"
               },
               "privacy": "protected",
-              "default": "{}"
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "generateId",
+              "parameters": [
+                {
+                  "name": "prefix",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addFocus",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getActiveElement",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "T | null"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "focusElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "prefersReducedMotion",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "readonly": true
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "BaseLocalizedComponent"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BaseComponent",
+          "declaration": {
+            "name": "BaseComponent",
+            "module": "src/base-component/base-component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BaseLocalizedComponent",
+          "declaration": {
+            "name": "BaseLocalizedComponent",
+            "module": "src/base-component/base-component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/aria-keyboard-accordion-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AriaKeyboardAccordionController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "ReactiveControllerHost"
+              },
+              "privacy": "private",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "AriaKeyboardAccordionConfig"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setConfig",
+              "parameters": [
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "AriaKeyboardAccordionConfig"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "getActiveElement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AriaKeyboardAccordionController",
+          "declaration": {
+            "name": "AriaKeyboardAccordionController",
+            "module": "src/controllers/aria-keyboard-accordion-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/aria-keyboard-list-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AriaKeyboardListController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "ReactiveControllerHost"
+              },
+              "privacy": "private",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "AriaKeyboardConfig"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setConfig",
+              "parameters": [
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "AriaKeyboardConfig"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "getActiveElement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AriaKeyboardListController",
+            "module": "src/controllers/aria-keyboard-list-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/collapse-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CollapseAnimationController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "ReactiveControllerHost"
+              },
+              "privacy": "private",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "animating",
+              "type": {
+                "text": "WeakSet<HTMLElement>"
+              },
+              "privacy": "private",
+              "default": "new WeakSet()"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "triggerElement",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "triggerElement",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "triggerElement",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "isOpen",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CollapseAnimationController",
+          "declaration": {
+            "name": "CollapseAnimationController",
+            "module": "src/controllers/collapse-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/roving-tabindex-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Roving Tabindex Controller\n\nImplements the ARIA roving tabindex pattern for keyboard navigation.\nSee: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n\nUsage:\n```ts\nprivate rovingTabindex = new RovingTabindexController(this, {\n  getItems: () => Array.from(this.querySelectorAll('my-item')),\n  onSelect: (item) => this.selectItem(item),\n});\n```",
+          "name": "RovingTabindexController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "ReactiveControllerHost"
+              },
+              "privacy": "private",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "RovingTabindexConfig<T> & {\n    wrap: boolean;\n    direction: 'horizontal' | 'vertical' | 'both';\n    selectOnFocus: boolean;\n    skipItem: (item: T) => boolean;\n  }"
+              },
+              "privacy": "private",
+              "default": "{ wrap: true, direction: 'both', selectOnFocus: false, skipItem: (item) => item.hasAttribute('disabled') || (item as any).disabled === true, ...config, }"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateTabindices",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "activeIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "Index of the item that should be tabbable (default: 0 or first non-disabled)"
+                }
+              ],
+              "description": "Update tabindex values for all items"
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydown",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentItem",
+                  "type": {
+                    "text": "T"
+                  },
+                  "description": "The currently focused item"
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
+                }
+              ],
+              "description": "Handle keyboard navigation"
+            },
+            {
+              "kind": "method",
+              "name": "getNextIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "T[]"
+                  }
+                },
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "1 | -1"
+                  }
+                }
+              ],
+              "description": "Get the next index based on direction"
+            },
+            {
+              "kind": "method",
+              "name": "findNextValidIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "T[]"
+                  }
+                },
+                {
+                  "name": "startIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "1 | -1"
+                  }
+                }
+              ],
+              "description": "Find the next valid (non-disabled) index"
+            },
+            {
+              "kind": "method",
+              "name": "focusItem",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "description": "Set focus to a specific item"
+            },
+            {
+              "kind": "method",
+              "name": "focusFirst",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Set focus to the first non-disabled item"
+            },
+            {
+              "kind": "method",
+              "name": "focusLast",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Set focus to the last non-disabled item"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RovingTabindexController",
+          "declaration": {
+            "name": "RovingTabindexController",
+            "module": "src/controllers/roving-tabindex-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/directives/setAttributes.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "setAttributes"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "setAttributes",
+            "module": "src/directives/setAttributes.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/form/form-control.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormControl",
+          "members": [
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['it-input', 'it-blur', 'it-change'], })"
+            },
+            {
+              "kind": "field",
+              "name": "_touched",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "inputElement",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the input, submitted as a name/value pair with form data.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the input, submitted as a name/value pair with form data.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If the input is disabled.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "customValidation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If you implement your custom validation and you won't to trigger default validation",
+              "attribute": "custom-validation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "validationText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "If your input is invalid from your custom validition, set this attribute with message validation",
+              "attribute": "validity-message",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Pattern the `value` must match to be valid",
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number | string | Date | undefined"
+              },
+              "description": "The input's minimum value. Only applies to date and number input types.",
+              "attribute": "min"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number | string | Date | undefined"
+              },
+              "description": "The input's maximum value. Only applies to date and number input types.",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number | 'any'"
+              },
+              "default": "'any'",
+              "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
+              "attribute": "step"
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "The input's minimum length.",
+              "attribute": "minlength"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "The input's maximum length.",
+              "attribute": "maxlength"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If the input is required.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isInGroup",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "attribute": "isInGroup"
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "privacy": "public",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "_handleReady",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_handleInput",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleBlur",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleValidationMessages",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_handleInvalid",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "it-input-ready",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "it-input",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "it-blur",
+              "type": {
+                "text": "FocusEvent"
+              }
+            },
+            {
+              "name": "it-focus",
+              "type": {
+                "text": "FocusEvent"
+              }
+            },
+            {
+              "name": "it-click",
+              "type": {
+                "text": "MouseEvent"
+              }
+            },
+            {
+              "name": "it-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the input, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the input, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If the input is disabled.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "custom-validation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If you implement your custom validation and you won't to trigger default validation",
+              "fieldName": "customValidation"
+            },
+            {
+              "name": "validity-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "If your input is invalid from your custom validition, set this attribute with message validation",
+              "fieldName": "validationText"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Pattern the `value` must match to be valid",
+              "fieldName": "pattern"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number | string | Date | undefined"
+              },
+              "description": "The input's minimum value. Only applies to date and number input types.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number | string | Date | undefined"
+              },
+              "description": "The input's maximum value. Only applies to date and number input types.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number | 'any'"
+              },
+              "default": "'any'",
+              "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
+              "fieldName": "step"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "The input's minimum length.",
+              "fieldName": "minlength"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "The input's maximum length.",
+              "fieldName": "maxlength"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If the input is required.",
+              "fieldName": "required"
+            },
+            {
+              "name": "isInGroup",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isInGroup"
+            }
+          ],
+          "superclass": {
+            "name": "BaseLocalizedComponent",
+            "module": "/src/base-component/base-component.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormControl",
+          "declaration": {
+            "name": "FormControl",
+            "module": "src/form/form-control.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/form/form-controller.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "formCollections",
+          "type": {
+            "text": "WeakMap<HTMLFormElement, Set<FormControl>>"
+          },
+          "default": "new WeakMap()"
+        },
+        {
+          "kind": "class",
+          "description": "A reactive controller to allow form controls to participate in form submission, validation, etc.",
+          "name": "FormControlController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "FormControl & ReactiveControllerHost"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "FormControlControllerOptions"
+              },
+              "default": "{ form: (input) => { // If there's a form attribute, use it to find the target form by id // Controls may not always reflect the 'form' property. For example, `<it-button>` doesn't reflect. const formId = input.form; if (formId) { const root = input.getRootNode() as Document | ShadowRoot | HTMLElement; const form = root.querySelector(`#${formId}`); if (form) { return form as HTMLFormElement; } } return input.closest('form'); }, name: (input) => input.name, value: (input) => input.value, disabled: (input) => input.disabled ?? false, reportValidity: (input: FormControl) => typeof input.reportValidity === 'function' ? input.reportValidity() : true, checkValidity: (input: FormControl) => (typeof input.checkValidity === 'function' ? input.checkValidity() : true), setValue: (input, value) => { // eslint-disable-next-line no-param-reassign input.value = value as string; }, assumeInteractionOn: ['it-input'], ...options, }"
+            },
+            {
+              "kind": "field",
+              "name": "submittedOnce",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "attachForm",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "form",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLFormElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "detachForm",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFormData",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFormSubmit",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFormReset",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleInteraction",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "checkFormValidity",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_id",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected"
+              "name": "reportFormValidity",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "generateId",
+              "name": "setUserInteracted",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "prefix",
+                  "name": "el",
                   "type": {
-                    "text": "string"
+                    "text": "FormControl"
+                  }
+                },
+                {
+                  "name": "hasInteracted",
+                  "type": {
+                    "text": "boolean"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "addFocus",
+              "name": "doAction",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "type",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "'submit' | 'reset'"
+                  }
+                },
+                {
+                  "name": "submitter",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLInputElement | any"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "composeClass",
+              "name": "getForm",
+              "description": "Returns the associated `<form>` element, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reset",
               "parameters": [
                 {
-                  "name": "classes",
+                  "name": "submitter",
+                  "optional": true,
                   "type": {
-                    "text": "any"
+                    "text": "HTMLInputElement | any"
                   }
                 }
-              ]
+              ],
+              "description": "Resets the form, restoring all the control to their default value"
             },
             {
               "kind": "method",
-              "name": "getAriaAttributes"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "BaseLocalizedComponent"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BaseComponent",
-          "declaration": {
-            "name": "BaseComponent",
-            "module": "src/base-component/base-component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BaseLocalizedComponent",
-          "declaration": {
-            "name": "BaseLocalizedComponent",
-            "module": "src/base-component/base-component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/directives/setAttributes.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "setAttributes"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "setAttributes",
-            "module": "src/directives/setAttributes.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/mixins/form.ts",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FormMixin",
-          "members": [
+              "name": "submit",
+              "parameters": [
+                {
+                  "name": "submitter",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLInputElement | any"
+                  }
+                }
+              ],
+              "description": "Submits the form, triggering validation and form data injection."
+            },
             {
               "kind": "method",
-              "name": "_handleFormdata",
-              "return": {
-                "type": {
-                  "text": "void"
+              "name": "setValidity",
+              "parameters": [
+                {
+                  "name": "isValid",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
-              },
+              ],
+              "description": "Synchronously sets the form control's validity. Call this when you know the future validity but need to update\nthe host element immediately, i.e. before Lit updates the component in the next update."
+            },
+            {
+              "kind": "method",
+              "name": "userInteracted"
+            },
+            {
+              "kind": "method",
+              "name": "updateValidity",
+              "description": "Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything\nthat affects constraint validation changes so the component receives the correct validity states."
+            },
+            {
+              "kind": "method",
+              "name": "emitInvalidEvent",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "originalInvalidEvent",
+                  "optional": true,
                   "type": {
                     "text": "Event"
-                  },
-                  "description": "The event."
+                  }
                 }
               ],
-              "description": "Handles `formdata` event."
-            }
-          ],
-          "parameters": [
-            {
-              "name": "Base",
-              "type": {
-                "text": "TBase"
-              },
-              "description": "The base class."
+              "description": "Dispatches a non-bubbling, cancelable custom event of type `it-invalid`.\nIf the `it-invalid` event will be cancelled then the original `invalid`\nevent (which may have been passed as argument) will also be cancelled.\nIf no original `invalid` event has been passed then the `it-invalid`\nevent will be cancelled before being dispatched."
             }
           ]
         }
@@ -258,10 +1693,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "formCollections",
+          "declaration": {
+            "name": "formCollections",
+            "module": "src/form/form-controller.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormControlController",
           "declaration": {
-            "name": "FormMixin",
-            "module": "src/mixins/form.ts"
+            "name": "FormControlController",
+            "module": "src/form/form-controller.ts"
           }
         }
       ]
@@ -372,15 +1815,6 @@
               },
               "description": "External validation."
             },
-            {
-              "kind": "field",
-              "name": "_touched",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Field is touched"
-            },
             {
               "kind": "method",
               "name": "_checkValidity",
@@ -419,56 +1853,6 @@
                 }
               ],
               "description": "Sets the given custom validity message."
-            },
-            {
-              "kind": "method",
-              "name": "_handleBlur"
-            },
-            {
-              "kind": "method",
-              "name": "_handleFocus"
-            },
-            {
-              "kind": "method",
-              "name": "_handleClick"
-            },
-            {
-              "kind": "method",
-              "name": "_handleChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "name": "blur",
-              "type": {
-                "text": "FocusEvent"
-              }
-            },
-            {
-              "name": "focus",
-              "type": {
-                "text": "FocusEvent"
-              }
-            },
-            {
-              "name": "click",
-              "type": {
-                "text": "MouseEvent"
-              }
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
             }
           ],
           "parameters": [
@@ -493,10 +1877,89 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/stories/formControlReusableStories.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "StoryFormControlMethodAndProps",
+          "parameters": [
+            {
+              "name": "{\n  otherProps = '',\n  otherMethods = '',\n  otherEvents = '',\n  componentName = 'it-input',\n}"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StoryFormControlMethodAndProps",
+          "declaration": {
+            "name": "StoryFormControlMethodAndProps",
+            "module": "src/stories/formControlReusableStories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/stories/reusableUsageGuidelinesStories.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "CollapsibleOrHiddenContentGuidelines"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CollapsibleOrHiddenContentGuidelines",
+          "declaration": {
+            "name": "CollapsibleOrHiddenContentGuidelines",
+            "module": "src/stories/reusableUsageGuidelinesStories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/cookies.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "rememberChoice",
+          "parameters": [
+            {
+              "name": "service",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "remember",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isChoiceRemembered",
+          "parameters": [
+            {
+              "name": "service",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "clearAllRememberedChoices"
+        },
         {
           "kind": "variable",
           "name": "cookies",
@@ -654,6 +2117,30 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/form/locales/it.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "translation",
+          "type": {
+            "text": "DefaultTranslation"
+          },
+          "default": "{ $code: 'it', $name: 'Italiano', $dir: 'ltr', validityRequired: 'Questo campo è obbligatorio.', validityGroupRequired: \"Scegli almeno un'opzione\", validityPattern: 'Il valore non corrisponde al formato richiesto.', validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.', validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.', }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "translation",
+            "module": "src/form/locales/it.ts"
+          }
+        }
+      ]
     }
   ]
 }