@italia/input 0.1.0-alpha.0 → 1.0.0-alpha.10

package/dist/src/it-input.js

@@ -1,8 +1,9 @@
 import { directive, Directive } from 'lit/directive.js';
 import { LitElement, css, html, nothing } from 'lit';
-import { property, query, state, customElement } from 'lit/decorators.js';
+import { state, query, property, queryAssignedElements, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
+import { live } from 'lit/directives/live.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -37,209 +38,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.
- */
-/**
- * @param Base The base class.
- * @returns A mix-in to handle `formdata` event on the containing form.
- */
-const FormMixin = (Base) => {
-    /**
-     * A mix-in class to handle `formdata` event on the containing form.
-     */
-    class FormMixinImpl extends Base {
-        connectedCallback() {
-            // @ts-ignore
-            super.connectedCallback();
-            if (this.closest('form')) {
-                this.closest('form')?.addEventListener('formdata', this._handleFormdata.bind(this));
-            }
-        }
-        disconnectedCallback() {
-            // if (this._hFormdata) {
-            //   this._hFormdata = this._hFormdata.release();
-            // }
-            // @ts-ignore
-            super.disconnectedCallback();
-        }
-    }
-    return FormMixinImpl;
-};
-
-/**
- * @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 = {}));
-/**
- * @param Base The base class.
- * @returns A mix-in implementing `.setCustomValidity()` method.
- */
-const ValidityMixin = (Base) => {
-    class ValidityMixinImpl extends Base {
-        constructor() {
-            super(...arguments);
-            /**
-             * Field is touched
-             */
-            this._touched = false;
-        }
-        // Not using TypeScript `protected` due to: microsoft/TypeScript#17744
-        // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8
-        /**
-         * @param state The form validation status.
-         * @returns The form validation error mesasages associated with the given status.
-         * @protected
-         */
-        _getValidityMessage(state, translations) {
-            return {
-                [VALIDATION_STATUS.NO_ERROR]: '',
-                [VALIDATION_STATUS.INVALID]: translations[VALIDATION_STATUS.INVALID],
-                [VALIDATION_STATUS.ERROR_REQUIRED]: translations[VALIDATION_STATUS.ERROR_REQUIRED],
-                [VALIDATION_STATUS.PATTERN]: translations[VALIDATION_STATUS.PATTERN],
-                [VALIDATION_STATUS.MINLENGTH]: translations[VALIDATION_STATUS.MINLENGTH].replace('{minlength}', this.minlength.toString()),
-                [VALIDATION_STATUS.MAXLENGTH]: translations[VALIDATION_STATUS.MAXLENGTH].replace('{maxlength}', this.maxlength.toString()),
-            }[state];
-        }
-        /**
-         * Checks if the value meets the constraints.
-         *
-         * @returns `true` if the value meets the constraints. `false` otherwise.
-         */
-        _checkValidity(translations, htmlValidity = true) {
-            // htmlValidity = this.inputElement.checkValidity(); //check browser validity
-            if (this.customValidation) {
-                return undefined;
-            }
-            let validity = htmlValidity;
-            let message = validity
-                ? this._getValidityMessage(VALIDATION_STATUS.NO_ERROR, translations)
-                : this._getValidityMessage(VALIDATION_STATUS.INVALID, translations);
-            if (this.required || (this._value && (this.pattern || this.minlength > 0 || this.maxlength > 0))) {
-                if (this.pattern) {
-                    const regex = new RegExp(`^${this.pattern}$`, 'u');
-                    validity = regex.test(this._value.toString());
-                    if (!validity) {
-                        message = this._getValidityMessage(VALIDATION_STATUS.PATTERN, translations);
-                    }
-                }
-                if (typeof this.minlength !== 'undefined' && this.minlength > 0) {
-                    validity = validity && this._value.toString().length >= this.minlength;
-                    if (!validity) {
-                        message = this._getValidityMessage(VALIDATION_STATUS.MINLENGTH, translations);
-                    }
-                }
-                if (typeof this.maxlength !== 'undefined' && this.maxlength > 0) {
-                    validity = validity && this._value.toString().length <= this.maxlength;
-                    if (!validity) {
-                        message = this._getValidityMessage(VALIDATION_STATUS.MAXLENGTH, translations);
-                    }
-                }
-                if (this.required && !this._value) {
-                    validity = false;
-                    message = this._getValidityMessage(VALIDATION_STATUS.ERROR_REQUIRED, translations);
-                }
-            }
-            this.invalid = !validity;
-            this.validityMessage = message;
-            return validity;
-        }
-        /**
-         * Sets the given custom validity message.
-         *
-         * @param validityMessage The custom validity message
-         */
-        setCustomValidity(validityMessage) {
-            this.invalid = Boolean(validityMessage);
-            this.validityMessage = validityMessage;
-        }
-        _handleBlur() {
-            this._touched = true;
-            this.dispatchEvent(new FocusEvent('blur', { bubbles: true, composed: true }));
-        }
-        _handleFocus() {
-            this.dispatchEvent(new FocusEvent('focus', { bubbles: true, composed: true }));
-        }
-        _handleClick() {
-            this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
-        }
-        _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('change', {
-                detail: { value, el: target },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    return ValidityMixinImpl;
-};
-
 class SetAttributesDirective extends Directive {
     update(part, [attributes]) {
         const el = part.element;
@@ -262,6 +60,8 @@ 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();
@@ -316,7 +116,9 @@ function registerTranslation(...translation) {
     });
     update();
 }
-window.registerTranslation = registerTranslation;
+if (typeof window !== 'undefined') {
+    window.registerTranslation = registerTranslation;
+}
 /**
  * Localize Reactive Controller for components built with Lit
  *
@@ -471,10 +273,11 @@ 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
-        this.dir = '';
-        this.lang = '';
     }
+    // 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
      *
@@ -567,9 +370,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)}`;
@@ -579,25 +394,22 @@ 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);
@@ -605,6 +417,686 @@ class BaseComponent extends LitElement {
 }
 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':
+                    case 'it-toggle':
+                        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':
+                    case 'it-toggle-group':
+                        // non settare valori in formData, perchè ogni singola checkbox setta il suo valore
+                        break;
+                    case 'it-upload':
+                        // value is File[] — append each File object directly (not as string)
+                        if (Array.isArray(value)) {
+                            value.forEach((file) => {
+                                event.formData.append(name, file);
+                            });
+                        }
+                        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$1 = {
+    $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$1);
+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.10',
+    };
+}
+
 /**
  * Checks for repetition of characters in
  * a string
@@ -776,13 +1268,10 @@ const translation = {
     passwordSuggestionSpecial: 'Uno o più caratteri speciali.',
     passwordSuggestionFollowed: 'suggerimenti seguiti',
     passwordSuggestionFollowedPlural: 'suggerimenti seguiti',
-    passwordSuggestionOf: 'di',
-    passwordSuggestionMetLabel: 'Soddisfatto:',
-    validityRequired: 'Questo campo è obbligatorio.',
-    validityInvalid: 'Il valore non è corretto.',
-    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.',
+    passwordSuggestionOf: 'di',
+    passwordSuggestionMetLabel: 'Soddisfatto:',
+    increaseValue: 'Aumenta il valore',
+    decreaseValue: 'Diminuisci il valore',
 };
 
 var styles = css`@charset "UTF-8";
@@ -802,7 +1291,7 @@ var styles = css`@charset "UTF-8";
 .form-check [type=checkbox]:focus + label,
 .form-check [type=radio]:focus + label {
   border-color: hsl(0, 0%, 0%) !important;
-  box-shadow: 0 0 0 2px var(--bs-color-border-inverse), 0 0 0 5px var(--bs-color-outline-focus) !important;
+  box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
   outline: 3px solid transparent !important;
   outline-offset: 3px !important;
 }
@@ -842,7 +1331,7 @@ hr {
 
 p {
   margin-top: 0;
-  margin-bottom: var(--bs-paragraph-spacing);
+  margin-bottom: var(--bsi-paragraph-spacing);
 }
 
 abbr[title] {
@@ -852,21 +1341,21 @@ abbr[title] {
 }
 
 address {
-  margin-bottom: var(--bs-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
   font-style: normal;
   line-height: inherit;
 }
 
 ol,
 ul {
-  padding-left: var(--bs-spacing-l);
+  padding-left: var(--bsi-spacing-l);
 }
 
 ol,
 ul,
 dl {
   margin-top: 0;
-  margin-bottom: var(--bs-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 
 ol ol,
@@ -877,22 +1366,22 @@ ul ol {
 }
 
 dt {
-  font-weight: var(--bs-font-weight-strong);
+  font-weight: var(--bsi-font-weight-strong);
 }
 
 dd {
-  margin-bottom: var(--bs-spacing-xxs);
+  margin-bottom: var(--bsi-spacing-xxs);
   margin-left: 0;
 }
 
 blockquote {
-  margin: 0 0 var(--bs-spacing-s);
+  margin: 0 0 var(--bsi-spacing-s);
 }
 
 sub,
 sup {
   position: relative;
-  font-size: var(--bs-font-size-1);
+  font-size: var(--bsi-font-size-1);
   line-height: 0;
   vertical-align: baseline;
 }
@@ -906,19 +1395,14 @@ sup {
 }
 
 a {
-  color: var(--bs-color-link);
+  color: var(--bsi-color-link);
   text-decoration: underline;
   text-decoration-skip-ink: auto;
   text-underline-offset: 2px;
 }
-a:hover:not(.btn) {
-  color: var(--bs-color-link-hover);
-  text-decoration: underline;
-}
-
-a:not([href]):not([class]), a:not([href]):not([class]):hover {
-  color: inherit;
-  text-decoration: none;
+a:hover {
+  color: var(--bsi-color-link-hover);
+  cursor: pointer;
 }
 
 pre,
@@ -931,7 +1415,7 @@ samp {
 pre {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--bs-paragraph-spacing);
+  margin-bottom: var(--bsi-paragraph-spacing);
   overflow: auto;
 }
 pre code {
@@ -1051,23 +1535,6 @@ fieldset {
   border: 0;
 }
 
-legend {
-  float: left;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 0.5rem;
-  font-size: calc(1.275rem + 0.3vw);
-  line-height: inherit;
-}
-@media (min-width: 1200px) {
-  legend {
-    font-size: 1.5rem;
-  }
-}
-legend + * {
-  clear: left;
-}
-
 ::-webkit-datetime-edit-fields-wrapper,
 ::-webkit-datetime-edit-text,
 ::-webkit-datetime-edit-minute,
@@ -1143,78 +1610,82 @@ progress {
 }
 
 .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;
-}
-
+  --bsi-btn-background: transparent;
+  --bsi-btn-border-color: transparent;
+  --bsi-btn-border-radius: var(--bsi-radius-smooth);
+  --bsi-btn-border-size: 0;
+  --bsi-btn-disabled-opacity: 0.5;
+  --bsi-btn-font-family: var(--bsi-font-sans);
+  --bsi-btn-font-size: var(--bsi-label-font-size);
+  --bsi-btn-font-weight: var(--bsi-font-weight-solid);
+  --bsi-btn-line-height: var(--bsi-font-leading-3);
+  --bsi-btn-outline-border-color: transparent;
+  --bsi-btn-outline-border-size: 2px;
+  --bsi-btn-padding-x: var(--bsi-spacing-s);
+  --bsi-btn-padding-y: var(--bsi-spacing-xs);
+  --bsi-btn-text-color: var(--bsi-color-text-primary);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
 .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);
+  padding: var(--bsi-btn-padding-y) var(--bsi-btn-padding-x);
+  border: var(--bsi-btn-border-width) solid var(--bsi-btn-border-color);
+  border-radius: var(--bsi-btn-border-radius);
+  background: var(--bsi-btn-background);
+  box-shadow: var(--bsi-btn-box-shadow, none);
+  color: var(--bsi-btn-text-color);
+  font-family: var(--bsi-btn-font-family);
+  font-size: var(--bsi-btn-font-size);
+  font-weight: var(--bsi-btn-font-weight);
+  line-height: var(--bsi-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;
+  transition: all var(--bsi-transition-instant) ease-in-out;
   user-select: none;
 }
+.btn:hover {
+  color: var(--bsi-btn-text-color);
+}
 .btn:disabled, .btn.disabled {
-  opacity: var(--bs-btn-disabled-opacity);
+  opacity: var(--bsi-btn-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
 .btn:focus-visible {
-  border-color: var(--bs-btn-hover-border-color);
+  border-color: var(--bsi-btn-hover-border-color);
   outline: 0;
 }
 .btn-check:focus-visible + .btn {
-  border-color: var(--bs-btn-hover-border-color);
+  border-color: var(--bsi-btn-hover-border-color);
   outline: 0;
 }
 
 .btn-link {
-  --bs-btn-background: transparent;
-  --bs-btn-border-color: transparent;
+  --bsi-btn-background: transparent;
+  --bsi-btn-border-color: transparent;
   text-decoration: underline;
 }
 .btn-link:hover {
-  color: var(--bs-color-link-hover);
+  color: var(--bsi-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;
+  --bsi-btn-padding-x: var(--bsi-spacing-xs);
+  --bsi-btn-padding-y: var(--bsi-spacing-xs);
+  --bsi-btn-font-size: var(--bsi-label-font-size-s);
+  --bsi-btn-line-height: var(--bsi-font-leading-1);
+  --bsi-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);
+  --bsi-btn-padding-x: var(--bsi-spacing-m);
+  --bsi-btn-padding-y: var(--bsi-spacing-s);
+  --bsi-btn-font-size: var(--bsi-label-font-size-l);
+  --bsi-btn-line-height: var(--bsi-font-leading-5);
 }
 
 .btn-progress {
@@ -1226,7 +1697,7 @@ progress {
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: var(--bs-icon-spacing);
+  gap: var(--bsi-icon-spacing);
 }
 
 .btn-full {
@@ -1253,16 +1724,16 @@ progress {
 
 .btn-primary,
 a.btn-primary {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-primary);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-primary);
 }
 .btn-primary:hover,
 a.btn-primary:hover {
-  --bs-btn-background: var(--bs-color-background-primary-hover);
+  --bsi-btn-background: var(--bsi-color-background-primary-hover);
 }
 .btn-primary:active,
 a.btn-primary:active {
-  --bs-btn-background: var(--bs-color-background-primary-active);
+  --bsi-btn-background: var(--bsi-color-background-primary-active);
 }
 .btn-primary.btn-progress,
 a.btn-primary.btn-progress {
@@ -1273,16 +1744,16 @@ a.btn-primary.btn-progress {
 
 .btn-secondary,
 a.btn-secondary {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-secondary);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-secondary);
 }
 .btn-secondary:hover,
 a.btn-secondary:hover {
-  --bs-btn-background: var(--bs-color-background-secondary-hover);
+  --bsi-btn-background: var(--bsi-color-background-secondary-hover);
 }
 .btn-secondary:active,
 a.btn-secondary:active {
-  --bs-btn-background: var(--bs-color-background-secondary-active);
+  --bsi-btn-background: var(--bsi-color-background-secondary-active);
 }
 .btn-secondary:disabled.btn-progress, .btn-secondary.disabled.btn-progress,
 a.btn-secondary:disabled.btn-progress,
@@ -1294,135 +1765,174 @@ a.btn-secondary.disabled.btn-progress {
 
 .btn-success,
 a.btn-success {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-success);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-success);
 }
 .btn-success:hover,
 a.btn-success:hover {
-  --bs-btn-background: var(--bs-color-background-success-hover);
+  --bsi-btn-background: var(--bsi-color-background-success-hover);
 }
 .btn-success:active,
 a.btn-success:active {
-  --bs-btn-background: var(--bs-color-background-success-active);
+  --bsi-btn-background: var(--bsi-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);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-warning);
 }
 .btn-warning:hover,
 a.btn-warning:hover {
-  --bs-btn-background: var(--bs-color-background-warning-hover);
+  --bsi-btn-background: var(--bsi-color-background-warning-hover);
 }
 .btn-warning:active,
 a.btn-warning:active {
-  --bs-btn-background: var(--bs-color-background-warning-active);
+  --bsi-btn-background: var(--bsi-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);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-danger);
 }
 .btn-danger:hover,
 a.btn-danger:hover {
-  --bs-btn-background: var(--bs-color-background-danger-hover);
+  --bsi-btn-background: var(--bsi-color-background-danger-hover);
 }
 .btn-danger:active,
 a.btn-danger:active {
-  --bs-btn-background: var(--bs-color-background-danger-active);
+  --bsi-btn-background: var(--bsi-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);
+  --bsi-btn-box-shadow: inset 0 0 0 var(--bsi-btn-outline-border-size) var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-primary);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-primary-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-primary-active);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-secondary);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-hover);
+  --bsi-btn-text-color: var(--bsi-color-link-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-active);
+  --bsi-btn-text-color: var(--bsi-color-link-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-success);
+  --bsi-btn-text-color: var(--bsi-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);
+  /* aumenta contrasto scurendo il bordo rispetto al token base */
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-success-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-success-active);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-warning);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-warning-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-warning-active);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-danger);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-danger-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-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);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-danger-active);
+  --bsi-btn-text-color: var(--bsi-color-text-danger-active);
 }
 
 .bg-dark .btn-link {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+}
