@italia/accordion 0.1.0-alpha.2 → 1.0.0-alpha.4

package/dist/src/it-accordion-item.js

@@ -1,19 +1,1805 @@
-import { _ as __decorate, a as __metadata } from '../form-control-ddGGHusp.js';
-import { property, customElement } from 'lit/decorators.js';
-import { html, nothing } from 'lit';
+import { s as styles$1, _ as __decorate$1, a as __metadata$1 } from '../accordion-DrJ-1sEg.js';
+import { state, query, property, queryAssignedElements, customElement } from 'lit/decorators.js';
+import { css, html, LitElement, nothing } from 'lit';
 import { unsafeStatic, html as html$1 } from 'lit/static-html.js';
-import { ItCollapse } from './it-collapse.js';
-import { s as styles } from '../accordion-Du1RVx-L.js';
-import 'lit/directive.js';
-import 'lit/directives/when.js';
+import { directive, Directive } from 'lit/directive.js';
+import { when } from 'lit/directives/when.js';
 
-let ItAccordionItem = class ItAccordionItem extends ItCollapse {
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class SetAttributesDirective extends Directive {
+    update(part, [attributes]) {
+        const el = part.element;
+        for (const [name, value] of Object.entries(attributes)) {
+            if (value != null)
+                el.setAttribute(name, value);
+            else
+                el.removeAttribute(name);
+        }
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(_attributes) {
+        return null;
+    }
+}
+/* How to use:
+
+<textarea ${setAttributes(this._ariaAttributes)} ... />
+*/
+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) {
+        documentDirection = document.documentElement.dir || 'ltr';
+        documentLanguage = document.documentElement.lang || navigator.language;
+    }
+    [...connectedElements.keys()].forEach((el) => {
+        const litEl = el;
+        if (typeof litEl.requestUpdate === 'function') {
+            litEl.requestUpdate();
+        }
+    });
+}
+if (isClient) {
+    const documentElementObserver = new MutationObserver(update);
+    documentDirection = document.documentElement.dir || 'ltr';
+    documentLanguage = document.documentElement.lang || navigator.language;
+    // Watch for changes on <html lang>
+    documentElementObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['dir', 'lang'],
+    });
+}
+/** Registers one or more translations */
+function registerTranslation(...translation) {
+    translation.forEach((t) => {
+        const code = t.$code.toLowerCase();
+        if (translations.has(code)) {
+            // Merge translations that share the same language code
+            translations.set(code, { ...translations.get(code), ...t });
+        }
+        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 {
+    constructor(tag) {
+        this.tag = tag;
+    }
+    format(level, msg) {
+        return [`[${this.tag}] ${msg}`];
+    }
+    warn(msg) {
+        console.warn(...this.format('warn', msg));
+    }
+    error(msg) {
+        console.error(...this.format('error', msg));
+    }
+    info(msg) {
+        console.info(...this.format('info', msg));
+    }
+}
+
+/**
+ * Factory function per creare una base class estendibile
+ * con stili personalizzati.
+ */
+class BaseComponent extends LitElement {
+    constructor() {
+        super();
+        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)}`;
+    }
+    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+    addFocus(element) {
+        // 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
+    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();
+        // 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.submittedOnce = false;
+        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;
+                    case 'it-checkbox':
+                        if (this.host.checked) {
+                            if (event.formData.getAll(name).indexOf(value) < 0) {
+                                // handle group checkbox
+                                event.formData.append(name, value);
+                            }
+                        }
+                        break;
+                    case 'it-checkbox-group':
+                        // non settare valori in formData, perchè ogni singola checkbox setta il suo valore
+                        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);
+                });
+            }
+            const resReportValidity = reportValidity(this.host);
+            if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
+                event.preventDefault();
+                // event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
+                // Scroll al primo controllo non valido
+                const formControls = formCollections.get(this.form);
+                if (formControls) {
+                    for (const control of formControls) {
+                        if (!control.validity?.valid) {
+                            // Scroll smooth verso il controllo non valido
+                            control.scrollIntoView({
+                                behavior: 'smooth',
+                                block: 'center',
+                            });
+                            break;
+                        }
+                    }
+                }
+            }
+            this.submittedOnce = true;
+        };
+        this.handleFormReset = () => {
+            this.options.setValue(this.host, '');
+            this.submittedOnce = false;
+            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;
+        }
+        this.submittedOnce = false;
+        // 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);
+    }
+    userInteracted() {
+        const hasInteracted = Boolean(userInteractedControls.has(this.host));
+        return 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.',
+    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.',
+};
+
+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;
+        /* For grouped input, like checkbox-group */
+        this.isInGroup = false;
+        this.validationMessage = '';
+    }
+    /** Gets the validity state object */
+    get validity() {
+        return this.inputElement?.validity;
+    }
+    /** Gets the associated form, if one exists. */
+    getForm() {
+        return this.formControlController.getForm();
+    }
+    // Form validation methods
+    checkValidity() {
+        const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
+        return inputValid;
+    }
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity() {
+        // const ret = this.inputElement.checkValidity();
+        const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
+        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;
+            const isRequiredHandledByGroup = this.isInGroup === true;
+            if (_v.valueMissing && !isRequiredHandledByGroup) {
+                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 if (this.formControlController.userInteracted()) {
+            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([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "isInGroup", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "validationMessage", void 0);
+
+if (typeof window !== 'undefined') {
+    window._itAnalytics = window._itAnalytics || {};
+    window._itAnalytics = {
+        ...window._itAnalytics,
+        version: '1.0.0-alpha.4',
+    };
+}
+
+const isMouseEvent = (event) => event instanceof MouseEvent;
+const isKeyboardEvent = (event) => event instanceof KeyboardEvent;
+
+var styles = css`/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** NEUTRAL 1 ****************************************/
+/***************************** NEUTRAL 2 ****************************************/
+/***************************** NEUTRAL 2 / 3 ****************************************/
+.btn {
+  --bs-btn-padding-x: var(--bs-spacing-s);
+  --bs-btn-padding-y: var(--bs-spacing-xs);
+  --bs-btn-font-family: var(--bs-font-sans);
+  --bs-btn-font-weight: var(--bs-font-weight-solid);
+  --bs-btn-font-size: var(--bs-label-font-size);
+  --bs-btn-line-height: var(--bs-font-line-height-3);
+  --bs-btn-text-color: var(--bs-color-text-primary);
+  --bs-btn-background: transparent;
+  --bs-btn-border-size: 0;
+  --bs-btn-border-color: transparent;
+  --bs-btn-border-radius: var(--bs-radius-smooth);
+  --bs-btn-outline-border-size: 2px;
+  --bs-btn-outline-border-color: transparent;
+  --bs-btn-disabled-opacity: 0.5;
+}
+
+.btn {
+  display: inline-block;
+  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+  border-radius: var(--bs-btn-border-radius);
+  background: var(--bs-btn-background);
+  box-shadow: var(--bs-btn-box-shadow, none);
+  color: var(--bs-btn-text-color);
+  font-family: var(--bs-btn-font-family);
+  font-size: var(--bs-btn-font-size);
+  font-weight: var(--bs-btn-font-weight);
+  line-height: var(--bs-btn-line-height);
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: initial;
+  width: auto;
+  transition: all var(--bs-transition-instant) ease-in-out;
+  user-select: none;
+}
+.btn:hover {
+  color: var(--bs-btn-text-color);
+}
+.btn:disabled, .btn.disabled {
+  opacity: var(--bs-btn-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.btn:focus-visible {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+}
+.btn-check:focus-visible + .btn {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+}
+
+.btn-link {
+  --bs-btn-background: transparent;
+  --bs-btn-border-color: transparent;
+  text-decoration: underline;
+}
+.btn-link:hover {
+  color: var(--bs-color-link-hover);
+}
+
+.btn-xs {
+  --bs-btn-padding-x: var(--bs-spacing-xs);
+  --bs-btn-padding-y: var(--bs-spacing-xs);
+  --bs-btn-font-size: var(--bs-label-font-size-s);
+  --bs-btn-line-height: var(--bs-font-line-height-1);
+  --bs-rounded-icon-size: 20px;
+}
+
+.btn-lg {
+  --bs-btn-padding-x: var(--bs-spacing-m);
+  --bs-btn-padding-y: var(--bs-spacing-s);
+  --bs-btn-font-size: var(--bs-label-font-size-m);
+  --bs-btn-line-height: var(--bs-font-line-height-5);
+}
+
+.btn-progress {
+  position: relative;
+}
+
+.btn-icon {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-icon-spacing);
+}
+
+.btn-full {
+  align-self: stretch;
+  width: inherit;
+  border: none;
+  box-shadow: none;
+}
+@media (min-width: 992px) {
+  .btn-full {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+  }
+}
+
+.btn:disabled:hover,
+.btn.disabled:hover {
+  cursor: not-allowed;
+}
+
+.btn-primary,
+a.btn-primary {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-primary);
+}
+.btn-primary:hover,
+a.btn-primary:hover {
+  --bs-btn-background: var(--bs-color-background-primary-hover);
+}
+.btn-primary:active,
+a.btn-primary:active {
+  --bs-btn-background: var(--bs-color-background-primary-active);
+}
+.btn-primary.btn-progress,
+a.btn-primary.btn-progress {
+  border-color: hsl(210, 76%, 67%);
+  opacity: 1;
+  background-color: hsl(210, 76%, 67%);
+}
+
+.btn-secondary,
+a.btn-secondary {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-secondary);
+}
+.btn-secondary:hover,
+a.btn-secondary:hover {
+  --bs-btn-background: var(--bs-color-background-secondary-hover);
+}
+.btn-secondary:active,
+a.btn-secondary:active {
+  --bs-btn-background: var(--bs-color-background-secondary-active);
+}
+.btn-secondary:disabled.btn-progress, .btn-secondary.disabled.btn-progress,
+a.btn-secondary:disabled.btn-progress,
+a.btn-secondary.disabled.btn-progress {
+  border-color: hsl(210, 12%, 52%);
+  opacity: 1;
+  background-color: hsl(210, 12%, 52%);
+}
+
+.btn-success,
+a.btn-success {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-success);
+}
+.btn-success:hover,
+a.btn-success:hover {
+  --bs-btn-background: var(--bs-color-background-success-hover);
+}
+.btn-success:active,
+a.btn-success:active {
+  --bs-btn-background: var(--bs-color-background-success-active);
+}
+
+.btn-warning,
+a.btn-warning {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-warning);
+}
+.btn-warning:hover,
+a.btn-warning:hover {
+  --bs-btn-background: var(--bs-color-background-warning-hover);
+}
+.btn-warning:active,
+a.btn-warning:active {
+  --bs-btn-background: var(--bs-color-background-warning-active);
+}
+
+.btn-danger,
+a.btn-danger {
+  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bs-btn-background: var(--bs-color-background-danger);
+}
+.btn-danger:hover,
+a.btn-danger:hover {
+  --bs-btn-background: var(--bs-color-background-danger-hover);
+}
+.btn-danger:active,
+a.btn-danger:active {
+  --bs-btn-background: var(--bs-color-background-danger-active);
+}
+
+.btn[class*=btn-outline-] {
+  --bs-btn-box-shadow: inset 0 0 0 var(--bs-btn-outline-border-size) var(--bs-btn-outline-border-color);
+}
+
+.btn-outline-primary,
+a.btn-outline-primary {
+  --bs-btn-outline-border-color: var(--bs-color-border-primary);
+  --bs-btn-text-color: var(--bs-color-text-primary);
+}
+.btn-outline-primary:hover,
+a.btn-outline-primary:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-primary-hover);
+  --bs-btn-text-color: var(--bs-color-link-hover);
+}
+.btn-outline-primary:active,
+a.btn-outline-primary:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-primary-active);
+  --bs-btn-text-color: var(--bs-color-link-active);
+}
+.btn-outline-secondary,
+a.btn-outline-secondary {
+  --bs-btn-outline-border-color: var(--bs-color-border-secondary);
+  --bs-btn-text-color: var(--bs-color-text-secondary);
+}
+.btn-outline-secondary:hover,
+a.btn-outline-secondary:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-secondary-hover);
+  --bs-btn-text-color: var(--bs-color-text-secondary-hover);
+}
+.btn-outline-secondary:active,
+a.btn-outline-secondary:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-secondary-active);
+  --bs-btn-text-color: var(--bs-color-text-secondary-active);
+}
+.btn-outline-success,
+a.btn-outline-success {
+  --bs-btn-outline-border-color: var(--bs-color-border-success);
+  --bs-btn-text-color: var(--bs-color-text-success);
+}
+.btn-outline-success:hover,
+a.btn-outline-success:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-success-hover);
+  --bs-btn-text-color: var(--bs-color-text-success-hover);
+}
+.btn-outline-success:active,
+a.btn-outline-success:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-success-active);
+  --bs-btn-text-color: var(--bs-color-text-success-active);
+}
+.btn-outline-warning,
+a.btn-outline-warning {
+  --bs-btn-outline-border-color: var(--bs-color-border-warning);
+  --bs-btn-text-color: var(--bs-color-text-warning);
+}
+.btn-outline-warning:hover,
+a.btn-outline-warning:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-warning-hover);
+  --bs-btn-text-color: var(--bs-color-text-warning-hover);
+}
+.btn-outline-warning:active,
+a.btn-outline-warning:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-warning-active);
+  --bs-btn-text-color: var(--bs-color-text-warning-active);
+}
+.btn-outline-danger,
+a.btn-outline-danger {
+  --bs-btn-outline-border-color: var(--bs-color-border-danger);
+  --bs-btn-text-color: var(--bs-color-text-danger);
+}
+.btn-outline-danger:hover,
+a.btn-outline-danger:hover {
+  --bs-btn-outline-border-color: var(--bs-color-border-danger-hover);
+  --bs-btn-text-color: var(--bs-color-text-danger-hover);
+}
+.btn-outline-danger:active,
+a.btn-outline-danger:active {
+  --bs-btn-outline-border-color: var(--bs-color-border-danger-active);
+  --bs-btn-text-color: var(--bs-color-text-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 {
+  --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-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;
+  box-sizing: content-box;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  opacity: 0.5;
+  background-color: transparent;
+  color: var(--bs-color-text-base);
+}
+.btn-close .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.btn-close:hover {
+  opacity: 1;
+  text-decoration: none;
+}
+.btn-close:focus {
+  opacity: 1;
+}
+.btn-close:disabled, .btn-close.disabled {
+  opacity: var(--bs-btn-disabled-opacity);
+  pointer-events: none;
+  user-select: none;
+}
+
+.btn-close-white {
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+:host {
+  display: inline-flex;
+}
+
+.collapse-wrapper {
+  width: 100%;
+}
+
+.collapse-content {
+  overflow: hidden;
+  height: 0;
+}
+
+.collapse-item {
+  width: fit-content;
+}
+
+button,
+[role=button] {
+  cursor: pointer;
+}`;
+
+// Base class without @customElement decorator for inheritance
+class ItCollapseBase extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.variant = 'primary';
+        this.size = '';
+        this.outline = false;
+        this.expanded = false;
+        this.isAccordion = false;
+        this.as = 'button';
+        this.defaultOpen = false;
+        this.isAnimating = false;
+        this.animationDuration = 350; // ms
+        this._triggerId = this.generateId('it-collapse-trigger');
+        this._contentId = this.generateId('it-collapse-content');
+        this.handleTriggerAction = (e) => {
+            if (this.isAnimating) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            if (isKeyboardEvent(e) && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                this.toggle();
+            }
+            else if (isMouseEvent(e)) {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        this._onTriggerSlotChange = () => {
+            // Aggiorna gli attributi ARIA quando il contenuto dello slot cambia
+            this.updateAriaAttributes();
+            // Forza un aggiornamento per il rendering, i getter sono stale altrimenti
+            this.requestUpdate();
+        };
+    }
+    get triggerElement() {
+        return this.triggerElements.length > 0 ? this.triggerElements[0] : null;
+    }
+    connectedCallback() {
+        super.connectedCallback?.();
+        // Initialize from default-open
+        if (this.defaultOpen && !this.expanded) {
+            this.expanded = this.defaultOpen;
+        }
+    }
+    async toggle() {
+        // Blocca toggle durante animazione
+        if (this.isAnimating)
+            return;
+        const nextValue = !this.expanded;
+        this.expanded = nextValue;
+        this.dispatchEvent(new CustomEvent('it-collapse-toggle', {
+            detail: {
+                expanded: this.expanded,
+                id: this.contentElement?.id,
+            },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        }));
+    }
+    setInitialState() {
+        if (this.contentElement) {
+            if (this.expanded) {
+                this.contentElement.style.height = 'auto';
+                this.contentElement.style.visibility = 'visible';
+            }
+            else {
+                this.contentElement.style.height = '0px';
+                this.contentElement.style.visibility = 'hidden';
+            }
+        }
+    }
+    cleanupAnimation() {
+        if (this.animation) {
+            try {
+                this.animation.cancel();
+            }
+            catch {
+                /* ignore */
+            }
+            this.animation = undefined;
+        }
+        this.isAnimating = false;
+    }
+    firstUpdated() {
+        this.updateAriaAttributes();
+        // Set initial state and ensure overflow is hidden
+        this.setInitialState();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('defaultOpen')) {
+            if (this.defaultOpen && !this.expanded) {
+                this.expanded = this.defaultOpen;
+            }
+        }
+        if (changedProperties.has('expanded')) {
+            this.updateAriaAttributes();
+            this.updateBackgroundStyles();
+            const prev = changedProperties.get('expanded');
+            // React to expanded property changes
+            if (!this.isAnimating && prev !== undefined && prev !== this.expanded) {
+                if (this.expanded) {
+                    this.performExpand();
+                }
+                else {
+                    this.performCollapse();
+                }
+            }
+        }
+        // Se cambiano le proprietà di background, aggiorna gli stili
+        if (changedProperties.has('backgroundActive') ||
+            changedProperties.has('backgroundHover') ||
+            changedProperties.has('leftIcon')) {
+            this.updateBackgroundStyles();
+        }
+    }
+    updateAriaAttributes() {
+        if (this.triggerElement) {
+            if (this.triggerElement.tagName.toLowerCase() === 'button' ||
+                this.triggerElement.getAttribute('role') === 'button') {
+                const buttonElement = this.triggerElement;
+                buttonElement.id = this._triggerId;
+                buttonElement.setAttribute('aria-expanded', String(this.expanded));
+                buttonElement.setAttribute('aria-controls', this._contentId);
+                buttonElement.addEventListener('click', this.handleTriggerAction.bind(this));
+                buttonElement.addEventListener('keyup', this.handleTriggerAction.bind(this));
+                if (!this.expanded) {
+                    buttonElement.classList.add('collapsed');
+                }
+                else {
+                    buttonElement.classList.remove('collapsed');
+                }
+            }
+        }
+        // Aggiorna anche gli stili e le icone di chi implementa questo metodo via estensione
+        this.updateBackgroundStyles();
+    }
+    // eslint-disable-next-line class-methods-use-this
+    updateBackgroundStyles() { }
+    performExpand() {
+        if (!this.contentElement)
+            return;
+        this.cleanupAnimation();
+        this.isAnimating = true;
+        // Ensure overflow is hidden during animation
+        this.contentElement.style.overflow = 'hidden';
+        this.contentElement.style.visibility = 'visible';
+        const startHeight = this.contentElement.offsetHeight;
+        const endHeight = this.contentElement.scrollHeight;
+        const duration = this.prefersReducedMotion ? 0 : this.animationDuration;
+        this.animation = this.contentElement.animate([{ height: `${startHeight}px` }, { height: `${endHeight}px` }], {
+            duration,
+            easing: 'ease',
+        });
+        this.animation.finished
+            .then(() => {
+            this.contentElement.style.height = 'auto';
+            // Keep overflow hidden as per CSS
+            this.contentElement.style.overflow = 'hidden';
+        })
+            .catch(() => {
+            // Animation cancelled
+        })
+            .finally(() => {
+            this.cleanupAnimation();
+        });
+    }
+    performCollapse() {
+        if (!this.contentElement)
+            return;
+        this.cleanupAnimation();
+        this.isAnimating = true;
+        const el = this.contentElement;
+        // Ensure overflow is hidden during animation
+        el.style.overflow = 'hidden';
+        const startHeight = el.scrollHeight;
+        const endHeight = 0;
+        const duration = this.prefersReducedMotion ? 0 : this.animationDuration;
+        el.style.height = `${startHeight}px`;
+        this.animation = el.animate([{ height: `${startHeight}px` }, { height: `${endHeight}px` }], {
+            duration,
+            easing: 'ease',
+        });
+        this.animation.finished
+            .then(() => {
+            el.style.height = '0px';
+            el.style.visibility = 'hidden';
+            el.style.overflow = 'hidden';
+        })
+            .catch(() => {
+            // Animation cancelled
+        })
+            .finally(() => {
+            this.cleanupAnimation();
+        });
+    }
+    renderDefaultTrigger() {
+        const buttonClasses = this.composeClass('btn', this.className, {
+            collapsed: !this.expanded,
+            [`btn-${this.variant}`]: !!this.variant && !this.outline,
+            [`btn-outline-${this.variant}`]: !!this.variant && this.outline,
+            [`btn-${this.size}`]: !!this.size,
+        });
+        const part = this.composeClass('button', 'focusable', {
+            [this.variant]: this.variant?.length > 0,
+            outline: this.outline,
+        });
+        const defaultButtonElement = html `<button
+      type="button"
+      part="${part}"
+      variant="${this.variant}"
+      class="${buttonClasses}"
+      aria-expanded="${this.expanded}"
+      aria-controls="${this._contentId}"
+      id="${this._triggerId}"
+      @click=${this.handleTriggerAction}
+      @keyup=${this.handleTriggerAction}
+    >
+      <slot name="label"></slot>
+    </button>`;
+        if (!this.as || this.as === 'button') {
+            return defaultButtonElement;
+        }
+        const tagName = this.isValidTag(this.as) ? this.as : 'button';
+        const Tag = unsafeStatic(tagName);
+        return html `${html$1 `<${Tag} part="${part}" role="button" aria-expanded="${this.expanded}" aria-controls="${this._contentId}" id="${this._triggerId}"  @click=${this.handleTriggerAction}
+      @keyup=${this.handleTriggerAction} tabindex="0" class="${buttonClasses}"><slot name="label"></slot></${Tag}>`}`;
+    }
+    hasSlottedTrigger() {
+        return !!this.triggerElement;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    isValidTag(tag) {
+        const safeTags = ['div', 'span', 'li', 'p', 'a', 'button'];
+        return safeTags.includes(tag.toLowerCase());
+    }
+    render() {
+        // Nota sull'estensione: quando passi this.renderDefaultTrigger come callback a when
+        // la funzione viene chiamata senza contesto (this viene perso) — devi chiamare il metodo tramite closure
+        // che mantiene il contesto, es. () => this.renderDefaultTrigger().
+        const hasCustomTrigger = this.hasSlottedTrigger();
+        const classPrefix = this.isAccordion ? 'accordion-' : 'collapse-';
+        return html `
+      <div class="${classPrefix}item" part="${classPrefix}item">
+        <div class="collapse-wrapper">
+          ${when(!hasCustomTrigger, () => this.renderDefaultTrigger())}
+          <slot name="trigger" @slotchange=${this._onTriggerSlotChange} part="trigger"></slot>
+          <div
+            class="collapse-content"
+            part="content"
+            role="region"
+            aria-labelledby="${this._triggerId}"
+            id="${this._contentId}"
+          >
+            <div class="${classPrefix}body">
+              <slot name="content"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+ItCollapseBase.styles = styles;
+ItCollapseBase.shadowRootOptions = {
+    ...BaseComponent.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], ItCollapseBase.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], ItCollapseBase.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ItCollapseBase.prototype, "outline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ItCollapseBase.prototype, "expanded", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ItCollapseBase.prototype, "as", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'default-open', reflect: true }),
+    __metadata("design:type", Object)
+], ItCollapseBase.prototype, "defaultOpen", void 0);
+__decorate([
+    query('.collapse-content'),
+    __metadata("design:type", HTMLElement)
+], ItCollapseBase.prototype, "contentElement", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trigger' }),
+    __metadata("design:type", Array)
+], ItCollapseBase.prototype, "triggerElements", void 0);
+
+// TODO: quando si sviluppa collapse come componente standalone, decoupling dalle classi di accordion, e aggiornare il part name
+let ItCollapse = class ItCollapse extends ItCollapseBase {
+};
+ItCollapse = __decorate([
+    customElement('it-collapse')
+], ItCollapse);
+
+let ItAccordionItem = class ItAccordionItem extends ItCollapseBase {
     constructor() {
         super(...arguments);
         this.as = 'h2';
         this.leftIcon = false;
         this.backgroundActive = false;
         this.backgroundHover = false;
+        this.isAccordion = true;
     }
     setParentBackground(backgroundActive, backgroundHover) {
         this.backgroundActive = backgroundActive;
@@ -61,6 +1847,11 @@ let ItAccordionItem = class ItAccordionItem extends ItCollapse {
       `}
     `;
     }
+    // eslint-disable-next-line class-methods-use-this
+    isValidTag(tag) {
+        const safeTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+        return safeTags.includes(tag.toLowerCase());
+    }
     updateBackgroundStyles() {
         // Aggiorna l'icona sinistra se presente
         if (this.leftIcon) {
@@ -96,24 +1887,24 @@ let ItAccordionItem = class ItAccordionItem extends ItCollapse {
 };
 // Eredita tutte le proprietà da ItCollapse
 // Aggiunge solo alias semantici per le proprietà accordion
-ItAccordionItem.styles = styles;
-__decorate([
+ItAccordionItem.styles = styles$1;
+__decorate$1([
     property({ type: String }),
-    __metadata("design:type", String)
+    __metadata$1("design:type", String)
 ], ItAccordionItem.prototype, "as", void 0);
-__decorate([
+__decorate$1([
     property({ type: Boolean, attribute: 'left-icon', reflect: true }),
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], ItAccordionItem.prototype, "leftIcon", void 0);
-__decorate([
+__decorate$1([
     property({ type: Boolean, attribute: 'background-active', reflect: true }),
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], ItAccordionItem.prototype, "backgroundActive", void 0);
-__decorate([
+__decorate$1([
     property({ type: Boolean, attribute: 'background-hover', reflect: true }),
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], ItAccordionItem.prototype, "backgroundHover", void 0);
-ItAccordionItem = __decorate([
+ItAccordionItem = __decorate$1([
     customElement('it-accordion-item')
 ], ItAccordionItem);