npm - @italia/button - Versions diffs - 0.1.0-alpha.1 → 0.1.0-alpha.2 - Mend

@italia/button 0.1.0-alpha.1 → 0.1.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/custom-elements.json +42 -23
package/dist/src/it-button.d.ts +3 -4
package/dist/src/it-button.d.ts.map +1 -1
package/dist/src/it-button.js +974 -84
package/dist/src/it-button.js.map +1 -1
package/package.json +15 -12
package/styles/globals.scss +7 -1

package/dist/src/it-button.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { directive, Directive } from 'lit/directive.js';
 import { LitElement, css, html } from 'lit';
-import { query, property, customElement } from 'lit/decorators.js';
+import { state, query, property, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 /******************************************************************************
@@ -36,45 +36,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * Form validation status.
- */
-var VALIDATION_STATUS;
-(function (VALIDATION_STATUS) {
-    /**
-     * One indicating no validation error.
-     */
-    VALIDATION_STATUS["NO_ERROR"] = "";
-    /**
-     * One indicating that the value is invalid (generic).
-     */
-    VALIDATION_STATUS["INVALID"] = "invalid";
-    /**
-     * One indicating missing required value.
-     */
-    VALIDATION_STATUS["ERROR_REQUIRED"] = "required";
-    /**
-     * One indicating that the value does not match the pattern.
-     */
-    VALIDATION_STATUS["PATTERN"] = "pattern";
-    /**
-     * One indicating that the value is shorter than the minimum length.
-     */
-    VALIDATION_STATUS["MINLENGTH"] = "minlength";
-    /**
-     * One indicating that the value is less than the maximum length.
-     */
-    VALIDATION_STATUS["MAXLENGTH"] = "maxlength";
-})(VALIDATION_STATUS || (VALIDATION_STATUS = {}));
 class SetAttributesDirective extends Directive {
     update(part, [attributes]) {
         const el = part.element;
@@ -97,19 +58,26 @@ class SetAttributesDirective extends Directive {
 */
 const setAttributes = directive(SetAttributesDirective);
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 const connectedElements = new Set();
 if (window && !window.translations) {
     window.translations = new Map();
 }
 const { translations } = window;
+let fallback;
+// TODO: We need some way for users to be able to set these on the server.
+let documentDirection = 'ltr';
+// Fallback for server.
+let documentLanguage = 'en';
 const isClient = typeof MutationObserver !== 'undefined' &&
     typeof document !== 'undefined' &&
     typeof document.documentElement !== 'undefined';
 /** Updates all localized elements that are currently connected */
 function update() {
     if (isClient) {
-        document.documentElement.dir || 'ltr';
-        document.documentElement.lang || navigator.language;
+        documentDirection = document.documentElement.dir || 'ltr';
+        documentLanguage = document.documentElement.lang || navigator.language;
     }
     [...connectedElements.keys()].forEach((el) => {
         const litEl = el;
@@ -120,8 +88,8 @@ function update() {
 }
 if (isClient) {
     const documentElementObserver = new MutationObserver(update);
-    document.documentElement.dir || 'ltr';
-    document.documentElement.lang || navigator.language;
+    documentDirection = document.documentElement.dir || 'ltr';
+    documentLanguage = document.documentElement.lang || navigator.language;
     // Watch for changes on <html lang>
     documentElementObserver.observe(document.documentElement, {
         attributes: true,
@@ -139,10 +107,238 @@ function registerTranslation(...translation) {
         else {
             translations.set(code, t);
         }
+        // The first translation that's registered is the fallback
+        if (!fallback) {
+            fallback = t;
+        }
     });
     update();
 }
 window.registerTranslation = registerTranslation;
+/**
+ * Localize Reactive Controller for components built with Lit
+ *
+ * To use this controller, import the class and instantiate it in a custom element constructor:
+ *
+ * private localize = new LocalizeController(this);
+ *
+ * This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it
+ * respond to changes to its own dir|lang properties, make it a property:
+ *
+ *   @property() dir: string;
+ *   @property() lang: string;
+ *
+ * To use a translation method, call it like this:
+ *
+ *   ${this.localize.term('term_key_here')}
+ *   ${this.localize.date('2021-12-03')}
+ *   ${this.localize.number(1000000)}
+ */
+class LocalizeController {
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        connectedElements.add(this.host);
+    }
+    hostDisconnected() {
+        connectedElements.delete(this.host);
+    }
+    /**
+     * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
+     * lowercase.
+     */
+    dir() {
+        return `${this.host.dir || documentDirection}`.toLowerCase();
+    }
+    /**
+     * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
+     * lowercase.
+     */
+    lang() {
+        return `${this.host.lang || documentLanguage}`.toLowerCase();
+    }
+    // eslint-disable-next-line class-methods-use-this
+    getTranslationData(lang) {
+        // Convert "en_US" to "en-US". Note that both underscores and dashes are allowed per spec, but underscores result in
+        // a RangeError by the call to `new Intl.Locale()`. See: https://unicode.org/reports/tr35/#unicode-locale-identifier
+        const locale = new Intl.Locale(lang.replace(/_/g, '-'));
+        const language = locale?.language.toLowerCase();
+        const region = locale?.region?.toLowerCase() ?? '';
+        const primary = translations.get(`${language}-${region}`);
+        const secondary = translations.get(language);
+        return { locale, language, region, primary, secondary };
+    }
+    /** Determines if the specified term exists, optionally checking the fallback translation. */
+    exists(key, options) {
+        const { primary, secondary } = this.getTranslationData(options.lang ?? this.lang());
+        const mergedOptions = {
+            includeFallback: false,
+            ...options,
+        };
+        if ((primary && primary[key]) ||
+            (secondary && secondary[key]) ||
+            (mergedOptions.includeFallback && fallback && fallback[key])) {
+            return true;
+        }
+        return false;
+    }
+    /** Outputs a translated term. */
+    term(key, ...args) {
+        const { primary, secondary } = this.getTranslationData(this.lang());
+        let term;
+        // Look for a matching term using regionCode, code, then the fallback
+        if (primary && primary[key]) {
+            term = primary[key];
+        }
+        else if (secondary && secondary[key]) {
+            term = secondary[key];
+        }
+        else if (fallback && fallback[key]) {
+            term = fallback[key];
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`No translation found for: ${String(key)}`);
+            return String(key);
+        }
+        if (typeof term === 'function') {
+            return term(...args);
+        }
+        return term;
+    }
+    /** Outputs a localized date in the specified format. */
+    date(dateToFormat, options) {
+        const date = new Date(dateToFormat);
+        return new Intl.DateTimeFormat(this.lang(), options).format(date);
+    }
+    /** Outputs a localized number in the specified format. */
+    number(numberToFormat, options) {
+        const num = Number(numberToFormat);
+        return Number.isNaN(num) ? '' : new Intl.NumberFormat(this.lang(), options).format(num);
+    }
+    /** Outputs a localized time in relative format. */
+    relativeTime(value, unit, options) {
+        return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
+    }
+}
+/**
+ * @param Base The base class.
+ * @returns A mix-in implementing `localizations` method.
+ *
+ *@example
+ *    <!-- Terms -->
+      ${this.$localize.term('hello')}
+      or
+      ${this.$t('hello')}
+      <!-- Dates -->
+      ${this.$localize.date('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}
+      or
+      ${this.$d('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}
+      <!-- Numbers/currency -->
+      ${this.$localize.number(1000, { style: 'currency', currency: 'USD'})}
+      or
+      ${this.$n(1000,{ style: 'currency', currency: 'USD'})}
+      <!-- Determining language -->
+      ${this.$localize.lang()}
+      <!-- Determining directionality, e.g. 'ltr' or 'rtl' -->
+      ${this.$localize.dir()}
+    *** HOW TO DEFINE TRANSLATIONS: ***
+    // Simple terms
+    upload: 'Upload',
+    // Terms with placeholders
+    greetUser: (name: string) => `Hello, ${name}!`,
+    // Plurals
+    numFilesSelected: (count: number) => {
+        if (count === 0) return 'No files selected';
+        if (count === 1) return '1 file selected';
+        return `${count} files selected`;
+    }
+ */
+const LocalizeMixin = (Base) => class extends Base {
+    constructor() {
+        super(...arguments);
+        this.localize = new LocalizeController(this);
+    }
+    // Provide default values to avoid definite assignment errors and avoid decorators
+    // commentati perchè danno problemi su React.js. Sono attributi nativi, e assegnare un valore di default a react da fastidio
+    // dir: string = '';
+    // lang: string = '';
+    /**
+     * Restituisce tutta l'utility di traduzione
+     *
+     *
+     * @returns tutta l'utility di traduzione
+     *
+     * @example
+     * this.$localize.lang() -> ritorna la lingua corrente
+     * this.$localize.dir() -> ritorna la direzione della lingua corrente
+     */
+    get $localize() {
+        return this.localize;
+    }
+    /**
+     * Restituisce una stringa localizzata a partire da una chiave di termine.
+     *
+     * Utilizza il `LocalizeController` per accedere al dizionario corrente e
+     * tradurre la chiave fornita secondo la lingua attiva.
+     *
+     * @param t - La chiave del termine da localizzare (es. 'hello', 'submit', ecc.).
+     * @returns La stringa tradotta in base alla lingua attiva. Se la chiave non è trovata, restituisce la chiave stessa.
+     *
+     * @example
+     * this.$t('hello'); // → "Ciao" (in locale it-IT)
+     */
+    $t(t) {
+        // format term
+        return this.localize.term(t);
+    }
+    /**
+     * Formatta una data in base alla localizzazione attiva.
+     *
+     * Utilizza il `LocalizeController` per restituire una stringa localizzata
+     * secondo le opzioni fornite (es. mese esteso, anno, ecc.).
+     *
+     * @param n - La data da formattare come stringa compatibile (es. ISO o con timezone, es. '2021-09-15 14:00:00 ET').
+     * @param p - Le opzioni di formattazione per `Intl.DateTimeFormat` (es. { year: 'numeric', month: 'long', day: 'numeric' }).
+     * @returns Una stringa rappresentante la data formattata secondo la localizzazione attiva.
+     *
+     * @example
+     * this.$d('2021-09-15 14:00:00 ET', { year: 'numeric', month: 'long', day: 'numeric' });
+     * // → "15 settembre 2021" (in locale it-IT)
+     */
+    $d(d, p) {
+        // format date
+        return this.localize.date(d, p);
+    }
+    /**
+     * Formatta un numero secondo le impostazioni locali dell'utente corrente.
+     *
+     * Utilizza il `LocalizeController` per applicare formattazione numerica,
+     * incluse opzioni come separatori, decimali, valute, ecc.
+     *
+     * @param d - Il numero da formattare.
+     * @param p - Le opzioni di formattazione (es. { style: 'currency', currency: 'EUR' }).
+     * @returns Una stringa rappresentante il numero formattato secondo la localizzazione attiva.
+     *
+     * @example
+     * this.$n(1234.56, { style: 'currency', currency: 'USD' }); // → "$1,234.56" (in locale en-US)
+     */
+    $n(d, p) {
+        return this.localize.number(d, p);
+    }
+};
 /* eslint-disable no-console */
 class Logger {
@@ -170,9 +366,21 @@ class Logger {
 class BaseComponent extends LitElement {
     constructor() {
         super();
-        this._ariaAttributes = {}; // tutti gli attributi aria-* passati al Web component
+        this.composeClass = clsx;
         this.logger = new Logger(this.tagName.toLowerCase());
     }
+    get _ariaAttributes() {
+        const attributes = {};
+        for (const attr of this.getAttributeNames()) {
+            if (attr === 'it-role') {
+                attributes.role = this.getAttribute(attr);
+            }
+            else if (attr.startsWith('it-aria-')) {
+                attributes[attr.replace(/^it-/, '')] = this.getAttribute(attr);
+            }
+        }
+        return attributes;
+    }
     // eslint-disable-next-line class-methods-use-this
     generateId(prefix) {
         return `${prefix}-${Math.random().toString(36).slice(2)}`;
@@ -182,30 +390,647 @@ class BaseComponent extends LitElement {
         // new TrackFocus(element); // per il momento è stato disattivato perchè ci sono le pseudo classi ::focus-visible per fare quello che fa TrackFocus. Si possono aggiungere regole css in bsi-italia 3 dato che stiamo facendo una breaking release di bsi.
     }
     // eslint-disable-next-line class-methods-use-this
-    composeClass(...classes) {
-        let composedClass = '';
-        classes
-            .filter((c) => c.length > 0)
-            .forEach((newClass) => {
-            composedClass += ` ${newClass}`;
-        });
-        return composedClass.trim();
-    }
-    getAriaAttributes() {
-        for (const attr of this.getAttributeNames()) {
-            if (attr.startsWith('aria-')) {
-                this._ariaAttributes[attr] = this.getAttribute(attr);
-            }
+    getActiveElement() {
+        let active = document.activeElement;
+        while (active && active.shadowRoot && active.shadowRoot.activeElement) {
+            active = active.shadowRoot.activeElement;
         }
+        return active;
+    }
+    get focusElement() {
+        return this;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    get prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     }
     connectedCallback() {
-        super.connectedCallback?.();
-        this.getAriaAttributes();
+        super.connectedCallback();
         // generate internal _id
         const prefix = this.id?.length > 0 ? this.id : this.tagName.toLowerCase();
         this._id = this.generateId(prefix);
     }
 }
+const BaseLocalizedComponent = LocalizeMixin(BaseComponent);
+//
+// We store a WeakMap of forms + controls so we can keep references to all FormControl within a given form. As
+// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is
+// added and removed from the form's set, respectively.
+//
+const formCollections = new WeakMap();
+//
+// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and
+// restore the original behavior when they disconnect.
+//
+const reportValidityOverloads = new WeakMap();
+const checkValidityOverloads = new WeakMap();
+//
+// We store a Set of controls that users have interacted with. This allows us to determine the interaction state
+// without littering the DOM with additional data attributes.
+//
+const userInteractedControls = new WeakSet();
+//
+// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.
+//
+const interactions = new WeakMap();
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+class FormControlController {
+    constructor(host, options) {
+        this.handleFormData = (event) => {
+            // console.log('handleFormData');
+            const disabled = this.options.disabled(this.host);
+            const name = this.options.name(this.host);
+            const value = this.options.value(this.host);
+            const tagName = this.host.tagName.toLowerCase();
+            // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
+            // injecting the name/value on a temporary button, so we can just skip them here.
+            const isButton = tagName === 'it-button';
+            if (this.host.isConnected &&
+                !disabled &&
+                !isButton &&
+                typeof name === 'string' &&
+                name.length > 0 &&
+                typeof value !== 'undefined') {
+                switch (tagName) {
+                    case 'it-radio':
+                        if (this.host.checked) {
+                            event.formData.append(name, value);
+                        }
+                        break;
+                    default:
+                        if (Array.isArray(value)) {
+                            value.forEach((val) => {
+                                event.formData.append(name, val.toString());
+                            });
+                        }
+                        else {
+                            event.formData.append(name, value.toString());
+                        }
+                }
+            }
+        };
+        this.handleFormSubmit = (event) => {
+            const disabled = this.options.disabled(this.host);
+            const reportValidity = this.options.reportValidity;
+            // Update the interacted state for all controls when the form is submitted
+            if (this.form && !this.form.noValidate) {
+                formCollections.get(this.form)?.forEach((control) => {
+                    this.setUserInteracted(control, true);
+                });
+            }
+            if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+                event.preventDefault();
+                // event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
+            }
+        };
+        this.handleFormReset = () => {
+            this.options.setValue(this.host, '');
+            this.setUserInteracted(this.host, false);
+            interactions.set(this.host, []);
+        };
+        this.handleInteraction = (event) => {
+            const emittedEvents = interactions.get(this.host);
+            if (!emittedEvents.includes(event.type)) {
+                emittedEvents.push(event.type);
+            }
+            // Mark it as user-interacted as soon as all associated events have been emitted
+            if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+                this.setUserInteracted(this.host, true);
+            }
+        };
+        this.checkFormValidity = () => {
+            // console.log('checkFormValidity');
+            //
+            // This is very similar to the `reportFormValidity` function, but it does not trigger native constraint validation
+            // Allow the user to simply check if the form is valid and handling validity in their own way.
+            //
+            // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
+            // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
+            // be necessary once we can use ElementInternals.
+            //
+            // Note that we're also honoring the form's novalidate attribute.
+            //
+            if (this.form && !this.form.noValidate) {
+                // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
+                // elements that support the constraint validation API.
+                const elements = this.form.querySelectorAll('*');
+                for (const element of elements) {
+                    if (typeof element.checkValidity === 'function') {
+                        if (!element.checkValidity()) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        };
+        this.reportFormValidity = () => {
+            // console.log('reportFormValidity');
+            //
+            // FormControl work hard to act like regular form controls. They support the Constraint Validation API
+            // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
+            // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
+            // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
+            //
+            // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
+            // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
+            // be necessary once we can use ElementInternals.
+            //
+            // Note that we're also honoring the form's novalidate attribute.
+            //
+            if (this.form && !this.form.noValidate) {
+                // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
+                // elements that support the constraint validation API.
+                const elements = this.form.querySelectorAll('*');
+                for (const element of elements) {
+                    if (typeof element.reportValidity === 'function') {
+                        if (!element.reportValidity()) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        };
+        (this.host = host).addController(this);
+        this.options = {
+            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();
+                    const form = root.querySelector(`#${formId}`);
+                    if (form) {
+                        return form;
+                    }
+                }
+                return input.closest('form');
+            },
+            name: (input) => input.name,
+            value: (input) => input.value,
+            disabled: (input) => input.disabled ?? false,
+            reportValidity: (input) => typeof input.reportValidity === 'function' ? input.reportValidity() : true,
+            checkValidity: (input) => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),
+            setValue: (input, value) => {
+                // eslint-disable-next-line no-param-reassign
+                input.value = value;
+            },
+            assumeInteractionOn: ['it-input'],
+            ...options,
+        };
+    }
+    hostConnected() {
+        const form = this.options.form(this.host);
+        if (form) {
+            this.attachForm(form);
+        }
+        // Listen for interactions
+        interactions.set(this.host, []);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.addEventListener(event, this.handleInteraction);
+        });
+    }
+    hostDisconnected() {
+        this.detachForm();
+        // Clean up interactions
+        interactions.delete(this.host);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.removeEventListener(event, this.handleInteraction);
+        });
+    }
+    hostUpdated() {
+        const form = this.options.form(this.host);
+        // Detach if the form no longer exists
+        if (!form) {
+            this.detachForm();
+        }
+        // If the form has changed, reattach it
+        if (form && this.form !== form) {
+            this.detachForm();
+            this.attachForm(form);
+        }
+        if (this.host.hasUpdated) {
+            this.setValidity(this.host.validity.valid);
+        }
+    }
+    attachForm(form) {
+        if (form) {
+            this.form = form;
+            // Add this element to the form's collection
+            if (formCollections.has(this.form)) {
+                formCollections.get(this.form).add(this.host);
+            }
+            else {
+                formCollections.set(this.form, new Set([this.host]));
+            }
+            this.form.addEventListener('formdata', this.handleFormData);
+            this.form.addEventListener('submit', this.handleFormSubmit);
+            this.form.addEventListener('reset', this.handleFormReset);
+            // Overload the form's reportValidity() method so it looks at FormControl
+            if (!reportValidityOverloads.has(this.form)) {
+                reportValidityOverloads.set(this.form, this.form.reportValidity);
+                this.form.reportValidity = () => this.reportFormValidity();
+            }
+            // Overload the form's checkValidity() method so it looks at FormControl
+            if (!checkValidityOverloads.has(this.form)) {
+                checkValidityOverloads.set(this.form, this.form.checkValidity);
+                this.form.checkValidity = () => this.checkFormValidity();
+            }
+        }
+        else {
+            this.form = undefined;
+        }
+    }
+    detachForm() {
+        if (!this.form)
+            return;
+        const formCollection = formCollections.get(this.form);
+        if (!formCollection) {
+            return;
+        }
+        // Remove this host from the form's collection
+        formCollection.delete(this.host);
+        // Check to make sure there's no other form controls in the collection. If we do this
+        // without checking if any other controls are still in the collection, then we will wipe out the
+        // validity checks for all other elements.
+        // see: https://github.com/shoelace-style/shoelace/issues/1703
+        if (formCollection.size <= 0) {
+            this.form.removeEventListener('formdata', this.handleFormData);
+            this.form.removeEventListener('submit', this.handleFormSubmit);
+            this.form.removeEventListener('reset', this.handleFormReset);
+            // Remove the overload and restore the original method
+            if (reportValidityOverloads.has(this.form)) {
+                this.form.reportValidity = reportValidityOverloads.get(this.form);
+                reportValidityOverloads.delete(this.form);
+            }
+            if (checkValidityOverloads.has(this.form)) {
+                this.form.checkValidity = checkValidityOverloads.get(this.form);
+                checkValidityOverloads.delete(this.form);
+            }
+            // So it looks weird here to not always set the form to undefined. But I _think_ if we unattach this.form here,
+            // we end up in this fun spot where future validity checks don't have a reference to the form validity handler.
+            // First form element in sets the validity handler. So we can't clean up `this.form` until there are no other form elements in the form.
+            this.form = undefined;
+        }
+    }
+    // eslint-disable-next-line class-methods-use-this
+    setUserInteracted(el, hasInteracted) {
+        if (hasInteracted) {
+            userInteractedControls.add(el);
+        }
+        else {
+            userInteractedControls.delete(el);
+        }
+        el.requestUpdate();
+    }
+    doAction(type, submitter) {
+        // console.log('doaction', type);
+        if (this.form) {
+            const button = document.createElement('button');
+            button.type = type;
+            button.style.position = 'absolute';
+            button.style.width = '0';
+            button.style.height = '0';
+            button.style.clipPath = 'inset(50%)';
+            button.style.overflow = 'hidden';
+            button.style.whiteSpace = 'nowrap';
+            // Pass name, value, and form attributes through to the temporary button
+            if (submitter) {
+                button.name = submitter.name;
+                button.value = submitter.value;
+                ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach((attr) => {
+                    if (submitter.hasAttribute(attr)) {
+                        button.setAttribute(attr, submitter.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm() {
+        return this.form ?? null;
+    }
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter) {
+        this.doAction('reset', submitter);
+    }
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter) {
+        // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+        // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+        this.doAction('submit', submitter);
+    }
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid) {
+        const host = this.host;
+        const hasInteracted = Boolean(userInteractedControls.has(host));
+        const required = Boolean(host.required);
+        //
+        // We're mapping the following "states" to data attributes. In the future, we can use ElementInternals.states to
+        // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.
+        //
+        // See this RFC for more details: https://github.com/shoelace-style/shoelace/issues/1011
+        //
+        host.toggleAttribute('data-required', required);
+        host.toggleAttribute('data-optional', !required);
+        host.toggleAttribute('data-invalid', !isValid);
+        host.toggleAttribute('data-valid', isValid);
+        host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
+        host.toggleAttribute('data-user-valid', isValid && hasInteracted);
+    }
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity() {
+        const host = this.host;
+        this.setValidity(host.validity.valid);
+    }
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `it-invalid`.
+     * If the `it-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `it-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent) {
+        const itInvalidEvent = new CustomEvent('it-invalid', {
+            bubbles: false,
+            composed: false,
+            cancelable: true,
+            detail: {},
+        });
+        if (!originalInvalidEvent) {
+            itInvalidEvent.preventDefault();
+        }
+        if (!this.host.dispatchEvent(itInvalidEvent)) {
+            originalInvalidEvent?.preventDefault();
+        }
+    }
+}
+const translation = {
+    $code: 'it',
+    $name: 'Italiano',
+    $dir: 'ltr',
+    validityRequired: 'Questo campo è obbligatorio.',
+    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.',
+};
+registerTranslation(translation);
+class FormControl extends BaseLocalizedComponent {
+    constructor() {
+        super(...arguments);
+        this.formControlController = new FormControlController(this, {
+            assumeInteractionOn: ['it-input', 'it-blur', 'it-change'],
+        });
+        // TODO: verificare se serve davvero con il fatto che usiamo form-controller
+        // static formAssociated = true;
+        //   @property()
+        // internals = this.attachInternals();
+        this._touched = false;
+        /** The name of the input, submitted as a name/value pair with form data. */
+        this.name = '';
+        /** The current value of the input, submitted as a name/value pair with form data. */
+        this.value = '';
+        /** If the input is disabled. */
+        this.disabled = false;
+        /**
+         * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+         * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+         * the same document or shadow root for this to work.
+         */
+        this.form = '';
+        /** If you implement your custom validation and you won't to trigger default validation */
+        this.customValidation = false;
+        /** If your input is invalid from your custom validition, set this attribute with message validation */
+        this.validationText = '';
+        /**
+         * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+         * implied, allowing any numeric value. Only applies to date and number input types.
+         */
+        this.step = 'any';
+        /** The input's minimum length. */
+        this.minlength = -1;
+        /** The input's maximum length. */
+        this.maxlength = -1;
+        /** If the input is required. */
+        this.required = false;
+        this.validationMessage = '';
+    }
+    /** Gets the validity state object */
+    get validity() {
+        return this.inputElement?.validity;
+    }
+    // Form validation methods
+    checkValidity() {
+        const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
+        return inputValid;
+    }
+    /** Gets the associated form, if one exists. */
+    getForm() {
+        return this.formControlController.getForm();
+    }
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity() {
+        const ret = this.inputElement.checkValidity();
+        this.handleValidationMessages();
+        return ret; // this.inputElement.reportValidity();
+    }
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message) {
+        this.inputElement.setCustomValidity(message);
+        this.validationMessage = this.inputElement.validationMessage;
+        this.formControlController.updateValidity();
+    }
+    // Handlers
+    _handleReady() {
+        requestAnimationFrame(() => {
+            this.dispatchEvent(new CustomEvent('it-input-ready', { bubbles: true, detail: { el: this.inputElement } }));
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleInput(e) {
+        this.handleValidationMessages();
+        this.dispatchEvent(new CustomEvent('it-input', {
+            detail: { value: this.inputElement.value, el: this.inputElement },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleBlur(e) {
+        this._touched = true;
+        this.handleValidationMessages();
+        this.dispatchEvent(new FocusEvent('it-blur', { bubbles: true, composed: true }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleFocus(e) {
+        this.dispatchEvent(new FocusEvent('it-focus', { bubbles: true, composed: true }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleClick(e) {
+        this.dispatchEvent(new MouseEvent('it-click', { bubbles: true, composed: true }));
+    }
+    /*
+    Override default browser validation messages
+     */
+    handleValidationMessages() {
+        if (!this.customValidation) {
+            const _v = this.inputElement.validity;
+            if (_v.valueMissing) {
+                this.setCustomValidity(this.$t('validityRequired'));
+            }
+            else if (_v.patternMismatch) {
+                this.setCustomValidity(this.$t('validityPattern'));
+            }
+            else if (_v.tooShort) {
+                this.setCustomValidity(this.$t('validityMinlength').replace('{minlength}', this.minlength.toString()));
+            }
+            else if (_v.tooLong) {
+                this.setCustomValidity(this.$t('validityMaxlength').replace('{maxlength}', this.maxlength.toString()));
+            }
+            else {
+                /* nothing. Usa il messaggio di errore della validazione
+                di default del browser per altri errori di validità come:
+                - typeMismatch
+                - rangeUnderflow
+                - rangeOverflow
+                - stepMismatch
+                - badInput */
+                const otherConstraintErrors = _v.typeMismatch || _v.rangeUnderflow || _v.rangeOverflow || _v.stepMismatch || _v.badInput;
+                if (!otherConstraintErrors) {
+                    this.setCustomValidity('');
+                }
+            }
+        }
+        this.validationMessage = this.inputElement.validationMessage;
+    }
+    _handleInvalid(event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+    _handleChange(e) {
+        const target = e.target;
+        let value;
+        if (target instanceof HTMLInputElement) {
+            switch (target.type) {
+                case 'checkbox':
+                case 'radio':
+                    value = target.checked;
+                    break;
+                case 'file':
+                    value = target.files; // FileList
+                    break;
+                default:
+                    value = target.value;
+            }
+        }
+        else if (target instanceof HTMLSelectElement) {
+            if (target.multiple) {
+                value = Array.from(target.selectedOptions).map((o) => o.value);
+            }
+            else {
+                value = target.value;
+            }
+        }
+        else {
+            // textarea o altri input con value
+            value = target.value;
+        }
+        this.dispatchEvent(new CustomEvent('it-change', {
+            detail: { value, el: target },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updated(changedProperties) {
+        super.updated?.(changedProperties);
+        if (this.customValidation) {
+            this.setCustomValidity(this.validationText ?? '');
+        }
+        else {
+            this.formControlController.updateValidity();
+        }
+    }
+}
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "_touched", void 0);
+__decorate([
+    query('.it-form__control'),
+    __metadata("design:type", HTMLInputElement)
+], FormControl.prototype, "inputElement", void 0);
+__decorate([
+    property({ type: String, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: String }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "form", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'custom-validation' }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "customValidation", void 0);
+__decorate([
+    property({ attribute: 'validity-message', reflect: true }),
+    __metadata("design:type", String)
+], FormControl.prototype, "validationText", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], FormControl.prototype, "pattern", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "min", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "max", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "step", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "required", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "validationMessage", void 0);
 var styles = css`/***************************** 1 ****************************************/
 /***************************** 2 ****************************************/
@@ -546,13 +1371,51 @@ a.btn-outline-danger:active {
 .bg-dark .btn-link {
   --bs-btn-text-color: var(--bs-color-text-inverse);
 }
+.bg-dark a.btn-primary,
+.bg-dark .btn-primary {
+  --bs-btn-text-color: var(--bs-color-text-primary);
+  --bs-btn-background: var(--bs-color-background-inverse);
+}
+.bg-dark a.btn-primary:hover,
+.bg-dark .btn-primary:hover {
+  --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 85%, black);
+}
+.bg-dark a.btn-primary:active,
+.bg-dark .btn-primary:active {
+  --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 80%, black);
+}
+.bg-dark a.btn-secondary,
+.bg-dark .btn-secondary {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-secondary);
+}
+.bg-dark a.btn-secondary:hover, .bg-dark a.btn-secondary:active,
+.bg-dark .btn-secondary:hover,
+.bg-dark .btn-secondary:active {
+  --bs-btn-background: color-mix(in srgb, var(--bs-color-background-secondary) 85%, black);
+}
 .bg-dark .btn-outline-primary,
-.bg-dark a.btn-outline-primary,
+.bg-dark a.btn-outline-primary {
+  --bs-btn-outline-border-color: var(--bs-color-border-inverse);
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+}
+.bg-dark .btn-outline-primary:hover,
+.bg-dark a.btn-outline-primary:hover {
+  --bs-btn-boxshadow-color-darken: color-mix(in srgb, var(--bs-color-border-inverse) 80%, black);
+  --bs-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bs-btn-boxshadow-color-darken) 80%, gray);
+  --bs-btn-outline-border-color: var(--bs-btn-boxshadow-color-desaturated);
+}
 .bg-dark .btn-outline-secondary,
 .bg-dark a.btn-outline-secondary {
-  --bs-btn-outline-border-color: var(--bs-color-border-inverse);
   --bs-btn-text-color: var(--bs-color-text-inverse);
 }
+.bg-dark .btn-outline-secondary:hover, .bg-dark .btn-outline-secondary:active,
+.bg-dark a.btn-outline-secondary:hover,
+.bg-dark a.btn-outline-secondary:active {
+  --bs-btn-boxshadow-color-darken: color-mix(in srgb, var(--bs-color-background-secondary) 80%, black);
+  --bs-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bs-btn-boxshadow-color-darken) 80%, gray);
+  --bs-btn-outline-border-color: var(--bs-btn-boxshadow-color-desaturated);
+}
 .btn-close {
   position: relative;
@@ -591,7 +1454,6 @@ a.btn-outline-danger:active {
 let ItButton = class ItButton extends BaseComponent {
     constructor() {
         super(...arguments);
-        this._buttonClasses = '';
         this.type = 'button';
         this.variant = '';
         this.size = '';
@@ -610,24 +1472,31 @@ let ItButton = class ItButton extends BaseComponent {
     static get formAssociated() {
         return true;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    firstUpdated(_changedProperties) {
-        const button = this.renderRoot.querySelector('button');
-        if (button) {
-            this.addFocus(button);
-        }
-    }
-    updated() {
-        this._buttonClasses = this.composeClass('btn', !this.outline && this.variant !== '' ? `btn-${this.variant}` : '', this.outline ? `${this.variant ? 'btn-outline-' : ''}${this.variant}` : '', 'aria-disabled' in this._ariaAttributes ? 'disabled' : '', this.size ? `btn-${this.size}` : '', this.block ? 'd-block w-100' : '', this.icon ? 'btn-icon' : '');
-    }
     surfaceSubmitEvent(event) {
-        const disabled = 'aria-disabled' in this._ariaAttributes;
-        if (this.form && !disabled) {
+        if (this.form && !this.disabled) {
             event.preventDefault();
             event.stopPropagation();
-            this.form.requestSubmit();
+            let someInvalid = false;
+            // valido ogni campo
+            const itItems = Array.from(this.form.querySelectorAll('*')).filter((el) => el.tagName.toLowerCase().startsWith('it-'));
+            itItems.forEach((itItem) => {
+                // Accedi allo Shadow DOM del web component
+                if (itItem.checkValidity) {
+                    itItem.checkValidity();
+                }
+                const isValid = itItem?.isValid ? itItem.isValid() : true;
+                // Controlla se l'input interno esiste e se non è valido
+                if (!isValid) {
+                    someInvalid = true;
+                    // eslint-disable-next-line no-console
+                    console.error(`Invalid field: [name]=${itItem.name}, [id]=${itItem.id}`);
+                }
+            });
+            if (!someInvalid) {
+                this.form.requestSubmit();
+            }
         }
-        if (disabled) {
+        if (this.disabled) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -635,6 +1504,9 @@ let ItButton = class ItButton extends BaseComponent {
     get form() {
         return this.internals ? this.internals.form : null;
     }
+    focus() {
+        this._nativeButton?.focus();
+    }
     connectedCallback() {
         super.connectedCallback?.();
         if (this.block) {
@@ -648,15 +1520,29 @@ let ItButton = class ItButton extends BaseComponent {
     }
     // Render the UI as a function of component state
     render() {
-        const part = this.composeClass('button', 'focusable', this.variant?.length > 0 ? this.variant : '', this.outline ? 'outline' : '');
+        const classes = this.composeClass('btn', this.className, {
+            [`btn-${this.variant}`]: !!this.variant && !this.outline,
+            [`btn-outline-${this.variant}`]: !!this.variant && this.outline,
+            [`btn-${this.size}`]: !!this.size,
+            disabled: this.disabled,
+            'btn-icon': this.icon,
+            'd-block w-100': this.block,
+        });
+        const part = this.composeClass('button', 'focusable', {
+            [this.variant]: this.variant?.length > 0,
+            outline: this.outline,
+        });
         return html `
       <button
+        id=${ifDefined(this.id || undefined)}
         part="${part}"
         type="${this.type}"
-        class="${this._buttonClasses}"
+        class="${classes}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
         .value="${ifDefined(this.value ? this.value : undefined)}"
         ${setAttributes(this._ariaAttributes)}
+        aria-expanded="${ifDefined(this.expanded !== undefined ? this.expanded : undefined)}"
+        aria-disabled="${ifDefined(this.disabled ? this.disabled : undefined)}"
       >
         <slot></slot>
       </button>
@@ -668,10 +1554,6 @@ __decorate([
     query('button'),
     __metadata("design:type", HTMLButtonElement)
 ], ItButton.prototype, "_nativeButton", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], ItButton.prototype, "_buttonClasses", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)
@@ -704,6 +1586,14 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], ItButton.prototype, "internals", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'it-aria-disabled' }),
+    __metadata("design:type", Boolean)
+], ItButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'it-aria-expanded' }),
+    __metadata("design:type", Boolean)
+], ItButton.prototype, "expanded", void 0);
 ItButton = __decorate([
     customElement('it-button')
 ], ItButton);