+.bg-dark a.btn-primary,
+.bg-dark .btn-primary {
+  --bsi-btn-text-color: var(--bsi-color-text-primary);
+  --bsi-btn-background: var(--bsi-color-background-inverse);
+}
+.bg-dark a.btn-primary:hover,
+.bg-dark .btn-primary:hover {
+  --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 85%, black);
+}
+.bg-dark a.btn-primary:active,
+.bg-dark .btn-primary:active {
+  --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 80%, black);
+}
+.bg-dark a.btn-secondary,
+.bg-dark .btn-secondary {
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-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 {
+  --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-secondary) 85%, black);
 }
 .bg-dark .btn-outline-primary,
-.bg-dark a.btn-outline-primary,
+.bg-dark a.btn-outline-primary {
+  --bsi-btn-outline-border-color: var(--bsi-color-border-inverse);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+}
+.bg-dark .btn-outline-primary:hover,
+.bg-dark a.btn-outline-primary:hover {
+  --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-border-inverse) 80%, black);
+  --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
+  --bsi-btn-outline-border-color: var(--bsi-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);
+  --bsi-btn-text-color: var(--bsi-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 {
+  --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-background-secondary) 80%, black);
+  --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
+  --bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
 }
 
 .btn-close {
@@ -1432,25 +1942,24 @@ a.btn-outline-danger:active {
   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%);
+  fill: var(--bsi-icon-secondary);
 }
-.btn-close:hover {
-  opacity: 1;
+.btn-close .icon:hover {
+  fill: var(--bsi-icon-default);
   text-decoration: none;
 }
 .btn-close:focus {
   opacity: 1;
 }
 .btn-close:disabled, .btn-close.disabled {
-  opacity: var(--bs-btn-disabled-opacity);
+  opacity: var(--bsi-btn-disabled-opacity);
   pointer-events: none;
   user-select: none;
 }
@@ -1460,21 +1969,21 @@ a.btn-outline-danger:active {
 }
 
 .row {
-  --bs-gutter-x: 24px;
-  --bs-gutter-y: 0;
+  --bsi-gutter-x: 24px;
+  --bsi-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(-1 * var(--bs-gutter-y));
-  margin-right: calc(-0.5 * var(--bs-gutter-x));
-  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  margin-top: calc(-1 * var(--bsi-gutter-y));
+  margin-right: calc(-0.5 * var(--bsi-gutter-x));
+  margin-left: calc(-0.5 * var(--bsi-gutter-x));
 }
 .row > * {
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
-  padding-right: calc(var(--bs-gutter-x) * 0.5);
-  padding-left: calc(var(--bs-gutter-x) * 0.5);
-  margin-top: var(--bs-gutter-y);
+  padding-right: calc(var(--bsi-gutter-x) * 0.5);
+  padding-left: calc(var(--bsi-gutter-x) * 0.5);
+  margin-top: var(--bsi-gutter-y);
 }
 
 .col {
@@ -1627,62 +2136,62 @@ a.btn-outline-danger:active {
 
 .g-0,
 .gx-0 {
-  --bs-gutter-x: 0;
+  --bsi-gutter-x: 0;
 }
 
 .g-0,
 .gy-0 {
-  --bs-gutter-y: 0;
+  --bsi-gutter-y: 0;
 }
 
 .g-1,
 .gx-1 {
-  --bs-gutter-x: 0.25rem;
+  --bsi-gutter-x: 0.25rem;
 }
 
 .g-1,
 .gy-1 {
-  --bs-gutter-y: 0.25rem;
+  --bsi-gutter-y: 0.25rem;
 }
 
 .g-2,
 .gx-2 {
-  --bs-gutter-x: 0.5rem;
+  --bsi-gutter-x: 0.5rem;
 }
 
 .g-2,
 .gy-2 {
-  --bs-gutter-y: 0.5rem;
+  --bsi-gutter-y: 0.5rem;
 }
 
 .g-3,
 .gx-3 {
-  --bs-gutter-x: 1rem;
+  --bsi-gutter-x: 1rem;
 }
 
 .g-3,
 .gy-3 {
-  --bs-gutter-y: 1rem;
+  --bsi-gutter-y: 1rem;
 }
 
 .g-4,
 .gx-4 {
-  --bs-gutter-x: 1.5rem;
+  --bsi-gutter-x: 1.5rem;
 }
 
 .g-4,
 .gy-4 {
-  --bs-gutter-y: 1.5rem;
+  --bsi-gutter-y: 1.5rem;
 }
 
 .g-5,
 .gx-5 {
-  --bs-gutter-x: 3rem;
+  --bsi-gutter-x: 3rem;
 }
 
 .g-5,
 .gy-5 {
-  --bs-gutter-y: 3rem;
+  --bsi-gutter-y: 3rem;
 }
 
 @media (min-width: 576px) {
@@ -1807,51 +2316,51 @@ a.btn-outline-danger:active {
   }
   .g-sm-0,
   .gx-sm-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-sm-0,
   .gy-sm-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-sm-1,
   .gx-sm-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-sm-1,
   .gy-sm-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-sm-2,
   .gx-sm-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-sm-2,
   .gy-sm-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-sm-3,
   .gx-sm-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-sm-3,
   .gy-sm-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-sm-4,
   .gx-sm-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-sm-4,
   .gy-sm-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-sm-5,
   .gx-sm-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-sm-5,
   .gy-sm-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 768px) {
@@ -1976,51 +2485,51 @@ a.btn-outline-danger:active {
   }
   .g-md-0,
   .gx-md-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-md-0,
   .gy-md-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-md-1,
   .gx-md-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-md-1,
   .gy-md-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-md-2,
   .gx-md-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-md-2,
   .gy-md-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-md-3,
   .gx-md-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-md-3,
   .gy-md-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-md-4,
   .gx-md-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-md-4,
   .gy-md-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-md-5,
   .gx-md-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-md-5,
   .gy-md-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 992px) {
@@ -2145,51 +2654,51 @@ a.btn-outline-danger:active {
   }
   .g-lg-0,
   .gx-lg-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-lg-0,
   .gy-lg-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-lg-1,
   .gx-lg-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-lg-1,
   .gy-lg-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-lg-2,
   .gx-lg-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-lg-2,
   .gy-lg-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-lg-3,
   .gx-lg-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-lg-3,
   .gy-lg-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-lg-4,
   .gx-lg-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-lg-4,
   .gy-lg-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-lg-5,
   .gx-lg-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-lg-5,
   .gy-lg-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 1200px) {
@@ -2314,51 +2823,51 @@ a.btn-outline-danger:active {
   }
   .g-xl-0,
   .gx-xl-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-xl-0,
   .gy-xl-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-xl-1,
   .gx-xl-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-xl-1,
   .gy-xl-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-xl-2,
   .gx-xl-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-xl-2,
   .gy-xl-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-xl-3,
   .gx-xl-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-xl-3,
   .gy-xl-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-xl-4,
   .gx-xl-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-xl-4,
   .gy-xl-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-xl-5,
   .gx-xl-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-xl-5,
   .gy-xl-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 1400px) {
@@ -2483,64 +2992,66 @@ a.btn-outline-danger:active {
   }
   .g-xxl-0,
   .gx-xxl-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-xxl-0,
   .gy-xxl-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-xxl-1,
   .gx-xxl-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-xxl-1,
   .gy-xxl-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-xxl-2,
   .gx-xxl-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-xxl-2,
   .gy-xxl-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-xxl-3,
   .gx-xxl-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-xxl-3,
   .gy-xxl-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-xxl-4,
   .gx-xxl-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-xxl-4,
   .gy-xxl-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-xxl-5,
   .gx-xxl-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-xxl-5,
   .gy-xxl-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 .row.variable-gutters {
   margin-right: -12px;
   margin-left: -12px;
-  margin-right: -6px;
-  margin-left: -6px;
 }
 .row.variable-gutters > .col,
 .row.variable-gutters > [class*=col-] {
   padding-right: 12px;
   padding-left: 12px;
 }
+.row.variable-gutters {
+  margin-right: -6px;
+  margin-left: -6px;
+}
 .row.variable-gutters > .col,
 .row.variable-gutters > [class*=col-] {
   padding-right: 6px;
@@ -2603,9 +3114,9 @@ a.btn-outline-danger:active {
 }
 
 .row.row-column-border > [class^=col-] {
-  padding-top: var(--bs-spacing-l);
-  padding-bottom: var(--bs-spacing-l);
-  border-top: var(--bs-border-base) solid var(--bs-color-border-subtle);
+  padding-top: var(--bsi-spacing-l);
+  padding-bottom: var(--bsi-spacing-l);
+  border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
 }
 .row.row-column-border > [class^=col-]:first-child {
   border: none;
@@ -2617,23 +3128,23 @@ a.btn-outline-danger:active {
   padding-right: 0;
 }
 .row.row-column-menu-left > [class^=col-]:first-child {
-  padding: var(--bs-spacing-s) 0;
+  padding: var(--bsi-spacing-s) 0;
 }
 .row.row-column-menu-right > [class^=col-]:last-child {
-  padding: var(--bs-spacing-s) 0;
+  padding: var(--bsi-spacing-s) 0;
 }
 .row.row-card {
-  background-color: var(--bs-color-background-inverse);
+  background-color: var(--bsi-color-background-inverse);
 }
 @media (min-width: 992px) {
   .row.row-column-border {
     margin-top: 1rem;
-    border-top: var(--bs-border-base) solid var(--bs-color-border-subtle);
+    border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
   }
   .row.row-column-border > [class^=col-] {
     padding: 3rem 3rem;
     border-top: none;
-    border-left: var(--bs-border-base) solid var(--bs-color-border-subtle);
+    border-left: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
   }
   .row.row-column-border > [class^=col-]:first-child {
     border: none;
@@ -2679,40 +3190,40 @@ a.btn-outline-danger:active {
   }
 }
 .row.row-border h1 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h2 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h3 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h4 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h5 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h6 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 @media (min-width: 576px) {
   .row.row-border {
-    border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-    padding-bottom: var(--bs-spacing-s);
-    margin-bottom: var(--bs-spacing-s);
+    border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+    padding-bottom: var(--bsi-spacing-s);
+    margin-bottom: var(--bsi-spacing-s);
   }
   .row.row-border h1 {
     border: none;
@@ -2759,9 +3270,9 @@ a.btn-outline-danger:active {
   width: auto;
 }
 .sticky-wrapper.is-sticky.navbar-wrapper .navbar {
-  padding-top: var(--bs-spacing-s);
-  padding-bottom: var(--bs-spacing-s);
-  border-top: var(--bs-border-base) solid var(--bs-color-border-subtle);
+  padding-top: var(--bsi-spacing-s);
+  padding-bottom: var(--bsi-spacing-s);
+  border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
 }
 .sticky-wrapper.is-sticky.navbar-wrapper.sticky-expanded {
   z-index: auto;
@@ -2801,14 +3312,20 @@ a.btn-outline-danger:active {
   bottom: auto;
 }
 
-@keyframes progress-bar-stripes {
-  0% {
-    background-position-x: 16px;
-  }
+.progress {
+  --bsi-progress-bg: var(--bsi-color-background-secondary-lighter);
+  --bsi-progress-border-radius: var(--bsi-radius-smooth);
+  --bsi-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bsi-progress-label-color: var(--bsi-color-text-secondary);
+  --bsi-progress-label-font-size: var(--bsi-label-font-size-xs);
+  --bsi-progress-bar-transition: width 0.5s ease;
+  --bsi-progress-bar-bg: var(--bsi-color-background-secondary);
+  --bsi-progress-height: 4px;
 }
+
 .progress-bar-striped {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-size: var(--bs-progress-height) var(--bs-progress-height);
+  background-size: var(--bsi-progress-height) var(--bsi-progress-height);
 }
 
 .progress-bar-animated {
@@ -2820,6 +3337,11 @@ a.btn-outline-danger:active {
   }
 }
 
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 16px;
+  }
+}
 @keyframes progressBarIndeterminate {
   0% {
     left: -5%;
@@ -2833,25 +3355,13 @@ a.btn-outline-danger:active {
   }
 }
 .progress {
-  --bs-progress-height: 16px;
-  --bs-progress-font-size: 0.75rem;
-  --bs-progress-bg: hsl(0, 0%, 90%);
-  --bs-progress-border-radius: 0;
-  --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  --bs-progress-bar-color: hsl(0, 0%, 100%);
-  --bs-progress-bar-bg: hsl(210, 100%, 40%);
-  --bs-progress-bar-transition: width 0.6s ease;
   display: flex;
   overflow: hidden;
-  font-size: var(--bs-progress-font-size);
-  background-color: var(--bs-progress-bg);
-  border-radius: var(--bs-progress-border-radius);
-  height: 4px;
+  background-color: var(--bsi-progress-bg);
+  border-radius: var(--bsi-progress-border-radius);
+  height: var(--bsi-progress-height);
   box-shadow: none;
 }
-.progress.progress-color {
-  background-color: hsl(210, 3%, 85%);
-}
 .progress.progress-indeterminate {
   position: relative;
 }
@@ -2868,22 +3378,23 @@ a.btn-outline-danger:active {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--bs-progress-bar-color);
   text-align: center;
   white-space: nowrap;
-  transition: var(--bs-progress-bar-transition);
-  background-color: hsl(210, 17%, 44%);
+  transition: var(--bsi-progress-bar-transition);
 }
 @media (prefers-reduced-motion: reduce) {
   .progress-bar {
     transition: none;
   }
 }
+.progress-bar {
+  background-color: var(--bsi-progress-bar-bg);
+}
 
 .progress-bar-label {
   text-align: right;
-  font-size: 0.75rem;
-  color: hsl(0, 0%, 10%);
+  font-size: var(--bsi-progress-label-font-size);
+  color: var(--bsi-progress-label-color);
   font-weight: 500;
 }
 
@@ -2893,55 +3404,50 @@ a.btn-outline-danger:active {
   bottom: 0;
   width: 100%;
   left: 0;
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 var(--bsi-progress-border-radius) var(--bsi-progress-border-radius);
 }
 .btn-progress .progress-bar {
-  height: 4px;
+  height: var(--bsi-progress-height);
 }
 
-@media (min-width: 576px) {
-  .progress-bar-label {
-    font-size: 0.75rem;
-  }
-}
 body {
-  font-family: var(--bs-font-sans);
+  font-family: var(--bsi-font-sans);
 }
 
 p,
 ul,
 ol,
 dl {
-  font-size: var(--bs-body-font-size);
-  line-height: var(--bs-body-line-height);
+  font-size: var(--bsi-body-font-size);
+  line-height: var(--bsi-body-leading);
 }
 
 caption,
 figcaption {
-  font-size: var(--bs-caption-font-size);
-  line-height: var(--bs-caption-line-height);
+  font-size: var(--bsi-caption-font-size);
+  line-height: var(--bsi-caption-leading);
 }
 
 b,
 strong {
-  font-weight: var(--bs-font-weight-strong);
+  font-weight: var(--bsi-font-weight-strong);
 }
 
 mark,
 code {
-  padding: 0 var(--bs-spacing-3xs);
+  padding: 0 var(--bsi-spacing-3xs);
 }
 
 mark {
-  background-color: var(--bs-highlight-background);
+  background-color: var(--bsi-highlight-background);
 }
 
 pre,
 code,
 kbd,
 samp {
-  border-radius: var(--bs-radius-smooth);
-  font-family: var(--bs-font-mono);
+  border-radius: var(--bsi-radius-smooth);
+  font-family: var(--bsi-font-mono);
 }
 
 ins,
@@ -2949,18 +3455,18 @@ del {
   position: relative;
   display: flex;
   align-items: center;
-  padding: var(--bs-spacing-3xs) var(--bs-spacing-m);
-  font: var(--bs-body-font-size);
+  padding: var(--bsi-spacing-3xs) var(--bsi-spacing-m);
+  font: var(--bsi-body-font-size);
   text-decoration: none;
 }
 
 ins {
-  background-color: var(--bs-ins-background);
+  background-color: var(--bsi-ins-background);
   text-decoration: none;
 }
 
 del {
-  background-color: var(--bs-del-background);
+  background-color: var(--bsi-del-background);
 }
 
 del::before,
@@ -2979,57 +3485,57 @@ ins::before {
 
 kbd {
   margin: 0 2px;
-  padding: 2px var(--bs-spacing-3xs);
-  border: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  background-color: var(--bs-color-background-secondary-lighter);
-  box-shadow: var(--bs-elevation-low), 0 2px 0 0 hsla(255, 0%, 100%, 0.7) inset;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-font-size-1);
-  font-weight: var(--bs-font-weight-solid);
+  padding: 2px var(--bsi-spacing-3xs);
+  border: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  background-color: var(--bsi-color-background-secondary-lighter);
+  box-shadow: var(--bsi-elevation-low), 0 2px 0 0 hsla(255, 0%, 100%, 0.7) inset;
+  color: var(--bsi-color-text-secondary);
+  font-size: var(--bsi-font-size-1);
+  font-weight: var(--bsi-font-weight-solid);
   white-space: nowrap;
 }
 kbd kbd {
   padding: 0;
-  font-size: var(--bs-code-font-size);
+  font-size: var(--bsi-code-font-size);
 }
 
 small,
 .small {
-  font-size: var(--bs-caption-font-size);
+  font-size: var(--bsi-caption-font-size);
 }
 
 .x-small {
-  font-size: var(--bs-font-size-1);
+  font-size: var(--bsi-font-size-1);
 }
 
 h1,
 .h1 {
-  font-size: var(--bs-heading-1-font-size);
+  font-size: var(--bsi-heading-1-font-size);
 }
 
 h2,
 .h2 {
-  font-size: var(--bs-heading-2-font-size);
+  font-size: var(--bsi-heading-2-font-size);
 }
 
 h3,
 .h3 {
-  font-size: var(--bs-heading-3-font-size);
+  font-size: var(--bsi-heading-3-font-size);
 }
 
 h4,
 .h4 {
-  font-size: var(--bs-heading-4-font-size);
+  font-size: var(--bsi-heading-4-font-size);
 }
 
 h5,
 .h5 {
-  font-size: var(--bs-heading-5-font-size);
+  font-size: var(--bsi-heading-5-font-size);
 }
 
 h6,
 .h6 {
-  font-size: var(--bs-heading-6-font-size);
+  font-size: var(--bsi-heading-6-font-size);
 }
 
 h1,
@@ -3045,8 +3551,8 @@ h5,
 h6,
 .h6 {
   margin-top: 0;
-  margin-bottom: var(--bs-heading-spacing);
-  line-height: var(--bs-heading-line-height);
+  margin-bottom: var(--bsi-heading-spacing);
+  line-height: var(--bsi-heading-leading);
 }
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + h1, p + h1,
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + .h1,
@@ -3071,7 +3577,7 @@ p + .h5,
 p + h6,
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + .h6,
 p + .h6 {
-  padding-top: var(--bs-spacing-s);
+  padding-top: var(--bsi-spacing-s);
 }
 
 h1,
@@ -3080,7 +3586,7 @@ h3,
 .h1,
 .h2,
 .h3 {
-  font-weight: var(--bs-heading-font-weight);
+  font-weight: var(--bsi-heading-font-weight);
 }
 
 h4,
@@ -3089,7 +3595,7 @@ h6,
 .h4,
 .h5,
 .h6 {
-  font-weight: var(--bs-heading-font-weight-weak);
+  font-weight: var(--bsi-heading-font-weight-weak);
 }
 
 h1,
@@ -3099,37 +3605,37 @@ h1,
 }
 
 .font-serif {
-  font-family: var(--bs-font-serif) !important;
+  font-family: var(--bsi-font-serif) !important;
 }
 
 .font-sans-serif {
-  font-family: var(--bs-font-sans) !important;
+  font-family: var(--bsi-font-sans) !important;
 }
 
 .font-monospace {
-  font-family: var(--bs-font-mono) !important;
+  font-family: var(--bsi-font-mono) !important;
 }
 
 .display-1 {
-  font-size: var(--bs-display-font-size);
-  font-weight: var(--bs-heading-font-weight);
-  line-height: var(--bs-heading-line-height);
+  font-size: var(--bsi-display-font-size);
+  font-weight: var(--bsi-heading-font-weight);
+  line-height: var(--bsi-heading-leading);
 }
 
 .lead {
-  font-size: var(--bs-lead-font-size);
-  font-weight: var(--bs-lead-font-weight);
-  line-height: var(--bs-lead-line-height);
+  font-size: var(--bsi-lead-font-size);
+  font-weight: var(--bsi-lead-font-weight);
+  line-height: var(--bsi-lead-leading);
 }
 
 blockquote,
 .blockquote {
-  margin: var(--bs-spacing-m) 0;
-  margin-left: var(--bs-spacin-inline-xs);
-  padding: var(--bs-spacing-s);
-  border-left: var(--bs-border-thick) solid var(--bs-border-color-secondary);
-  font-size: var(--bs-body-font-size);
-  line-height: var(--bs-body-line-height);
+  margin: var(--bsi-spacing-m) 0;
+  margin-left: var(--bsi-spacin-inline-xs);
+  padding: var(--bsi-spacing-s);
+  border-left: var(--bsi-border-thick) solid var(--bsi-border-color-secondary);
+  font-size: var(--bsi-body-font-size);
+  line-height: var(--bsi-body-leading);
 }
 blockquote > :last-child,
 .blockquote > :last-child {
@@ -3137,8 +3643,8 @@ blockquote > :last-child,
 }
 blockquote.text-end,
 .blockquote.text-end {
-  margin-right: var(--bs-spacin-inline-xs);
-  border-right: var(--bs-border-thick) solid var(--bs-border-color-secondary);
+  margin-right: var(--bsi-spacin-inline-xs);
+  border-right: var(--bsi-border-thick) solid var(--bsi-border-color-secondary);
 }
 blockquote.text-center, blockquote.text-end, blockquote.blockquote-simple,
 .blockquote.text-center,
@@ -3160,9 +3666,9 @@ blockquote.blockquote-simple,
 blockquote.blockquote-card,
 .blockquote.blockquote-card {
   margin-left: 0;
-  padding: var(--bs-spacing-m);
-  background-color: var(--bs-color-background-inverse);
-  box-shadow: var(--bs-elevation-low);
+  padding: var(--bsi-spacing-m);
+  background-color: var(--bsi-color-background-inverse);
+  box-shadow: var(--bsi-elevation-low);
 }
 blockquote.blockquote-card .blockquote-footer,
 .blockquote.blockquote-card .blockquote-footer {
@@ -3175,53 +3681,53 @@ blockquote.blockquote-card .blockquote-footer:before,
 blockquote.blockquote-card.dark,
 .blockquote.blockquote-card.dark {
   border-left: none;
-  background-color: var(--bs-color-background-primary);
-  color: var(--bs-color-text-inverse);
+  background-color: var(--bsi-color-background-primary);
+  color: var(--bsi-color-text-inverse);
 }
 blockquote.blockquote-card.dark .blockquote-footer,
 .blockquote.blockquote-card.dark .blockquote-footer {
-  color: var(--bs-color-text-inverse);
+  color: var(--bsi-color-text-inverse);
 }
 
 .blockquote-footer {
   margin-top: 0;
-  margin-bottom: var(--bs-spacing-s);
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-label-font-size);
+  margin-bottom: var(--bsi-spacing-s);
+  color: var(--bsi-color-text-secondary);
+  font-size: var(--bsi-label-font-size);
 }
 .blockquote-footer::before {
   content: "— ";
 }
 .bg-dark .blockquote-footer {
-  color: var(--bs-color-text-muted);
+  color: var(--bsi-color-text-muted);
 }
 
 .initialism {
-  font-size: var(--bs-label-font-size-s);
+  font-size: var(--bsi-label-font-size-s);
   text-transform: uppercase;
 }
 
 :root {
-  --bs-form-control-height: 2.5rem;
-  --bs-form-control-spacing: var(--bs-spacing-xxs);
-  --bs-form-control-background-color: var(--bs-color-background-inverse);
-  --bs-form-control-border-color: var(--bs-color-border-secondary);
-  --bs-form-control-border-radius: var(--bs-radius-smooth);
-  --bs-form-control-placeholder-color: var(--bs-color-text-muted);
-  --bs-form-control-label-color: var(--bs-color-text-secondary);
-  --bs-form-control-text-color: var(--bs-color-text-base);
-  --bs-form-control-font-size: var(--bs-body-font-size);
-  --bs-form-group-spacing-y: var(--bs-spacing-m);
-  --bs-form-checkbox-border-color: var(--bs-color-border-secondary);
-  --bs-form-checkbox-border-radius: var(--bs-radius-smooth);
-  --bs-form-checked-color: var(--bs-color-background-primary);
+  --bsi-form-control-height: 2.5rem;
+  --bsi-form-control-spacing: var(--bsi-spacing-xxs);
+  --bsi-form-control-background-color: var(--bsi-color-background-inverse);
+  --bsi-form-control-border-color: var(--bsi-color-border-secondary);
+  --bsi-form-control-border-radius: var(--bsi-radius-smooth);
+  --bsi-form-control-placeholder-color: var(--bsi-color-text-muted);
+  --bsi-form-control-label-color: var(--bsi-color-text-base);
+  --bsi-form-control-text-color: var(--bsi-color-text-secondary);
+  --bsi-form-control-font-size: var(--bsi-body-font-size);
+  --bsi-form-group-spacing-y: var(--bsi-spacing-m);
+  --bsi-form-checkbox-border-color: var(--bsi-color-border-secondary);
+  --bsi-form-checkbox-border-radius: var(--bsi-radius-smooth);
+  --bsi-form-checked-color: var(--bsi-color-background-primary);
 }
 
 input[readonly],
 textarea[readonly],
 select[readonly] {
-  --bs-form-control-border-color: var(--bs-color-border-subtle);
-  --bs-form-control-background-color: var(--bs-color-background-muted);
+  --bsi-form-control-border-color: var(--bsi-color-border-subtle);
+  --bsi-form-control-background-color: var(--bsi-color-background-muted);
   cursor: not-allowed;
 }
 
@@ -3230,29 +3736,30 @@ textarea,
 select {
   display: block;
   width: 100%;
-  padding: var(--bs-form-control-spacing);
-  border: 1px solid var(--bs-form-control-border-color);
-  border-radius: var(--bs-form-control-border-radius);
-  background-color: var(--bs-form-control-background-color);
-  color: var(--bs-form-control-text-color);
-  font-size: var(--bs-form-control-font-size);
+  padding: var(--bsi-form-control-spacing);
+  border: 1px solid var(--bsi-form-control-border-color);
+  border-radius: var(--bsi-form-control-border-radius);
+  background-color: var(--bsi-form-control-background-color);
+  color: var(--bsi-form-control-text-color);
+  font-size: var(--bsi-form-control-font-size);
 }
 input.disabled, input:disabled,
 textarea.disabled,
 textarea:disabled,
 select.disabled,
 select:disabled {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
   opacity: 1;
-  background-color: var(--bs-color-background-disabled);
-  color: var(--bs-color-text-disabled);
+  background-color: var(--bsi-color-background-disabled);
+  color: var(--bsi-color-text-disabled);
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 input:focus,
 textarea:focus {
   outline: 3px solid transparent;
   outline-offset: 3px;
-  box-shadow: 0 0 0 2px var(--bs-color-border-inverse), 0 0 0 5px var(--bs-color-outline-focus) !important;
+  box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
 }
 
 input::file-selector-button {
@@ -3290,7 +3797,7 @@ input::-webkit-date-and-time-value {
 select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='hsl%280, 0%, 15%%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right var(--bs-form-control-spacing) center;
+  background-position: right var(--bsi-form-control-spacing) center;
   background-size: 16px 12px;
   appearance: none;
 }
@@ -3316,6 +3823,9 @@ select:-moz-focusring {
 select option {
   font-weight: normal;
 }
+select {
+  /* stylelint-disable-next-line no-duplicate-selectors */ /* TO DO check these styles */
+}
 select:disabled {
   opacity: 1;
   background-color: hsl(210, 3%, 85%);
@@ -3323,7 +3833,7 @@ select:disabled {
 
 textarea {
   height: auto;
-  font-size: var(--bs-body-font-size);
+  font-size: var(--bsi-body-font-size);
   line-height: 1.5;
 }
 
@@ -3331,13 +3841,14 @@ label {
   display: inline-block;
   width: auto;
   max-width: 100%;
-  margin-bottom: var(--bs-spacing-xxs);
-  color: var(--bs-form-control-label-color);
-  font-size: var(--bs-label-font-size-s);
-  font-weight: var(--bs-font-weight-solid);
-  line-height: var(--bs-label-line-height);
+  margin-bottom: var(--bsi-spacing-xxs);
+  color: var(--bsi-form-control-label-color);
+  font-size: var(--bsi-label-font-size-s);
+  font-weight: var(--bsi-font-weight-solid);
+  line-height: var(--bsi-label-leading);
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 input,
 textarea {
   outline: 0;
@@ -3353,34 +3864,26 @@ input[type=time] {
 }
 
 fieldset legend {
-  z-index: 1;
-  display: block;
-  width: auto;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding: 0 var(--bs-form-input-spacing-x);
-  float: none;
+  margin-bottom: var(--bsi-spacing-s);
+  padding: 0 var(--bsi-form-input-spacing-x);
   background-color: transparent;
-  color: var(--bs-form-input-color);
-  font-size: 0.875rem;
-  font-weight: 700;
-  line-height: calc(2.5rem - 1px);
-  transition: 0.2s ease-out;
-  cursor: text;
+  color: var(--bsi-form-control-text-color);
+  font-size: var(--bsi-label-font-size-s);
+  font-weight: var(--bsi-font-weight-solid);
 }
 
 ::placeholder {
-  color: var(--bs-form-control-placeholder-color);
+  color: var(--bsi-form-control-placeholder-color);
 }
 
 input::-webkit-datetime-edit {
-  background-color: var(--bs-color-background-primary-lighter);
-  color: var(--bs-form-contro-text-color);
+  background-color: var(--bsi-color-background-primary-lighter);
+  color: var(--bsi-form-contro-text-color);
 }
 
 .form-group {
   position: relative;
-  margin-bottom: var(--bs-form-group-spacing-y);
+  margin-bottom: var(--bsi-form-group-spacing-y);
 }
 .form-group label.input-symbol-label:not(.active) {
   left: 2.25rem;
@@ -3394,8 +3897,8 @@ input::-webkit-datetime-edit {
 }
 
 .form-text {
-  margin: var(--bs-spacing-xxs) 0;
-  color: var(--bs-color-text-secondary);
+  margin: var(--bsi-spacing-xxs) 0;
+  color: var(--bsi-color-text-secondary);
 }
 
 .form-group.active .form-file-name {
@@ -3406,7 +3909,7 @@ input::-webkit-datetime-edit {
   display: none;
   width: 100%;
   margin-top: 0.25rem;
-  color: var(--bs-color-text-warning);
+  color: var(--bsi-color-text-warning);
   font-size: 0.75rem;
 }
 
@@ -3417,7 +3920,7 @@ input::-webkit-datetime-edit {
 }
 
 .input-group .input-group-text .btn {
-  border-radius: var(--bs-form-control-border-radius) 0 0 var(--bs-form-control-border-radius);
+  border-radius: var(--bsi-form-control-border-radius) 0 0 var(--bsi-form-control-border-radius);
 }
 .input-group .input-group-append {
   margin-left: 0;
@@ -3427,21 +3930,21 @@ input::-webkit-datetime-edit {
   padding-top: 0;
   padding-bottom: 0;
   border-bottom: 1px solid hsl(210, 17%, 44%);
-  border-radius: 0 var(--bs-form-control-border-radius) var(--bs-form-control-border-radius) 0;
+  border-radius: 0 var(--bsi-form-control-border-radius) var(--bsi-form-control-border-radius) 0;
 }
 
 .form-check {
   position: relative;
-  margin-bottom: var(--bs-spacing-s);
-  padding-left: 0;
 }
 .form-check + .form-check {
-  margin-top: var(--bs-spacing-s);
+  margin-top: var(--bsi-spacing-s);
 }
 .form-check [type=checkbox],
 .form-check [type=radio] {
   position: absolute;
-  height: 100%;
+  top: 9px;
+  left: 9px;
+  width: auto;
   margin-top: 0;
   margin-left: 0;
   opacity: 0;
@@ -3449,19 +3952,17 @@ input::-webkit-datetime-edit {
 .form-check [type=checkbox] + label,
 .form-check [type=radio] + label {
   position: relative;
-  display: flex;
-  align-items: center;
-  padding-left: 26px;
-  font-size: var(--bs-label-font-size);
-  font-weight: var(--bs-font-weight-solid);
-  line-height: 1;
+  margin-bottom: 0;
+  padding-left: 28px;
+  font-size: var(--bsi-label-font-size);
+  font-weight: var(--bsi-font-weight-solid);
   cursor: pointer;
   user-select: none;
 }
 @media (min-width: 576px) {
   .form-check [type=checkbox] + label,
   .form-check [type=radio] + label {
-    font-size: var(--bs-label-font-size-m);
+    font-size: var(--bsi-label-font-size-l);
   }
 }
 .form-check input[type=checkbox] + label::after,
@@ -3472,13 +3973,13 @@ input::-webkit-datetime-edit {
   content: "";
   border-width: 2px;
   border-style: solid;
-  transition: all var(--bs-transition-instant) ease-out;
+  transition: all var(--bsi-transition-instant) ease-out;
 }
 .form-check input[type=checkbox] + label::after {
   top: 0;
   width: 20px;
   height: 20px;
-  border-radius: var(--bs-form-control-border-radius);
+  border-radius: var(--bsi-form-control-border-radius);
 }
 .form-check input[type=checkbox]:checked + label::before {
   top: 3px;
@@ -3487,7 +3988,7 @@ input::-webkit-datetime-edit {
   height: 12px;
   border-width: 2px;
   border-style: solid;
-  border-color: transparent var(--bs-color-border-inverse) var(--bs-color-border-inverse) transparent;
+  border-color: transparent var(--bsi-color-border-inverse) var(--bsi-color-border-inverse) transparent;
   opacity: 1;
   transform: rotate(40deg);
   transform-origin: 100% 100%;
@@ -3495,12 +3996,12 @@ input::-webkit-datetime-edit {
 }
 .form-check input[type=checkbox]:checked + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checked-color);
-  background-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
+  background-color: var(--bsi-form-checked-color);
 }
 .form-check input[type=checkbox]:not(:checked) + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checkbox-border-color);
+  border-color: var(--bsi-form-checkbox-border-color);
   background-color: transparent;
 }
 .form-check input[type=checkbox]:not(:checked) + label::before {
@@ -3515,12 +4016,12 @@ input::-webkit-datetime-edit {
   cursor: not-allowed;
 }
 .form-check input[type=checkbox]:disabled:not(:checked) + label::after {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
   background-color: transparent;
 }
 .form-check input[type=checkbox]:disabled:checked + label::after {
-  border-color: var(--bs-color-border-disabled);
-  background-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
+  background-color: var(--bsi-color-border-disabled);
 }
 .form-check input[type=radio] + label::after, .form-check input[type=radio] + label::before {
   position: absolute;
@@ -3532,11 +4033,11 @@ input::-webkit-datetime-edit {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-radius: var(--bs-radius-rounded);
-  transition: all var(--bs-transition-instant) ease-out;
+  border-radius: var(--bsi-radius-rounded);
+  transition: all var(--bsi-transition-instant) ease-out;
 }
 .form-check input[type=radio]:not(:checked) + label::after, .form-check input[type=radio]:not(:checked) + label::before {
-  border-color: var(var(--bs-form-checkbox-border-color));
+  border-color: var(--bsi-form-checkbox-border-color);
 }
 .form-check input[type=radio]:not(:checked) + label:after {
   z-index: -1;
@@ -3544,25 +4045,30 @@ input::-webkit-datetime-edit {
 }
 .form-check input[type=radio]:checked + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checked-color);
-  background-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
+  background-color: var(--bsi-form-checked-color);
   transform: scale(0.64);
 }
 .form-check input[type=radio]:checked + label::before {
-  border-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
 }
 .form-check input[type=radio]:disabled + label {
   cursor: not-allowed;
 }
 .form-check input[type=radio]:disabled:not(:checked) + label::after, .form-check input[type=radio]:disabled:not(:checked) + label::before {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
 }
 .form-check input[type=radio]:disabled:checked + label::after {
-  border-color: var(--bs-color-border-disabled);
-  background-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
+  background-color: var(--bsi-color-border-disabled);
 }
 .form-check input[type=radio]:disabled:checked + label::before {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
+}
+.form-check .form-text {
+  display: block;
+  margin-bottom: 0.5rem;
+  padding-right: 3.25rem;
 }
 .form-check.form-check-group {
   margin-bottom: 1rem;
@@ -3571,6 +4077,7 @@ input::-webkit-datetime-edit {
 }
 .form-check.form-check-group input[type=checkbox] + label,
 .form-check.form-check-group input[type=radio] + label {
+  position: static;
   padding-right: 3.25rem;
   padding-left: 0;
 }
@@ -3586,17 +4093,12 @@ input::-webkit-datetime-edit {
 .form-check.form-check-group input[type=radio]:checked + label::before {
   right: 0;
 }
-.form-check.form-check-group .form-text {
-  display: block;
-  margin-bottom: 0.5rem;
-  padding-right: 3.25rem;
-}
 .form-check.form-check-group input.semi-checked:not(:checked) + label::before {
   right: 4px;
   left: auto;
 }
 .form-check input.semi-checked:not(:checked) + label::before {
-  top: 9px;
+  top: 12px;
   left: 4px;
   width: 12px;
   height: 2px;
@@ -3604,14 +4106,21 @@ input::-webkit-datetime-edit {
   border-style: none;
   border-color: transparent;
   opacity: 1;
-  background: var(--bs-color-background-inverse);
+  background: var(--bsi-color-background-inverse);
   transform: none;
   backface-visibility: hidden;
 }
 .form-check input.semi-checked:not(:checked) + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checked-color);
-  background-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
+  background-color: var(--bsi-form-checked-color);
+}
+
+.form-check-inline {
+  display: inline-block;
+}
+.form-check-inline:not(:last-child) {
+  margin-right: var(--bsi-spacing-m);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -3632,7 +4141,7 @@ input::-webkit-datetime-edit {
 .form-check [type=checkbox]:focus + label,
 .form-check [type=radio]:focus + label {
   border-color: hsl(0, 0%, 0%) !important;
-  box-shadow: 0 0 0 2px var(--bs-color-border-inverse), 0 0 0 5px var(--bs-color-outline-focus) !important;
+  box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
   outline: 3px solid transparent !important;
   outline-offset: 3px !important;
 }
@@ -3646,10 +4155,10 @@ input::-webkit-datetime-edit {
 
 .form-control-plaintext {
   border: 0;
-  --bs-form-control-border-color: transparent;
-  --bs-form-control-border-radius: 0;
-  --bs-form-control-background-color: transparent;
-  --bs-form-control-spacing: 0;
+  --bsi-form-control-border-color: transparent;
+  --bsi-form-control-border-radius: 0;
+  --bsi-form-control-background-color: transparent;
+  --bsi-form-control-spacing: 0;
 }
 .form-control-plaintext:focus {
   outline: 0;
@@ -3666,31 +4175,28 @@ input::-webkit-datetime-edit {
 }
 .form-control:disabled {
   cursor: not-allowed;
-  background: var(--bs-color-background-disabled);
+  background: var(--bsi-color-background-disabled);
   border: 0;
-  color: var(--bs-color-text-disabled);
+  color: var(--bsi-color-text-disabled);
 }
 .was-validated .form-control:valid, .form-control.is-valid {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23008055' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
 }
 .was-validated .form-control:invalid, .form-control.is-invalid {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cc334d' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
-  border-color: var(--bs-color-border-danger);
-}
-.was-validated .form-control:invalid[type=number], .form-control.is-invalid[type=number] {
-  background-size: 80px 30%;
+  border-color: var(--bsi-color-border-danger);
 }
 .form-control.warning {
   background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2012C2%206.47715%206.47715%202%2012%202C14.6522%202%2017.1957%203.05357%2019.0711%204.92893C20.9464%206.8043%2022%209.34784%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012ZM3%2012C3%2016.9706%207.02944%2021%2012%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012ZM11.5%2014.2V5.7H12.7V14.2H11.5ZM12.6%2018.3V16.5H11.4V18.3H12.6Z%22/%3E%0A%3C/svg%3E") no-repeat;
-  border-color: var(--bs-color-border-warning);
+  border-color: var(--bsi-color-border-warning);
 }
 .form-control.is-valid ~ .warning-feedback {
   display: block;
 }
 
 .form-control-sm {
-  --bs-form-control-spacing: var(--bs-spacing-xxs) var(--bs-spacing-3xs);
-  --bs-form-control-font-size: var(--bs-label-font-size);
+  --bsi-form-control-spacing: var(--bsi-spacing-xxs) var(--bsi-spacing-3xs);
+  --bsi-form-control-font-size: var(--bsi-label-font-size);
 }
 .form-control-sm::file-selector-button {
   padding: 0.25rem 0.5rem;
@@ -3699,7 +4205,7 @@ input::-webkit-datetime-edit {
 }
 
 .form-control-lg {
-  --bs-form-control-font-size: var(--bs-lead-font-size);
+  --bsi-form-control-font-size: var(--bsi-lead-font-size);
 }
 .form-control-lg::file-selector-button {
   padding: 0.5rem 1rem;
@@ -3742,15 +4248,15 @@ textarea.form-control-lg {
 
 .password-icon {
   position: absolute;
-  top: calc(var(--bs-form-control-spacing) * 4.5);
-  right: var(--bs-form-control-spacing);
+  top: calc(var(--bsi-form-control-spacing) * 4.5);
+  right: var(--bsi-form-control-spacing);
   z-index: 10;
-  padding: 0 var(--bs-spacing-xxs);
-  background-color: var(--bs-form-control-background-color);
+  padding: 0 var(--bsi-spacing-xxs);
+  background-color: var(--bsi-form-control-background-color);
   cursor: pointer;
 }
 .password-icon .icon {
-  fill: var(--bs-icon-primary);
+  fill: var(--bsi-icon-primary);
 }
 
 .password-meter {
@@ -3771,6 +4277,106 @@ textarea.form-control-lg {
   display: block;
 }
 
+.input-number {
+  position: relative;
+}
+.input-number.input-number-adaptive {
+  width: fit-content;
+}
+.input-number.input-number-adaptive input[type=number] {
+  width: auto;
+  transition: all va(--bsi-transition-instant);
+}
+.input-number input[type=number] {
+  appearance: textfield;
+  border-top-right-radius: var(--bsi-form-control-border-radius) !important;
+  border-bottom-right-radius: var(--bsi-form-control-border-radius) !important;
+}
+.input-number input[type=number]::-webkit-inner-spin-button, .input-number input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+.input-number input[type=number]::-ms-clear {
+  display: none;
+}
+.input-number input[type=number]:not(:disabled) {
+  border-left: 1px solid var(--bsi-form-control-border-color);
+}
+.input-number input[type=number][readonly] ~ .input-group-text .input-number-add,
+.input-number input[type=number][readonly] ~ .input-group-text .input-number-sub {
+  display: none;
+}
+.input-number.disabled button {
+  display: none;
+  pointer-events: none;
+}
+.input-number.disabled button:hover {
+  cursor: not-allowed;
+}
+.input-number .input-group-text.align-buttons {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  padding-right: var(--bsi-form-control-spacing);
+  border: none;
+  background: transparent;
+}
+.is-invalid + .input-number .input-group-text.align-buttons {
+  bottom: 0;
+}
+.input-number .input-group-text button {
+  position: relative;
+  transition: opacity 0.1s;
+  padding: 0;
+  border: none;
+  height: 50%;
+  width: 16px;
+  background: transparent;
+}
+.input-number .input-group-text button:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  content: "";
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.input-number .input-group-text button:focus.input-number-add:after, .input-number .input-group-text button:hover.input-number-add:after {
+  border-color: transparent transparent var(--bsi-form-control-border-color) transparent;
+}
+.input-number .input-group-text button:focus.input-number-sub:after, .input-number .input-group-text button:hover.input-number-sub:after {
+  border-color: var(--bsi-form-control-border-color) transparent transparent transparent;
+}
+.input-number .input-group-text button:focus:not([data-focus-mouse=true]) {
+  opacity: 1;
+}
+.input-number .input-group-text button.input-number-add:after {
+  border-width: 0 5px 6px 5px;
+  border-color: transparent transparent var(--bsi-form-control-border-color) transparent;
+}
+.input-number .input-group-text button.input-number-sub:after {
+  border-width: 6px 5px 0 5px;
+  border-color: var(--bsi-form-control-border-color) transparent transparent transparent;
+}
+.input-number .input-group-text button:hover {
+  cursor: pointer;
+}
+
+.input-number .input-group-text + input[type=number] {
+  border-left: 0;
+}
+
+@media (min-width: 1200px) {
+  .input-number button {
+    opacity: 0;
+  }
+  .input-number:hover button {
+    opacity: 1;
+  }
+}
 .input-group {
   position: relative;
   display: flex;
@@ -3805,11 +4411,11 @@ textarea.form-control-lg {
 .input-group-text {
   display: flex;
   align-items: center;
-  padding: var(--bs-form-control-spacing) 0 var(--bs-form-control-spacing) var(--bs-form-control-spacing);
-  font-size: var(--bs-body-font-size);
-  font-weight: var(--bs-font-weight-solid);
-  color: var(--bs-form-inpunt-text-color);
-  background-color: var(--bs-form-control-background-color);
+  padding: var(--bsi-form-control-spacing) 0 var(--bsi-form-control-spacing) var(--bsi-form-control-spacing);
+  font-size: var(--bsi-body-font-size);
+  font-weight: var(--bsi-font-weight-solid);
+  color: var(--bsi-form-inpunt-text-color);
+  background-color: var(--bsi-form-control-background-color);
   text-align: center;
   white-space: nowrap;
   border-top-width: 1px;
@@ -3817,13 +4423,13 @@ textarea.form-control-lg {
   border-right-width: 0;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: var(--bs-form-control-border-color);
-  border-radius: var(--bs-form-control-border-radius);
+  border-color: var(--bsi-form-control-border-color);
+  border-radius: var(--bsi-form-control-border-radius);
 }
 .disabled .input-group-text {
-  background-color: var(--bs-color-background-disabled);
-  border-color: var(--bs-color-border-disabled);
-  color: var(--bs-color-text-disabled);
+  background-color: var(--bsi-color-background-disabled);
+  border-color: var(--bsi-color-border-disabled);
+  color: var(--bsi-color-text-disabled);
 }
 
 .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
@@ -3857,7 +4463,7 @@ textarea.form-control-lg {
   font-size: 0.75rem;
 }
 .form-feedback.just-validate-error-label {
-  color: var(--bs-color-text-danger);
+  color: var(--bsi-color-text-danger);
 }
 
 .input-group-text:has(~ [data-focus-mouse=true]:not(.btn)),
@@ -3873,7 +4479,7 @@ button:has(~ [data-focus-mouse=true]:not(.btn)),
 .is-invalid ~ .input-group-text,
 button:has(~ .is-invalid),
 .is-invalid + button {
-  border-color: var(--bs-color-border-danger) !important;
+  border-color: var(--bsi-color-border-danger) !important;
 }
 
 .sr-only-justvalidate-bi {
@@ -3881,7 +4487,7 @@ button:has(~ .is-invalid),
 }
 
 .just-validate-success-field {
-  border-color: var(--bs-color-border-success) !important;
+  border-color: var(--bsi-color-border-success) !important;
   padding-right: calc(1.5em + 0.75rem) !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23008055' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
 }
@@ -3890,7 +4496,7 @@ button:has(~ .is-invalid),
 .just-validate-success-field ~ .input-group-text,
 button:has(~ .just-validate-success-field),
 .just-validate-success-field + button {
-  border-color: var(--bs-color-border-success);
+  border-color: var(--bsi-color-border-success);
 }
 
 .just-validate-success-field + .input-group-text.align-buttons,
@@ -3919,16 +4525,16 @@ textarea.just-validate-success-field {
   border-bottom-width: 1px;
 }
 
-input[type=checkbox].just-validate-success-field + label,
-input[type=radio].just-validate-success-field + label {
-  color: var(--bs-color-text-success);
+input[type=checkbox].is-invalid,
+input[type=radio].is-invalid {
+  --bsi-form-checkbox-border-color: var(--bsi-color-border-danger);
 }
 
 select.is-invalid {
-  border: 1px solid var(--bs-color-border-danger);
+  border: 1px solid var(--bsi-color-border-danger);
 }
 select.just-validate-success-field {
-  border: 1px solid var(--bs-color-border-success);
+  border: 1px solid var(--bsi-color-border-success);
 }
 
 .position-absolute {
@@ -3944,27 +4550,27 @@ select.just-validate-success-field {
 }
 
 .bg-muted {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(0, 0%, 96%) !important;
 }
 
 .bg-danger {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(350, 60%, 50%) !important;
 }
 
 .bg-warning {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(36, 100%, 30%) !important;
 }
 
 .bg-success {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(160, 100%, 25%) !important;
 }
 
 .border-start {
-  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+  border-left: var(--bsi-border-base) var(--bsi-border-style) var(--bsi-border-color) !important;
 }
 
 .border-start-0 {
@@ -3972,7 +4578,7 @@ select.just-validate-success-field {
 }
 
 .border-end {
-  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+  border-right: var(--bsi-border-base) var(--bsi-border-style) var(--bsi-border-color) !important;
 }
 
 .border-end-0 {
@@ -3980,127 +4586,126 @@ select.just-validate-success-field {
 }
 
 .border-white {
-  --bs-border-opacity: 1;
-  border-color: white !important;
+  --bsi-border-color: white;
 }
 
 .text-primary {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-primary-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-secondary {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: hsl(210, 33%, 28%) !important;
 }
 
 .text-success {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-success-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-info {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-info-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-warning {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-warning-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-danger {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-danger-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-light {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-light-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-dark {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-dark-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-black {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-black-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-white {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-white-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-100 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-100-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-100-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-200 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-200-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-200-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-300 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-300-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-300-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-400 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-400-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-400-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-500 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-500-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-500-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-600 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-600-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-600-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-700 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-700-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-700-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-800 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-800-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-800-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-900 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-900-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-900-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-body {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-body-color-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-muted {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: hsl(210, 17%, 44%) !important;
 }
 
 .text-black-50 {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: rgba(0, 0, 0, 0.5) !important;
 }
 
 .text-white-50 {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: rgba(255, 255, 255, 0.5) !important;
 }
 
 .text-reset {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: inherit !important;
 }
 
@@ -4108,6 +4713,10 @@ select.just-validate-success-field {
   display: none !important;
 }
 
+.flex-column {
+  flex-direction: column !important;
+}
+
 @media (min-width: 576px) {
   .m-sm-0 {
     margin: 0 !important;
@@ -4115,6 +4724,9 @@ select.just-validate-success-field {
   .d-sm-none {
     display: none !important;
   }
+  .flex-sm-column {
+    flex-direction: column !important;
+  }
 }
 @media (min-width: 768px) {
   .m-md-0 {
@@ -4123,6 +4735,9 @@ select.just-validate-success-field {
   .d-md-none {
     display: none !important;
   }
+  .flex-md-column {
+    flex-direction: column !important;
+  }
 }
 @media (min-width: 992px) {
   .m-lg-0 {
@@ -4131,6 +4746,9 @@ select.just-validate-success-field {
   .d-lg-none {
     display: none !important;
   }
+  .flex-lg-column {
+    flex-direction: column !important;
+  }
 }
 @media (min-width: 1200px) {
   .m-xl-0 {
@@ -4139,6 +4757,9 @@ select.just-validate-success-field {
   .d-xl-none {
     display: none !important;
   }
+  .flex-xl-column {
+    flex-direction: column !important;
+  }
 }
 @media (min-width: 1400px) {
   .m-xxl-0 {
@@ -4147,153 +4768,86 @@ select.just-validate-success-field {
   .d-xxl-none {
     display: none !important;
   }
+  .flex-xxl-column {
+    flex-direction: column !important;
+  }
 }
 @media print {
   .d-print-none {
     display: none !important;
   }
 }
-:host {
-  display: block;
+.password-icon {
+  top: calc(var(--bsi-form-control-spacing) * 5);
+  --bsi-icon-default: var(--bsi-icon-primary);
 }
 
-.password-icon {
-  top: calc(var(--bs-form-control-spacing) * 5);
-  --bs-icon-default: var(--bs-icon-primary);
+.is-invalid + .input-group-text.align-buttons {
+  bottom: 0 !important;
 }`;
 
+var ItInput_1;
 registerTranslation(translation);
-let ItInput = class ItInput extends ValidityMixin(FormMixin(BaseLocalizedComponent)) {
+let ItInput = ItInput_1 = class ItInput extends FormControl {
     constructor() {
         super(...arguments);
-        this.internals = this.attachInternals();
-        this.slotted = false;
-        this.invalid = false;
-        this.customValidation = false;
-        this.required = false;
-        this.validationText = '';
-        this.label = '';
-        this.labelHidden = false;
+        this._slotPrepend = null;
+        this._slotAppend = null;
+        /**
+         * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
+         * to `text`.
+         */
         this.type = 'text';
-        this.name = '';
+        /** If you want number-input to be adaptive in width */
+        this.adaptive = false;
+        /** If you want label to be hidden. */
+        this.labelHidden = false;
+        /** Placeholder text to show as a hint when the input is empty. */
         this.placeholder = '';
+        /** The input's help text. */
         this.supportText = '';
-        this.disabled = false;
+        /** If you want the input to be displayed as plaintext. */
         this.plaintext = false;
+        /** If the input is read-only. */
         this.readonly = false;
+        /** If your input is of type 'password' and you want to display a strength meter */
         this.passwordStrengthMeter = false;
+        /** If your input is of type 'password' and you want to show password suggestions. */
         this.suggestions = false;
-        this.minlength = -1;
-        this.maxlength = -1;
         this._passwordVisible = false;
         this._strengthInfos = '';
         this._score = 0;
-        this._value = ''; // from validity mixin
-        this._touched = false; // from validity mixin
-        this.validityMessage = ''; // from validity mixin
-    }
-    static get formAssociated() {
-        return true;
-    }
-    get value() {
-        if (this._inputElement) {
-            return this._inputElement.value;
-        }
-        return this._value;
-    }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this.internals.setFormValue(value); // <- Associa il valore al form
-        // make sure that lit-element updates the right properties
-        this.requestUpdate('value', oldValue);
-        // we set the value directly on the input (when available)
-        // so that programatic manipulation updates the UI correctly
-        if (this._inputElement && this._inputElement.value !== value) {
-            this._inputElement.value = value;
-        }
-    }
-    // Getter pubblico per accedere all'input
-    get inputElement() {
-        return this.shadowRoot?.querySelector('input');
-    }
-    _handleFormdata(event) {
-        // Add name and value to the form's submission data if it's not disabled.
-        if (!this.disabled) {
-            const { formData } = event;
-            formData.append(this.name, this._value);
-        }
-    }
-    _handleInput(e) {
-        const input = e.target;
-        this.value = input.value;
-        if (this.passwordStrengthMeter) {
-            this._checkPasswordStrength(input.value);
-        }
-        this.dispatchEvent(new CustomEvent('on-input', {
-            detail: { value: input.value, el: input },
-            bubbles: true,
-            composed: true,
-        }));
     }
-    checkValidity() {
-        if (!this.customValidation) {
-            const inputValid = this._inputElement ? this._inputElement.checkValidity() : true; // this._inputElement.checkValidity() è la validazione del browser
-            this._checkValidity({
-                [VALIDATION_STATUS.INVALID]: this.$t('validityInvalid'),
-                [VALIDATION_STATUS.ERROR_REQUIRED]: this.$t('validityRequired'),
-                [VALIDATION_STATUS.PATTERN]: this.$t('validityPattern'),
-                [VALIDATION_STATUS.MINLENGTH]: this.$t('validityMinlength'),
-                [VALIDATION_STATUS.MAXLENGTH]: this.$t('validityMaxlength'),
-            }, inputValid);
+    get label() {
+        if (this.labelElements.length > 0) {
+            return this.labelElements[0].innerText.trim();
         }
+        return '';
     }
-    _handleBlur() {
-        super._handleBlur();
-        this.checkValidity();
+    get slotted() {
+        return this._slotPrepend || this._slotAppend;
     }
     firstUpdated() {
-        // this.addFocus(this._inputElement); //NON serve per il momento perche sfruttiamo :focus-visible. Per gli input focus-visible si attiva anche al click perchè è il browser che lo gestisce
-        const iconSlot = this.shadowRoot?.querySelector('slot[name="icon"]');
-        const appendSlot = this.shadowRoot?.querySelector('slot[name="append"]');
-        iconSlot?.addEventListener('slotchange', () => {
+        // this.addFocus(this.inputElement); //NON serve per il momento perche sfruttiamo :focus-visible. Per gli input focus-visible si attiva anche al click perchè è il browser che lo gestisce
+        this._slotPrepend = this.querySelector('[slot="prepend"]');
+        this._slotAppend = this.querySelector('[slot="append"]');
+        this._slotPrepend?.addEventListener('slotchange', () => {
             this.requestUpdate();
         });
-        appendSlot?.addEventListener('slotchange', () => {
+        this._slotAppend?.addEventListener('slotchange', () => {
             this.requestUpdate();
         });
     }
     connectedCallback() {
         super.connectedCallback?.();
-        /* così quando si scrive <it-input value="ciao"></it-input>, this.value viene impostato con 'ciao' */
-        const attrValue = this.getAttribute('value');
-        if (attrValue !== null) {
-            this.value = attrValue;
-        }
         if (this.type === 'password' && this.minlength < 0) {
             this.minlength = 8; // set default minlength for password
         }
-        requestAnimationFrame(() => {
-            this.dispatchEvent(new CustomEvent('input-ready', { bubbles: true, detail: { el: this.inputElement } }));
-        });
+        this._handleReady();
     }
-    // protected override update(changedProperties: Map<string | number | symbol, unknown>): void {
-    //   if (changedProperties.has('value') || (changedProperties.has('required') && this.required)) {
-    //     this.updateComplete.then(() => {
-    //       this.checkValidity();
-    //     });
-    //   }
-    //   super.update(changedProperties);
-    // }
     updated(changedProperties) {
         super.updated?.(changedProperties);
-        if (this.customValidation) {
-            this.setCustomValidity(this.validationText);
-        }
-        if (this.invalid) {
-            const message = this.validationText?.length > 0 ? this.validationText : (this.validityMessage ?? 'Campo non valido');
-            this.internals.setValidity({ customError: this.invalid }, message);
-        }
+        // logger
         if (this.passwordStrengthMeter && this.type !== 'password') {
             this.logger.warn("The strength-meter property is enabled, but type isn't password. Please, remove strength-meter property.");
         }
@@ -4301,13 +4855,24 @@ let ItInput = class ItInput extends ValidityMixin(FormMixin(BaseLocalizedCompone
             this.logger.warn("The suggestions property is enabled, but type isn't password. Please, remove suggestions this property.");
         }
         if (!this.label || this.label?.length === 0) {
-            this.logger.warn(`Label is required to ensure accessibility. Please, define a label for <it-input name="${this.name}" ... /> . Set attribute label-hidden="true" if you don't want to show label.`);
+            this.logger.warn(`Label is required to ensure accessibility. Please, define a label for <it-input name="${this.name}" id="${this.id}" ... /> . Set attribute label-hidden="true" if you don't want to show label.`);
+        }
+    }
+    _handleInput(e) {
+        this.value = this.inputElement.value;
+        if (this.value === '00') {
+            this.value = '0';
+            this.inputElement.value = '0';
+        }
+        if (this.passwordStrengthMeter) {
+            this._checkPasswordStrength(this.inputElement.value);
         }
+        super._handleInput(e);
     }
     _togglePasswordVisibility() {
         this._passwordVisible = !this._passwordVisible;
-        if (this._inputElement) {
-            this._inputElement.type = this._passwordVisible ? 'text' : 'password';
+        if (this.inputElement) {
+            this.inputElement.type = this._passwordVisible ? 'text' : 'password';
         }
     }
     _checkPasswordStrength(value) {
@@ -4348,6 +4913,28 @@ let ItInput = class ItInput extends ValidityMixin(FormMixin(BaseLocalizedCompone
         }
         this._strengthInfos = text;
     }
+    static _cleanFloat(num) {
+        return parseFloat(num.toPrecision(15));
+    }
+    _inputNumberIncDec(v) {
+        const step = typeof this.step === 'number' ? this.step : Number(this.step) || 1;
+        const value = typeof this.value === 'number' ? this.value : Number(this.value) || 0;
+        const min = typeof this.min === 'number' ? this.min : Number(this.min);
+        const max = typeof this.max === 'number' ? this.max : Number(this.max);
+        const _v = v * step;
+        const newValue = ItInput_1._cleanFloat(value + _v);
+        if (newValue > max || newValue < min) ;
+        else {
+            const _value = newValue.toString();
+            this.value = _value;
+            this.inputElement.dispatchEvent(new Event('blur', { bubbles: true }));
+            this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+            const liveRegion = this.shadowRoot?.querySelector(`#${this._id}-live-region`);
+            if (liveRegion) {
+                liveRegion.textContent = `${_value}`;
+            }
+        }
+    }
     _renderTogglePasswordButton() {
         // Solo se type=password
         if (this.type === 'password') {
@@ -4400,7 +4987,7 @@ let ItInput = class ItInput extends ValidityMixin(FormMixin(BaseLocalizedCompone
     _renderpasswordStrengthMeter() {
         if (this.type === 'password' && this.passwordStrengthMeter) {
             const perc = this._score < 0 ? 0 : this._score;
-            const color = this._value?.length === 0 ? 'muted' : scoreColor(this._score);
+            const color = this.value?.length === 0 ? 'muted' : scoreColor(this._score);
             return html `<div class="password-strength-meter">
         ${this._renderSuggestions()}
 
@@ -4433,9 +5020,9 @@ let ItInput = class ItInput extends ValidityMixin(FormMixin(BaseLocalizedCompone
         }
         return nothing;
     }
-    _renderInput(supportTextId) {
-        const ariaDescribedBy = this.composeClass(this.supportText?.length > 0 ? supportTextId : '', this.passwordStrengthMeter ? `strengthMeterInfo_${this._id}` : '', this._ariaAttributes['aria-describedby']?.length > 0 ? this._ariaAttributes['aria-describedby'] : '', this.validityMessage?.length > 0 ? `invalid-feedback-${this._id}` : '');
-        const inputClasses = this.composeClass(this.plaintext ? 'form-control-plaintext' : 'form-control', this.size ? `form-control-${this.size}` : '', this.invalid ? 'is-invalid' : '', !this.invalid && this._touched ? 'just-validate-success-field' : '');
+    _renderInput(supportTextId, invalid, validityMessage, showValidation) {
+        const ariaDescribedBy = this.composeClass(this.supportText?.length > 0 ? supportTextId : '', this.passwordStrengthMeter ? `strengthMeterInfo_${this._id}` : '', this._ariaAttributes['aria-describedby']?.length > 0 ? this._ariaAttributes['aria-describedby'] : '', showValidation && validityMessage?.length > 0 ? `invalid-feedback-${this._id}` : '');
+        const inputClasses = this.composeClass('it-form__control', this.plaintext ? 'form-control-plaintext' : 'form-control', this.size ? `form-control-${this.size}` : '', showValidation && invalid ? 'is-invalid' : '', showValidation && !invalid && !this.readonly ? 'just-validate-success-field' : '');
         let inputRender;
         if (this.type === 'textarea') {
             inputRender = html `
@@ -4443,139 +5030,151 @@ let ItInput = class ItInput extends ValidityMixin(FormMixin(BaseLocalizedCompone
           part="textarea focusable"
           ${setAttributes(this._ariaAttributes)}
           aria-describedby=${ifDefined(ariaDescribedBy || undefined)}
-          ?aria-invalid=${this.invalid}
+          aria-invalid=${ifDefined(invalid ? 'true' : undefined)}
           @input="${this._handleInput}"
           @blur=${this._handleBlur}
           @focus=${this._handleFocus}
           @click=${this._handleClick}
           @change=${this._handleChange}
+          @invalid=${this._handleInvalid}
           id="${this._id}"
           name="${this.name}"
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
-          .value="${this._value}"
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          pattern=${ifDefined(this.pattern)}
+          ?formNoValidate=${this.customValidation}
+          .value="${live(this.value)}"
           placeholder=${ifDefined(this.placeholder || undefined)}
           class="${inputClasses}"
         ></textarea>
       `;
         }
         else {
+            let style = null;
+            if (this.type === 'number' && this.adaptive) {
+                style = `width: calc(${this.value.toString().length}ch + 70px);`;
+            }
             inputRender = html `
         <input
           part="input focusable"
           ${setAttributes(this._ariaAttributes)}
           aria-describedby=${ifDefined(ariaDescribedBy || undefined)}
-          ?aria-invalid=${this.invalid}
+          aria-invalid=${ifDefined(invalid ? 'true' : undefined)}
           @input="${this._handleInput}"
           @blur=${this._handleBlur}
           @focus=${this._handleFocus}
           @click=${this._handleClick}
           @change=${this._handleChange}
+          @invalid=${this._handleInvalid}
           type="${this.type}"
           id="${this._id}"
           name="${this.name}"
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
-          .value="${this._value}"
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          step=${ifDefined(this.step)}
+          autocomplete="off"
+          pattern=${ifDefined(this.pattern)}
+          ?formNoValidate=${this.customValidation}
+          .value="${live(this.value)}"
           placeholder=${ifDefined(this.placeholder || undefined)}
           class="${inputClasses}"
+          style=${ifDefined(style)}
         />${this._renderTogglePasswordButton()}
       `;
         }
-        inputRender = html `
-      ${inputRender}
-      <div
-        role="alert"
-        id="invalid-feedback-${this._id}"
-        class="invalid-feedback form-feedback form-text form-feedback just-validate-error-label"
-        ?hidden=${!(this.validityMessage?.length > 0)}
-      >
-        <span class="visually-hidden">${this.label}: </span>${this.validityMessage}
-      </div>
-    `;
         return inputRender;
     }
     // Render the UI as a function of component state
     render() {
         const supportTextId = `${this._id}-support-text`;
         const supportTextRender = html ` ${when(this.supportText, () => html ` <small class="form-text" id="${supportTextId}">${this.supportText}</small> `)}`;
+        const showValidation = this.formControlController.submittedOnce || this.customValidation; // true; // this._touched || this.customValidation;
+        const validityMessage = (showValidation ? this.validationMessage : '') ?? '';
+        const invalid = validityMessage?.length > 0 || (!this.customValidation && this.inputElement?.checkValidity() === false);
+        const validityMessageRender = html `<div
+      role="alert"
+      id="invalid-feedback-${this._id}"
+      class="invalid-feedback form-feedback form-text form-feedback just-validate-error-label"
+      ?hidden=${!(validityMessage?.length > 0)}
+    >
+      <span class="visually-hidden">${this.label}: </span>${validityMessage}
+    </div>`;
         return html `
       <div class="form-group" part="input-wrapper">
         <label
           for="${ifDefined(this._id || undefined)}"
           part="label"
           class="${this.composeClass('active', this.labelHidden ? 'visually-hidden' : '')}"
-          >${this.label}</label
-        >
-
-        ${when(this.slotted, () => html ` <div class="input-group">
-                <span class="input-group-text">
-                  <slot name="icon" @slotchange=${() => this.requestUpdate()}></slot
-                ></span>
-                ${this._renderInput(supportTextId)}
-                <div class="input-group-append">
-                  <slot name="append" @slotchange=${() => this.requestUpdate()}></slot>
-                </div>
+          ><slot name="label"></slot
+        ></label>
+
+        ${when(this.slotted || this.type === 'number', () => html `<div
+                class="${this.composeClass('input-group ', this.type === 'number' ? 'input-number' : '', this.type === 'number' && this.adaptive ? 'input-number-adaptive' : '', this.disabled ? 'disabled' : '', this.readonly ? 'readonly' : '')}"
+              >
+                ${when(this._slotPrepend, () => html ` <span class="input-group-text">
+                      <slot name="prepend" @slotchange=${() => this.requestUpdate()}></slot
+                    ></span>`)}
+                ${this._renderInput(supportTextId, invalid, validityMessage, showValidation)}
+                ${when(this.type === 'number', () => html `<span class="input-group-text align-buttons flex-column">
+                      <button
+                        class="input-number-add"
+                        @click=${() => this._inputNumberIncDec(1)}
+                        ?disabled=${this.disabled || this.readonly}
+                      >
+                        <span class="visually-hidden">${this.$t('increaseValue')}</span>
+                      </button>
+                      <button
+                        class="input-number-sub"
+                        @click=${() => this._inputNumberIncDec(-1)}
+                        ?disabled=${this.disabled || this.readonly}
+                      >
+                        <span class="visually-hidden">${this.$t('decreaseValue')}</span>
+                      </button>
+                      <div aria-live="polite" class="visually-hidden" id="${this._id}-live-region"></div>
+                    </span>`)}
+                ${when(this._slotAppend, () => html ` <div class="input-group-append">
+                      <slot name="append" @slotchange=${() => this.requestUpdate()}></slot>
+                    </div>`)}
               </div>
-              ${supportTextRender} ${this._renderpasswordStrengthMeter()}`, () => html ` ${this._renderInput(supportTextId)} ${supportTextRender} ${this._renderpasswordStrengthMeter()}`)}
+              ${validityMessageRender} ${supportTextRender} ${this._renderpasswordStrengthMeter()}`, () => html ` ${this._renderInput(supportTextId, invalid, validityMessage, showValidation)} ${validityMessageRender}
+            ${supportTextRender} ${this._renderpasswordStrengthMeter()}`)}
       </div>
     `;
     }
 };
 ItInput.styles = styles;
 __decorate([
-    property(),
-    __metadata("design:type", Object)
-], ItInput.prototype, "internals", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], ItInput.prototype, "slotted", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }) // from validity mixin
-    ,
-    __metadata("design:type", Object)
-], ItInput.prototype, "invalid", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'custom-validation' }) // from validity mixin
-    ,
+    state(),
     __metadata("design:type", Object)
-], ItInput.prototype, "customValidation", void 0);
+], ItInput.prototype, "_slotPrepend", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }) // from validity mixin
-    ,
+    state(),
     __metadata("design:type", Object)
-], ItInput.prototype, "required", void 0);
+], ItInput.prototype, "_slotAppend", void 0);
 __decorate([
-    property({ attribute: 'validity-message' }),
+    property({ type: String }),
     __metadata("design:type", String)
-], ItInput.prototype, "validationText", void 0);
-__decorate([
-    query('input'),
-    __metadata("design:type", HTMLInputElement)
-], ItInput.prototype, "_inputElement", void 0);
+], ItInput.prototype, "type", void 0);
 __decorate([
-    property({ type: String }),
+    property(),
     __metadata("design:type", Object)
 ], ItInput.prototype, "size", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: Boolean }),
     __metadata("design:type", Object)
-], ItInput.prototype, "label", void 0);
+], ItInput.prototype, "adaptive", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'label-hidden' }),
     __metadata("design:type", Object)
 ], ItInput.prototype, "labelHidden", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], ItInput.prototype, "type", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], ItInput.prototype, "name", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -4584,10 +5183,6 @@ __decorate([
     property({ type: String, attribute: 'support-text' }),
     __metadata("design:type", Object)
 ], ItInput.prototype, "supportText", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], ItInput.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -4605,17 +5200,9 @@ __decorate([
     __metadata("design:type", Object)
 ], ItInput.prototype, "suggestions", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], ItInput.prototype, "minlength", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], ItInput.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], ItInput.prototype, "pattern", void 0);
+    queryAssignedElements({ slot: 'label' }),
+    __metadata("design:type", Array)
+], ItInput.prototype, "labelElements", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -4628,24 +5215,7 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], ItInput.prototype, "_score", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ItInput.prototype, "_value", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ItInput.prototype, "_touched", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], ItInput.prototype, "validityMessage", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ItInput.prototype, "value", null);
-ItInput = __decorate([
+ItInput = ItInput_1 = __decorate([
     customElement('it-input')
 ], ItInput);