@fiscozen/input 3.2.0 → 3.3.0

package/src/__tests__/FzCurrencyInput.spec.ts

@@ -1,1696 +1,1797 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { FzCurrencyInput } from '..'
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { FzCurrencyInput } from "..";
 
-describe('FzCurrencyInput', () => {
+describe("FzCurrencyInput", () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-  })
+    vi.clearAllMocks();
+  });
 
   afterEach(() => {
-    vi.restoreAllMocks()
-  })
+    vi.restoreAllMocks();
+  });
 
-  describe('Currency formatting', () => {
-    it('renders floating numbers as currency with thousand separators', async () => {
-      let modelValue: number | undefined = 1234.56
-      let wrapper: ReturnType<typeof mount> | null = null
+  describe("Currency formatting", () => {
+    it("renders floating numbers as currency with thousand separators", async () => {
+      let modelValue: number | undefined = 1234.56;
+      let wrapper: ReturnType<typeof mount> | null = null;
       wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue,
-          'onUpdate:modelValue': (e) => {
-            modelValue = e as number
-            if (wrapper) wrapper.setProps({ modelValue })
+          "onUpdate:modelValue": (e) => {
+            modelValue = e as number;
+            if (wrapper) wrapper.setProps({ modelValue });
           },
         },
-      })
+      });
 
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // With grouping, should show "1.234,56"
-      expect(inputElement.element.value).toBe('1.234,56')
-    })
+      expect(inputElement.element.value).toBe("1.234,56");
+    });
 
-    it('should not allow inputs other than digits and separators', async () => {
-      let modelValue: number | undefined = 0
-      let wrapper: ReturnType<typeof mount> | null = null
+    it("should not allow inputs other than digits and separators", async () => {
+      let modelValue: number | undefined = 0;
+      let wrapper: ReturnType<typeof mount> | null = null;
       wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue,
-          'onUpdate:modelValue': (e) => {
-            modelValue = e as number
-            if (wrapper) wrapper.setProps({ modelValue })
+          "onUpdate:modelValue": (e) => {
+            modelValue = e as number;
+            if (wrapper) wrapper.setProps({ modelValue });
           },
         },
-      })
+      });
 
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('focus')
-      await inputElement.setValue('as12,3')
-      await inputElement.trigger('input')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("focus");
+      await inputElement.setValue("as12,3");
+      await inputElement.trigger("input");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // During typing when focused, shows raw normalized value (converted . to ,)
-      expect(inputElement.element.value).toBe('12,3')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      expect(inputElement.element.value).toBe("12,3");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // On blur, formats with minimumFractionDigits
-      expect(inputElement.element.value).toBe('12,30')
-    })
+      expect(inputElement.element.value).toBe("12,30");
+    });
 
-    it('should allow to set value at 0', async () => {
+    it("should allow to set value at 0", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
         },
-      })
-
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('10,00')
-      wrapper.setProps({ modelValue: 0 })
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('0,00')
-    })
-  })
-
-
-  describe('Value constraints', () => {
-    it('should limit value according to min/max setting', async () => {
+      });
+
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("10,00");
+      wrapper.setProps({ modelValue: 0 });
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("0,00");
+    });
+  });
+
+  describe("Value constraints", () => {
+    it("should limit value according to min/max setting", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           min: 2,
           max: 20,
         },
-      })
+      });
+
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("10,00");
 
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('10,00')
-      
       // Set value below min and trigger blur to apply clamping
-      await inputElement.setValue('1')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('2,00')
-      
+      await inputElement.setValue("1");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("2,00");
+
       // Set value above max and trigger blur to apply clamping
-      await inputElement.setValue('23')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('20,00')
-    })
+      await inputElement.setValue("23");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("20,00");
+    });
 
-    it('should allow typing values outside min/max range temporarily', async () => {
+    it("should allow typing values outside min/max range temporarily", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 50,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           min: 2,
           max: 100,
         },
-      })
+      });
+
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("focus");
 
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('focus')
-      
       // Type a value above max - should be allowed during typing
-      await inputElement.setValue('150')
-      await inputElement.trigger('input')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      await inputElement.setValue("150");
+      await inputElement.trigger("input");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // During typing, value should NOT be clamped - user can type "150" even with max=100
-      expect(inputElement.element.value).toBe('150')
+      expect(inputElement.element.value).toBe("150");
       // v-model should also reflect the unclamped value during typing
-      expect(wrapper.props('modelValue')).toBe(150)
-      
+      expect(wrapper.props("modelValue")).toBe(150);
+
       // Only after blur, value should be clamped to max
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('100,00')
-      expect(wrapper.props('modelValue')).toBe(100)
-      
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("100,00");
+      expect(wrapper.props("modelValue")).toBe(100);
+
       // Test with value below min
-      await inputElement.trigger('focus')
-      await inputElement.setValue('1')
-      await inputElement.trigger('input')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      await inputElement.trigger("focus");
+      await inputElement.setValue("1");
+      await inputElement.trigger("input");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // During typing, value should NOT be clamped
-      expect(inputElement.element.value).toBe('1')
-      expect(wrapper.props('modelValue')).toBe(1)
-      
+      expect(inputElement.element.value).toBe("1");
+      expect(wrapper.props("modelValue")).toBe(1);
+
       // Only after blur, value should be clamped to min
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('2,00')
-      expect(wrapper.props('modelValue')).toBe(2)
-    })
-  })
-
-  describe('Step quantization', () => {
-    it('should step correctly when using quantization via the step prop', async () => {
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("2,00");
+      expect(wrapper.props("modelValue")).toBe(2);
+    });
+  });
+
+  describe("Step quantization", () => {
+    it("should step correctly when using quantization via the step prop", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 1,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           step: 4,
         },
-      })
-
-      const inputElement = wrapper.find('input')
-      const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-      const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
-
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('1,00')
-      await arrowUp.trigger('click')
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 150))
-      expect(inputElement.element.value).toBe('5,00')
-      await arrowDown.trigger('click')
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 150))
-      expect(inputElement.element.value).toBe('1,00')
-      await arrowDown.trigger('click')
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 150))
+      });
+
+      const inputElement = wrapper.find("input");
+      const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+      const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
+
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("1,00");
+      await arrowUp.trigger("click");
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 150));
+      expect(inputElement.element.value).toBe("5,00");
+      await arrowDown.trigger("click");
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 150));
+      expect(inputElement.element.value).toBe("1,00");
+      await arrowDown.trigger("click");
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 150));
       // Step down from 1 by 4 = -3 (no clamping applied in stepUpDown)
-      expect(inputElement.element.value).toBe('-3,00')
-    })
+      expect(inputElement.element.value).toBe("-3,00");
+    });
 
-    it('should enforce quantization via the forceStep prop', async () => {
+    it("should enforce quantization via the forceStep prop", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 8,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           step: 4,
           forceStep: true,
         },
-      })
-
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('8,00')
-      await wrapper.setProps({ modelValue: 5 })
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('4,00')
-      await wrapper.setProps({ modelValue: -7 })
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('-8,00')
-    })
-  })
-
-  describe('Step controls', () => {
-    it('should have step controls always visible with default step of 1', async () => {
+      });
+
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("8,00");
+      await wrapper.setProps({ modelValue: 5 });
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("4,00");
+      await wrapper.setProps({ modelValue: -7 });
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("-8,00");
+    });
+  });
+
+  describe("Step controls", () => {
+    it("should have step controls always visible with default step of 1", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
         },
-      })
+      });
 
-      const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-      const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+      const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+      const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-      expect(arrowUp.exists()).toBe(true)
-      expect(arrowDown.exists()).toBe(true)
+      expect(arrowUp.exists()).toBe(true);
+      expect(arrowDown.exists()).toBe(true);
 
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('10,00')
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("10,00");
 
-      await arrowUp.trigger('click')
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 150))
-      expect(inputElement.element.value).toBe('11,00')
+      await arrowUp.trigger("click");
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 150));
+      expect(inputElement.element.value).toBe("11,00");
 
-      await arrowDown.trigger('click')
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 150))
+      await arrowDown.trigger("click");
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 150));
       // After arrowDown, value should be 10 (11 - 1)
-      expect(inputElement.element.value).toBe('10,00')
-    })
+      expect(inputElement.element.value).toBe("10,00");
+    });
 
-    it('should use custom step value when provided', async () => {
+    it("should use custom step value when provided", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           step: 5,
         },
-      })
+      });
 
-      const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-      const inputElement = wrapper.find('input')
+      const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+      const inputElement = wrapper.find("input");
 
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('10,00')
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("10,00");
 
-      await arrowUp.trigger('click')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('15,00')
-    })
-  })
+      await arrowUp.trigger("click");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("15,00");
+    });
+  });
 
-  describe('Accessibility', () => {
-    describe('Step controls accessibility', () => {
-      it('should apply default aria-labels for step controls', async () => {
+  describe("Accessibility", () => {
+    describe("Step controls accessibility", () => {
+      it("should apply default aria-labels for step controls", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
             step: 2,
           },
-        })
+        });
 
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        expect(arrowUp.attributes('aria-label')).toBe('Incrementa di 2')
-        expect(arrowDown.attributes('aria-label')).toBe('Decrementa di 2')
-        expect(arrowUp.attributes('role')).toBe('button')
-        expect(arrowDown.attributes('role')).toBe('button')
-        expect(arrowUp.attributes('tabindex')).toBe('0')
-        expect(arrowDown.attributes('tabindex')).toBe('0')
-      })
+        expect(arrowUp.attributes("aria-label")).toBe("Incrementa di 2");
+        expect(arrowDown.attributes("aria-label")).toBe("Decrementa di 2");
+        expect(arrowUp.attributes("role")).toBe("button");
+        expect(arrowDown.attributes("role")).toBe("button");
+        expect(arrowUp.attributes("tabindex")).toBe("0");
+        expect(arrowDown.attributes("tabindex")).toBe("0");
+      });
 
-      it('should use custom aria-labels when provided', async () => {
+      it("should use custom aria-labels when provided", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
             step: 2,
-            stepUpAriaLabel: 'Custom increment',
-            stepDownAriaLabel: 'Custom decrement',
+            stepUpAriaLabel: "Custom increment",
+            stepDownAriaLabel: "Custom decrement",
           },
-        })
+        });
 
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        expect(arrowUp.attributes('aria-label')).toBe('Custom increment')
-        expect(arrowDown.attributes('aria-label')).toBe('Custom decrement')
-      })
+        expect(arrowUp.attributes("aria-label")).toBe("Custom increment");
+        expect(arrowDown.attributes("aria-label")).toBe("Custom decrement");
+      });
 
-      it('should disable step controls when disabled', async () => {
+      it("should disable step controls when disabled", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
             disabled: true,
           },
-        })
+        });
 
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        expect(arrowUp.attributes('aria-disabled')).toBe('true')
-        expect(arrowDown.attributes('aria-disabled')).toBe('true')
-        expect(arrowUp.attributes('tabindex')).toBeUndefined()
-        expect(arrowDown.attributes('tabindex')).toBeUndefined()
-      })
+        expect(arrowUp.attributes("aria-disabled")).toBe("true");
+        expect(arrowDown.attributes("aria-disabled")).toBe("true");
+        expect(arrowUp.attributes("tabindex")).toBeUndefined();
+        expect(arrowDown.attributes("tabindex")).toBeUndefined();
+      });
 
-      it('should disable step controls when readonly', async () => {
+      it("should disable step controls when readonly", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
             readonly: true,
           },
-        })
+        });
 
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        expect(arrowUp.attributes('aria-disabled')).toBe('true')
-        expect(arrowDown.attributes('aria-disabled')).toBe('true')
-        expect(arrowUp.attributes('tabindex')).toBeUndefined()
-        expect(arrowDown.attributes('tabindex')).toBeUndefined()
-      })
+        expect(arrowUp.attributes("aria-disabled")).toBe("true");
+        expect(arrowDown.attributes("aria-disabled")).toBe("true");
+        expect(arrowUp.attributes("tabindex")).toBeUndefined();
+        expect(arrowDown.attributes("tabindex")).toBeUndefined();
+      });
 
-      it('should trigger step on Enter key', async () => {
+      it("should trigger step on Enter key", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           },
-        })
+        });
 
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const inputElement = wrapper.find('input')
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const inputElement = wrapper.find("input");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('10,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("10,00");
 
-        await arrowUp.trigger('keydown', { key: 'Enter' })
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('11,00')
-      })
+        await arrowUp.trigger("keydown", { key: "Enter" });
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("11,00");
+      });
 
-      it('should trigger step on Space key', async () => {
+      it("should trigger step on Space key", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           },
-        })
+        });
 
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
-        const inputElement = wrapper.find('input')
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
+        const inputElement = wrapper.find("input");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('10,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("10,00");
 
-        await arrowDown.trigger('keydown', { key: ' ' })
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('9,00')
-      })
-    })
+        await arrowDown.trigger("keydown", { key: " " });
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("9,00");
+      });
+    });
 
-    describe('Valid icon accessibility', () => {
-      it('should display valid icon with aria-hidden when valid is true', async () => {
+    describe("Valid icon accessibility", () => {
+      it("should display valid icon with aria-hidden when valid is true", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
             valid: true,
           },
-        })
+        });
 
-        const validIcon = wrapper.find('.fa-check')
-        expect(validIcon.exists()).toBe(true)
-        expect(validIcon.attributes('aria-hidden')).toBe('true')
-      })
+        const validIcon = wrapper.find(".fa-check");
+        expect(validIcon.exists()).toBe(true);
+        expect(validIcon.attributes("aria-hidden")).toBe("true");
+      });
 
-      it('should display valid icon alongside step controls', async () => {
+      it("should display valid icon alongside step controls", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
             valid: true,
             step: 2,
           },
-        })
+        });
 
-        const validIcon = wrapper.find('.fa-check')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const validIcon = wrapper.find(".fa-check");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        expect(validIcon.exists()).toBe(true)
-        expect(arrowUp.exists()).toBe(true)
-        expect(arrowDown.exists()).toBe(true)
-      })
-    })
-  })
+        expect(validIcon.exists()).toBe(true);
+        expect(arrowUp.exists()).toBe(true);
+        expect(arrowDown.exists()).toBe(true);
+      });
+    });
+  });
 
-  describe('v-model retrocompatibility', () => {
-    it('should accept number values', async () => {
+  describe("v-model retrocompatibility", () => {
+    it("should accept number values", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 123.45,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
         },
-      })
+      });
 
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('123,45')
-    })
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("123,45");
+    });
 
-    it('should accept string values with console.warn', async () => {
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    it("should accept string values with console.warn", async () => {
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
-      let modelValue: number | string | undefined = '123.45'
-      let wrapper: ReturnType<typeof mount> | null = null
+      let modelValue: number | string | undefined = "123.45";
+      let wrapper: ReturnType<typeof mount> | null = null;
       wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue,
-          'onUpdate:modelValue': (e) => {
-            modelValue = e as number
-            if (wrapper) wrapper.setProps({ modelValue })
+          "onUpdate:modelValue": (e) => {
+            modelValue = e as number;
+            if (wrapper) wrapper.setProps({ modelValue });
           },
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
 
       expect(consoleSpy).toHaveBeenCalledWith(
-        expect.stringContaining('[FzCurrencyInput] String values in v-model are deprecated')
-      )
+        expect.stringContaining(
+          "[FzCurrencyInput] String values in v-model are deprecated",
+        ),
+      );
 
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
-      expect(inputElement.element.value).toBe('123,45')
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+      expect(inputElement.element.value).toBe("123,45");
 
-      consoleSpy.mockRestore()
-    })
+      consoleSpy.mockRestore();
+    });
 
-    it('should accept undefined values', async () => {
+    it("should accept undefined values", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: undefined,
-          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+          "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
         },
-      })
+      });
 
-      const inputElement = wrapper.find('input')
-      expect(inputElement.element.value).toBe('')
-    })
+      const inputElement = wrapper.find("input");
+      expect(inputElement.element.value).toBe("");
+    });
 
-    it('should emit number | undefined only', async () => {
-      let emittedValue: number | undefined | string
+    it("should emit number | undefined only", async () => {
+      let emittedValue: number | undefined | string;
 
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: undefined,
-            'onUpdate:modelValue': (e: number | string | null | undefined) => {
-              emittedValue = e as number | undefined
-              wrapper.setProps({ modelValue: e })
-            },
+          "onUpdate:modelValue": (e: number | string | null | undefined) => {
+            emittedValue = e as number | undefined;
+            wrapper.setProps({ modelValue: e });
+          },
         },
-      })
+      });
 
-      const inputElement = wrapper.find('input')
-      await inputElement.setValue('123.45')
-      await inputElement.trigger('input')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      const inputElement = wrapper.find("input");
+      await inputElement.setValue("123.45");
+      await inputElement.trigger("input");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-      expect(typeof emittedValue).toBe('number')
-      expect(emittedValue).toBe(123.45)
-    })
+      expect(typeof emittedValue).toBe("number");
+      expect(emittedValue).toBe(123.45);
+    });
 
-    it('should handle string values with comma as decimal separator (Italian format)', async () => {
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    it("should handle string values with comma as decimal separator (Italian format)", async () => {
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
-      let modelValue: number | string | undefined = '1234,56'
-      let wrapper: ReturnType<typeof mount> | null = null
+      let modelValue: number | string | undefined = "1234,56";
+      let wrapper: ReturnType<typeof mount> | null = null;
       wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue,
-          'onUpdate:modelValue': (e) => {
-            modelValue = e as number
-            if (wrapper) wrapper.setProps({ modelValue })
+          "onUpdate:modelValue": (e) => {
+            modelValue = e as number;
+            if (wrapper) wrapper.setProps({ modelValue });
           },
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-      expect(consoleSpy).toHaveBeenCalled()
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      expect(consoleSpy).toHaveBeenCalled();
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // String with comma as decimal separator should be parsed correctly and formatted with thousand separators
-      expect(inputElement.element.value).toBe('1.234,56')
+      expect(inputElement.element.value).toBe("1.234,56");
 
-      consoleSpy.mockRestore()
-    })
+      consoleSpy.mockRestore();
+    });
 
-    it('should handle string values that would fail with Number() or parseInt/parseFloat', async () => {
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    it("should handle string values that would fail with Number() or parseInt/parseFloat", async () => {
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
       // Simulate the scenario: data[`${firstValue}_amount`] is a string like "1234,56"
       // Number("1234,56") would return NaN, parseFloat would return NaN,
       // parseInt would return 1234 (incorrect, stops at comma)
       // But the component should handle it correctly using its parse function
-      const stringValue = '1234,56'
-      
+      const stringValue = "1234,56";
+
       // Verify that Number() fails with this format (returns NaN)
-      expect(Number(stringValue)).toBeNaN()
+      expect(Number(stringValue)).toBeNaN();
       // parseInt and parseFloat stop at comma, returning only the integer part (incorrect)
-      expect(parseInt(stringValue)).toBe(1234)
-      expect(parseFloat(stringValue)).toBe(1234)
+      expect(parseInt(stringValue)).toBe(1234);
+      expect(parseFloat(stringValue)).toBe(1234);
 
-      let modelValue: number | string | undefined = stringValue
-      let wrapper: ReturnType<typeof mount> | null = null
+      let modelValue: number | string | undefined = stringValue;
+      let wrapper: ReturnType<typeof mount> | null = null;
       wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue,
-          'onUpdate:modelValue': (e) => {
-            modelValue = e as number
-            if (wrapper) wrapper.setProps({ modelValue })
+          "onUpdate:modelValue": (e) => {
+            modelValue = e as number;
+            if (wrapper) wrapper.setProps({ modelValue });
           },
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-      expect(consoleSpy).toHaveBeenCalled()
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      expect(consoleSpy).toHaveBeenCalled();
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // Component should parse and display the value correctly despite Number()/parseFloat failing
       // The component's parse function replaces comma with dot, so "1234,56" becomes 1234.56
       // Then formats with thousand separators
-      expect(inputElement.element.value).toBe('1.234,56')
+      expect(inputElement.element.value).toBe("1.234,56");
 
-      consoleSpy.mockRestore()
-    })
+      consoleSpy.mockRestore();
+    });
 
     it('should correctly parse Italian format string "1.234,56" with thousand separators', async () => {
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
 
       // Test the exact scenario: "1.234,56" should become 1234.56
       // Process: "1.234,56" → remove dots → "1234,56" → replace comma → "1234.56" → 1234.56
-      const stringValue = '1.234,56'
-      
+      const stringValue = "1.234,56";
+
       // Verify that Number() and parseFloat fail with this format
-      expect(Number(stringValue)).toBeNaN()
-      expect(parseFloat(stringValue)).toBe(1.234) // Stops at second dot
+      expect(Number(stringValue)).toBeNaN();
+      expect(parseFloat(stringValue)).toBe(1.234); // Stops at second dot
 
-      let modelValue: number | string | undefined = stringValue
-      let wrapper: ReturnType<typeof mount> | null = null
+      let modelValue: number | string | undefined = stringValue;
+      let wrapper: ReturnType<typeof mount> | null = null;
       wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue,
-          'onUpdate:modelValue': (e) => {
-            modelValue = e as number
-            if (wrapper) wrapper.setProps({ modelValue })
+          "onUpdate:modelValue": (e) => {
+            modelValue = e as number;
+            if (wrapper) wrapper.setProps({ modelValue });
           },
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      await wrapper.vm.$nextTick();
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-      expect(consoleSpy).toHaveBeenCalled()
-      const inputElement = wrapper.find('input')
-      await inputElement.trigger('blur')
-      await new Promise((resolve) => window.setTimeout(resolve, 100))
+      expect(consoleSpy).toHaveBeenCalled();
+      const inputElement = wrapper.find("input");
+      await inputElement.trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
       // Should be formatted as "1.234,56" (Italian format with thousand separators)
-      expect(inputElement.element.value).toBe('1.234,56')
+      expect(inputElement.element.value).toBe("1.234,56");
       // Verify the numeric value in v-model is correct (1234.56)
       // modelValue should be a number after parsing
-      expect(typeof modelValue).toBe('number')
-      expect(modelValue).toBeCloseTo(1234.56, 2)
-
-      consoleSpy.mockRestore()
-    })
-  })
-
-  describe('Edge cases', () => {
-    describe('String values', () => {
-      it('should handle string with non-numeric characters', async () => {
-        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-        let modelValue: number | string | undefined = 'abc123'
-        let wrapper: ReturnType<typeof mount> | null = null
+      expect(typeof modelValue).toBe("number");
+      expect(modelValue).toBeCloseTo(1234.56, 2);
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("Edge cases", () => {
+    describe("String values", () => {
+      it("should handle string with non-numeric characters", async () => {
+        const consoleSpy = vi
+          .spyOn(console, "warn")
+          .mockImplementation(() => {});
+
+        let modelValue: number | string | undefined = "abc123";
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        expect(consoleSpy).toHaveBeenCalled()
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        expect(consoleSpy).toHaveBeenCalled();
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // Non-numeric string should result in empty (undefined)
-        expect(inputElement.element.value).toBe('')
+        expect(inputElement.element.value).toBe("");
 
-        consoleSpy.mockRestore()
-      })
+        consoleSpy.mockRestore();
+      });
 
-      it('should handle string with only non-numeric characters', async () => {
-        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      it("should handle string with only non-numeric characters", async () => {
+        const consoleSpy = vi
+          .spyOn(console, "warn")
+          .mockImplementation(() => {});
 
-        let modelValue: number | string | undefined = 'abc'
-        let wrapper: ReturnType<typeof mount> | null = null
+        let modelValue: number | string | undefined = "abc";
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        expect(consoleSpy).toHaveBeenCalled()
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        expect(consoleSpy).toHaveBeenCalled();
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // Non-numeric string should result in empty (undefined)
-        expect(inputElement.element.value).toBe('')
+        expect(inputElement.element.value).toBe("");
 
-        consoleSpy.mockRestore()
-      })
+        consoleSpy.mockRestore();
+      });
 
-      it('should handle string with negative sign', async () => {
-        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      it("should handle string with negative sign", async () => {
+        const consoleSpy = vi
+          .spyOn(console, "warn")
+          .mockImplementation(() => {});
 
-        let modelValue: number | string | undefined = '-123.45'
-        let wrapper: ReturnType<typeof mount> | null = null
+        let modelValue: number | string | undefined = "-123.45";
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        expect(consoleSpy).toHaveBeenCalled()
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('-123,45')
+        expect(consoleSpy).toHaveBeenCalled();
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("-123,45");
 
-        consoleSpy.mockRestore()
-      })
+        consoleSpy.mockRestore();
+      });
 
-      it('should handle string with thousand separators', async () => {
-        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      it("should handle string with thousand separators", async () => {
+        const consoleSpy = vi
+          .spyOn(console, "warn")
+          .mockImplementation(() => {});
 
-        let modelValue: number | string | undefined = '1.234.567,89'
-        let wrapper: ReturnType<typeof mount> | null = null
+        let modelValue: number | string | undefined = "1.234.567,89";
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        expect(consoleSpy).toHaveBeenCalled()
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        expect(consoleSpy).toHaveBeenCalled();
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // Should be formatted with thousand separators and preserve original decimals
-        expect(inputElement.element.value).toBe('1.234.567,89')
+        expect(inputElement.element.value).toBe("1.234.567,89");
         // Verify the numeric value in v-model is correct
-        expect(typeof modelValue).toBe('number')
-        expect(modelValue).toBeCloseTo(1234567.89, 2)
+        expect(typeof modelValue).toBe("number");
+        expect(modelValue).toBeCloseTo(1234567.89, 2);
 
-        consoleSpy.mockRestore()
-      })
+        consoleSpy.mockRestore();
+      });
 
-      it('should handle empty string', async () => {
-        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      it("should handle empty string", async () => {
+        const consoleSpy = vi
+          .spyOn(console, "warn")
+          .mockImplementation(() => {});
 
-        let modelValue: number | string | undefined = ''
-        let wrapper: ReturnType<typeof mount> | null = null
+        let modelValue: number | string | undefined = "";
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        const inputElement = wrapper.find('input')
-        expect(inputElement.element.value).toBe('')
+        const inputElement = wrapper.find("input");
+        expect(inputElement.element.value).toBe("");
 
-        consoleSpy.mockRestore()
-      })
+        consoleSpy.mockRestore();
+      });
 
-      it('should handle string with only whitespace', async () => {
-        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      it("should handle string with only whitespace", async () => {
+        const consoleSpy = vi
+          .spyOn(console, "warn")
+          .mockImplementation(() => {});
 
-        let modelValue: number | string | undefined = '   '
-        let wrapper: ReturnType<typeof mount> | null = null
+        let modelValue: number | string | undefined = "   ";
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // Whitespace-only string should result in empty (undefined)
-        expect(inputElement.element.value).toBe('')
+        expect(inputElement.element.value).toBe("");
 
-        consoleSpy.mockRestore()
-      })
-    })
+        consoleSpy.mockRestore();
+      });
+    });
 
-    describe('Null values', () => {
-      it('should handle null value', async () => {
-        let modelValue: number | null | undefined = null
-        let wrapper: ReturnType<typeof mount> | null = null
+    describe("Null values", () => {
+      it("should handle null value", async () => {
+        let modelValue: number | null | undefined = null;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number | null | undefined
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number | null | undefined;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('')
-      })
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("");
+      });
 
-      it('should handle nullOnEmpty prop', async () => {
-        let modelValue: number | null | undefined = undefined
-        let wrapper: ReturnType<typeof mount> | null = null
+      it("should handle nullOnEmpty prop", async () => {
+        let modelValue: number | null | undefined = undefined;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
             nullOnEmpty: true,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number | null | undefined
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number | null | undefined;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.setValue('')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.setValue("");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // With nullOnEmpty, empty should emit null (but display as empty)
-        expect(inputElement.element.value).toBe('')
-      })
+        expect(inputElement.element.value).toBe("");
+      });
 
-      it('should preserve zero value when nullOnEmpty is enabled', async () => {
-        let emittedValue: number | undefined
-        let modelValue: number | null | undefined = undefined
-        let wrapper: ReturnType<typeof mount> | null = null
+      it("should preserve zero value when nullOnEmpty is enabled", async () => {
+        let emittedValue: number | undefined;
+        let modelValue: number | null | undefined = undefined;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
             nullOnEmpty: true,
-            'onUpdate:modelValue': (e: number | string | null | undefined) => {
-              emittedValue = e as number | undefined
-              modelValue = e as number | null | undefined
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e: number | string | null | undefined) => {
+              emittedValue = e as number | undefined;
+              modelValue = e as number | null | undefined;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
+
+        const inputElement = wrapper.find("input");
 
-        const inputElement = wrapper.find('input')
-        
         // Set "0" - should remain 0, not become null
-        await inputElement.trigger('focus')
-        await inputElement.setValue('0')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        
-        expect(inputElement.element.value).toBe('0,00')
-        expect(emittedValue).toBe(0)
-        expect(emittedValue).not.toBeNull()
-      })
-
-      it('should preserve zero value with separators when nullOnEmpty is enabled', async () => {
-        let emittedValue: number | undefined
-        let modelValue: number | null | undefined = undefined
-        let wrapper: ReturnType<typeof mount> | null = null
+        await inputElement.trigger("focus");
+        await inputElement.setValue("0");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+
+        expect(inputElement.element.value).toBe("0,00");
+        expect(emittedValue).toBe(0);
+        expect(emittedValue).not.toBeNull();
+      });
+
+      it("should preserve zero value with separators when nullOnEmpty is enabled", async () => {
+        let emittedValue: number | undefined;
+        let modelValue: number | null | undefined = undefined;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
             nullOnEmpty: true,
-            'onUpdate:modelValue': (e: number | string | null | undefined) => {
-              emittedValue = e as number | undefined
-              modelValue = e as number | null | undefined
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e: number | string | null | undefined) => {
+              emittedValue = e as number | undefined;
+              modelValue = e as number | null | undefined;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
+
+        const inputElement = wrapper.find("input");
 
-        const inputElement = wrapper.find('input')
-        
         // Set "0,00" - should remain 0, not become null
-        await inputElement.trigger('focus')
-        await inputElement.setValue('0,00')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        
-        expect(inputElement.element.value).toBe('0,00')
-        expect(emittedValue).toBe(0)
-        expect(emittedValue).not.toBeNull()
-      })
-    })
-
-    describe('Negative values', () => {
-      it('should handle negative number in v-model', async () => {
+        await inputElement.trigger("focus");
+        await inputElement.setValue("0,00");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+
+        expect(inputElement.element.value).toBe("0,00");
+        expect(emittedValue).toBe(0);
+        expect(emittedValue).not.toBeNull();
+      });
+    });
+
+    describe("Negative values", () => {
+      it("should handle negative number in v-model", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: -123.45,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('-123,45')
-      })
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("-123,45");
+      });
 
-      it('should handle negative values with step controls', async () => {
+      it("should handle negative values with step controls", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: -10,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 5,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const inputElement = wrapper.find("input");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('-10,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("-10,00");
 
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('-5,00')
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("-5,00");
 
-        await arrowDown.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('-10,00')
+        await arrowDown.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("-10,00");
 
-        await arrowDown.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('-15,00')
-      })
+        await arrowDown.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("-15,00");
+      });
 
-      it('should handle negative values crossing zero with step controls', async () => {
+      it("should handle negative values crossing zero with step controls", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: -2,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 5,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
+        const inputElement = wrapper.find("input");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('-2,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("-2,00");
 
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('3,00')
-      })
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("3,00");
+      });
 
-      it('should allow typing negative values directly', async () => {
-        let modelValue: number | undefined = undefined
+      it("should allow typing negative values directly", async () => {
+        let modelValue: number | undefined = undefined;
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
+
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("focus");
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('focus')
-        
         // Type negative value
-        await inputElement.setValue('-123,45')
-        await inputElement.trigger('input')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        
+        await inputElement.setValue("-123,45");
+        await inputElement.trigger("input");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+
         // During typing, should show normalized value with minus sign
-        expect(inputElement.element.value).toBe('-123,45')
-        expect(modelValue).toBe(-123.45)
-        
+        expect(inputElement.element.value).toBe("-123,45");
+        expect(modelValue).toBe(-123.45);
+
         // On blur, should format correctly
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('-123,45')
-        expect(modelValue).toBe(-123.45)
-      })
-
-      it('should normalize minus sign to beginning only', async () => {
-        let modelValue: number | undefined = undefined
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("-123,45");
+        expect(modelValue).toBe(-123.45);
+      });
+
+      it("should normalize minus sign to beginning only", async () => {
+        let modelValue: number | undefined = undefined;
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
+
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("focus");
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('focus')
-        
         // Simulate pasting or typing value with minus in middle (should be normalized)
         // This tests normalizeInput function behavior
-        await inputElement.setValue('123-45')
-        await inputElement.trigger('input')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        
+        await inputElement.setValue("123-45");
+        await inputElement.trigger("input");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+
         // Minus in middle should be removed, value should be positive
-        expect(inputElement.element.value).toBe('12345')
-        expect(modelValue).toBe(12345)
-        
+        expect(inputElement.element.value).toBe("12345");
+        expect(modelValue).toBe(12345);
+
         // Test with minus at beginning (should be preserved)
-        await inputElement.setValue('-123,45')
-        await inputElement.trigger('input')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('-123,45')
-        expect(modelValue).toBe(-123.45)
-      })
-    })
-
-    describe('Decimal values', () => {
-      it('should handle values with many decimal places', async () => {
-        let modelValue: number | undefined = 123.456789
-        let wrapper: ReturnType<typeof mount> | null = null
+        await inputElement.setValue("-123,45");
+        await inputElement.trigger("input");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("-123,45");
+        expect(modelValue).toBe(-123.45);
+      });
+    });
+
+    describe("Decimal values", () => {
+      it("should handle values with many decimal places", async () => {
+        let modelValue: number | undefined = 123.456789;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
             maximumFractionDigits: 2,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // Decimals are truncated (not rounded), so 123.456789 -> 123.45 -> 123,45
-        expect(inputElement.element.value).toBe('123,45')
-      })
+        expect(inputElement.element.value).toBe("123,45");
+      });
 
-      it('should handle values with minimumFractionDigits', async () => {
+      it("should handle values with minimumFractionDigits", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 123,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             minimumFractionDigits: 2,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('123,00')
-      })
-    })
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("123,00");
+      });
+    });
 
-    describe('Min/Max constraints with step controls', () => {
-      it('should allow step controls to go below min (clamping happens on blur)', async () => {
+    describe("Min/Max constraints with step controls", () => {
+      it("should allow step controls to go below min (clamping happens on blur)", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             min: 10,
             max: 100,
             step: 2,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const inputElement = wrapper.find("input");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('10,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("10,00");
 
-        await arrowDown.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
+        await arrowDown.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
         // Step controls now apply clamping immediately, so value is clamped to min
-        expect(inputElement.element.value).toBe('10,00')
-        expect(wrapper.props('modelValue')).toBe(10)
+        expect(inputElement.element.value).toBe("10,00");
+        expect(wrapper.props("modelValue")).toBe(10);
 
         // Verify that manually typing below min still gets clamped on blur
-        await inputElement.setValue('8')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('10,00')
-      })
+        await inputElement.setValue("8");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("10,00");
+      });
 
-      it('should clamp step controls to max when they would exceed it', async () => {
+      it("should clamp step controls to max when they would exceed it", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 99,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             min: 10,
             max: 100,
             step: 2,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
+        const inputElement = wrapper.find("input");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('99,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("99,00");
 
         // Click arrow up: 99 + 2 = 101, which exceeds max (100), so should clamp to 100
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
         // Step controls now apply clamping immediately, so value is clamped to max
-        expect(inputElement.element.value).toBe('100,00')
-        expect(wrapper.props('modelValue')).toBe(100)
+        expect(inputElement.element.value).toBe("100,00");
+        expect(wrapper.props("modelValue")).toBe(100);
 
         // Verify that clicking again doesn't go above max
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('100,00')
-        expect(wrapper.props('modelValue')).toBe(100)
-      })
-    })
-
-    describe('Extreme values', () => {
-      it('should handle very large numbers', async () => {
-        let modelValue: number | undefined = 999999999.99
-        let wrapper: ReturnType<typeof mount> | null = null
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("100,00");
+        expect(wrapper.props("modelValue")).toBe(100);
+      });
+    });
+
+    describe("Extreme values", () => {
+      it("should handle very large numbers", async () => {
+        let modelValue: number | undefined = 999999999.99;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // Should be formatted with thousand separators
-        expect(inputElement.element.value).toBe('999.999.999,99')
-      })
+        expect(inputElement.element.value).toBe("999.999.999,99");
+      });
 
-      it('should handle very small numbers', async () => {
+      it("should handle very small numbers", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 0.01,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('0,01')
-      })
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("0,01");
+      });
 
-      it('should handle zero', async () => {
+      it("should handle zero", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 0,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
           },
-        })
-
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('0,00')
-      })
-    })
-
-    describe('Step quantization edge cases', () => {
-      it('should handle forceStep with negative values', async () => {
-        let modelValue: number | undefined = -3
-        let wrapper: ReturnType<typeof mount> | null = null
+        });
+
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("0,00");
+      });
+    });
+
+    describe("Step quantization edge cases", () => {
+      it("should handle forceStep with negative values", async () => {
+        let modelValue: number | undefined = -3;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
             step: 4,
             forceStep: true,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.setValue('-3')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.setValue("-3");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // -3 with step 4: remainder is -3, which is 3 in absolute value
         // 3 >= 2 (step/2), so rounds to -3 + (-4) - (-3) = -4
         // But actually, -3 is closer to 0 than to -4, so it might round to 0 or stay -3
         // Let's check the actual behavior: -3 % 4 = -3, Math.abs(-3) = 3, 3 >= 2, so -3 + (-4) - (-3) = -4
         // However, the actual implementation might behave differently
         // Testing actual behavior: if it stays -3, that's because the rounding logic might be different
-        const actualValue = inputElement.element.value
+        const actualValue = inputElement.element.value;
         // Accept either -3, -4, 0, or 4 depending on implementation
-        expect(['-3,00', '-4,00', '-0,00', '0,00', '4,00']).toContain(actualValue)
-      })
+        expect(["-3,00", "-4,00", "-0,00", "0,00", "4,00"]).toContain(
+          actualValue,
+        );
+      });
 
-      it('should handle forceStep with value exactly on step', async () => {
+      it("should handle forceStep with value exactly on step", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 8,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 4,
             forceStep: true,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('8,00')
-      })
+        const inputElement = wrapper.find("input");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("8,00");
+      });
 
-      it('should handle forceStep with decimal step', async () => {
-        let modelValue: number | undefined = 1.3
-        let wrapper: ReturnType<typeof mount> | null = null
+      it("should handle forceStep with decimal step", async () => {
+        let modelValue: number | undefined = 1.3;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
             step: 0.5,
             forceStep: true,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.setValue('1.3')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.setValue("1.3");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // 1.3 with step 0.5: remainder is 0.3, which is < 0.25 (step/2), so rounds down to 1.0
         // Actually: 1.3 % 0.5 = 0.3, Math.abs(0.3) = 0.3, 0.3 >= 0.25, so rounds up to 1.5
-        expect(inputElement.element.value).toBe('1,50')
-      })
+        expect(inputElement.element.value).toBe("1,50");
+      });
 
-      it('should handle forceStep with decimal value and integer step', async () => {
-        let modelValue: number | undefined = 1.7
-        let wrapper: ReturnType<typeof mount> | null = null
+      it("should handle forceStep with decimal value and integer step", async () => {
+        let modelValue: number | undefined = 1.7;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
             step: 2,
             forceStep: true,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.setValue('1.7')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.setValue("1.7");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // 1.7 with step 2: remainder is 1.7, which is < 1 (step/2), so rounds down to 0
         // Actually: 1.7 % 2 = 1.7, Math.abs(1.7) = 1.7, 1.7 >= 1, so rounds up to 2
-        expect(inputElement.element.value).toBe('2,00')
-      })
+        expect(inputElement.element.value).toBe("2,00");
+      });
 
-      it('should handle step controls with decimal step', async () => {
+      it("should handle step controls with decimal step", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10.5,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 0.25,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const inputElement = wrapper.find("input");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('10,50')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("10,50");
 
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('10,75')
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("10,75");
 
-        await arrowDown.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('10,50')
-      })
+        await arrowDown.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("10,50");
+      });
 
-      it('should handle step controls producing decimal values', async () => {
+      it("should handle step controls producing decimal values", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 10,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 0.1,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
+        const inputElement = wrapper.find("input");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('10,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("10,00");
 
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('10,10')
-      })
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("10,10");
+      });
 
-      it('should handle forceStep with small decimal step', async () => {
+      it("should handle forceStep with small decimal step", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 1.23,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 0.01,
             forceStep: true,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.setValue('1.23')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.setValue("1.23");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // 1.23 with step 0.01: should round to nearest 0.01, which is 1.23 itself
-        expect(inputElement.element.value).toBe('1,23')
-      })
+        expect(inputElement.element.value).toBe("1,23");
+      });
 
-      it('should handle forceStep rounding decimal to nearest step', async () => {
-        let modelValue: number | undefined = 1.234
-        let wrapper: ReturnType<typeof mount> | null = null
+      it("should handle forceStep rounding decimal to nearest step", async () => {
+        let modelValue: number | undefined = 1.234;
+        let wrapper: ReturnType<typeof mount> | null = null;
         wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+            "onUpdate:modelValue": (e) => {
+              modelValue = e as number;
+              if (wrapper) wrapper.setProps({ modelValue });
             },
             step: 0.05,
             forceStep: true,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        await inputElement.setValue('1.234')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        const inputElement = wrapper.find("input");
+        await inputElement.setValue("1.234");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // 1.234 with step 0.05: rounds to nearest step multiple
         // The actual behavior rounds to 1.25 (closer to 1.25 than to 1.20)
-        expect(inputElement.element.value).toBe('1,25')
-      })
+        expect(inputElement.element.value).toBe("1,25");
+      });
 
-      it('should round invalid step value on blur (e.g., 3 with step 2)', async () => {
+      it("should round invalid step value on blur (e.g., 3 with step 2)", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: undefined,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 2,
             forceStep: true,
             min: 0,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
+        const inputElement = wrapper.find("input");
         // User types "3" which is not a valid step (step is 2)
-        await inputElement.setValue('3')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await inputElement.setValue("3");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // 3 with step 2: remainder is 1, which is >= 1 (step/2), so rounds up to 4
-        expect(inputElement.element.value).toBe('4,00')
-        expect(wrapper.props('modelValue')).toBe(4)
-      })
+        expect(inputElement.element.value).toBe("4,00");
+        expect(wrapper.props("modelValue")).toBe(4);
+      });
 
-      it('should round invalid step value down when closer to lower step', async () => {
+      it("should round invalid step value down when closer to lower step", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: undefined,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 2,
             forceStep: true,
             min: 0,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
+        const inputElement = wrapper.find("input");
         // User types "1" which is not a valid step (step is 2)
-        await inputElement.setValue('1')
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+        await inputElement.setValue("1");
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
         // 1 with step 2: remainder is 1, which is >= 1 (step/2), so rounds up to 2
         // Actually: 1 % 2 = 1, Math.abs(1) = 1, 1 >= 1, so rounds up to 2
-        expect(inputElement.element.value).toBe('2,00')
-        expect(wrapper.props('modelValue')).toBe(2)
-      })
+        expect(inputElement.element.value).toBe("2,00");
+        expect(wrapper.props("modelValue")).toBe(2);
+      });
 
-      it('should increment value correctly with step arrows when forceStep is true', async () => {
+      it("should increment value correctly with step arrows when forceStep is true", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 0,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 2,
             forceStep: true,
             min: 0,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const inputElement = wrapper.find("input");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('0,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("0,00");
 
         // Click arrow up: should increment by step (2)
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('2,00')
-        expect(wrapper.props('modelValue')).toBe(2)
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("2,00");
+        expect(wrapper.props("modelValue")).toBe(2);
 
         // Click arrow up again: should increment by step (2) to 4
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('4,00')
-        expect(wrapper.props('modelValue')).toBe(4)
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("4,00");
+        expect(wrapper.props("modelValue")).toBe(4);
 
         // Click arrow down: should decrement by step (2) to 2
-        await arrowDown.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('2,00')
-        expect(wrapper.props('modelValue')).toBe(2)
-      })
-
-      it('should increment value correctly with step arrows when forceStep is false', async () => {
+        await arrowDown.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("2,00");
+        expect(wrapper.props("modelValue")).toBe(2);
+      });
+
+      it("should increment value correctly with step arrows when forceStep is false", async () => {
         const wrapper = mount(FzCurrencyInput, {
           props: {
-            label: 'Label',
+            label: "Label",
             modelValue: 1,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+            "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
             step: 2,
             forceStep: false,
             min: 0,
           },
-        })
+        });
 
-        const inputElement = wrapper.find('input')
-        const arrowUp = wrapper.find('.fz__currencyinput__arrowup')
-        const arrowDown = wrapper.find('.fz__currencyinput__arrowdown')
+        const inputElement = wrapper.find("input");
+        const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+        const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
 
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
-        expect(inputElement.element.value).toBe('1,00')
+        await inputElement.trigger("blur");
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+        expect(inputElement.element.value).toBe("1,00");
 
         // Click arrow up: should increment by step (2) from current value (1) to 3
-        await arrowUp.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('3,00')
-        expect(wrapper.props('modelValue')).toBe(3)
+        await arrowUp.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("3,00");
+        expect(wrapper.props("modelValue")).toBe(3);
 
         // Click arrow down: should decrement by step (2) from current value (3) to 1
-        await arrowDown.trigger('click')
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 150))
-        expect(inputElement.element.value).toBe('1,00')
-        expect(wrapper.props('modelValue')).toBe(1)
-      })
-    })
-
-    describe('Floating-point precision (regression)', () => {
+        await arrowDown.trigger("click");
+        await wrapper.vm.$nextTick();
+        await new Promise((resolve) => window.setTimeout(resolve, 150));
+        expect(inputElement.element.value).toBe("1,00");
+        expect(wrapper.props("modelValue")).toBe(1);
+      });
+    });
+
+    describe("Floating-point precision (regression)", () => {
       it.each([
-        ['40,30', 40.3, '40,30'],
-        ['40,20', 40.2, '40,20'],
-        ['40,40', 40.4, '40,40'],
-        ['299,96', 299.96, '299,96'],
-        ['0,30', 0.3, '0,30'],
-        ['10,30', 10.3, '10,30'],
-        ['99,99', 99.99, '99,99'],
-      ])('should preserve "%s" without floating-point drift', async (input, expectedModel, expectedDisplay) => {
-        let modelValue: number | string | undefined = undefined
-        let wrapper: ReturnType<typeof mount> | null = null
-        wrapper = mount(FzCurrencyInput, {
-          props: {
-            label: 'Label',
-            modelValue,
-            'onUpdate:modelValue': (e) => {
-              modelValue = e as number
-              if (wrapper) wrapper.setProps({ modelValue })
+        ["40,30", 40.3, "40,30"],
+        ["40,20", 40.2, "40,20"],
+        ["40,40", 40.4, "40,40"],
+        ["299,96", 299.96, "299,96"],
+        ["0,30", 0.3, "0,30"],
+        ["10,30", 10.3, "10,30"],
+        ["99,99", 99.99, "99,99"],
+      ])(
+        'should preserve "%s" without floating-point drift',
+        async (input, expectedModel, expectedDisplay) => {
+          let modelValue: number | string | undefined = undefined;
+          let wrapper: ReturnType<typeof mount> | null = null;
+          wrapper = mount(FzCurrencyInput, {
+            props: {
+              label: "Label",
+              modelValue,
+              "onUpdate:modelValue": (e) => {
+                modelValue = e as number;
+                if (wrapper) wrapper.setProps({ modelValue });
+              },
             },
-          },
-        })
+          });
 
-        const inputElement = wrapper.find('input')
+          const inputElement = wrapper.find("input");
 
-        // Focus, type the value, blur
-        await inputElement.trigger('focus')
-        await inputElement.setValue(input)
-        await wrapper.vm.$nextTick()
-        await inputElement.trigger('blur')
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+          // Focus, type the value, blur
+          await inputElement.trigger("focus");
+          await inputElement.setValue(input);
+          await wrapper.vm.$nextTick();
+          await inputElement.trigger("blur");
+          await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        expect(wrapper.props('modelValue')).toBe(expectedModel)
-        expect(inputElement.element.value).toBe(expectedDisplay)
-      })
+          expect(wrapper.props("modelValue")).toBe(expectedModel);
+          expect(inputElement.element.value).toBe(expectedDisplay);
+        },
+      );
 
       it.each([
-        [40.3, '40,30'],
-        [40.2, '40,20'],
-        [40.4, '40,40'],
-        [299.96, '299,96'],
-        [1234567.89, '1.234.567,89'],
-      ])('should display correct raw value on focus for v-model %f', async (numericValue, expectedRaw) => {
-        const wrapper = mount(FzCurrencyInput, {
-          props: {
-            label: 'Label',
-            modelValue: numericValue,
-            'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
-          },
-        })
+        [40.3, "40,30"],
+        [40.2, "40,20"],
+        [40.4, "40,40"],
+        [299.96, "299,96"],
+        [1234567.89, "1.234.567,89"],
+      ])(
+        "should display correct raw value on focus for v-model %f",
+        async (numericValue, expectedRaw) => {
+          const wrapper = mount(FzCurrencyInput, {
+            props: {
+              label: "Label",
+              modelValue: numericValue,
+              "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+            },
+          });
 
-        await wrapper.vm.$nextTick()
-        await new Promise((resolve) => window.setTimeout(resolve, 100))
+          await wrapper.vm.$nextTick();
+          await new Promise((resolve) => window.setTimeout(resolve, 100));
 
-        const inputElement = wrapper.find('input')
+          const inputElement = wrapper.find("input");
 
-        // Focus to see raw value (without thousand separators)
-        await inputElement.trigger('focus')
-        await wrapper.vm.$nextTick()
+          // Focus to see raw value (without thousand separators)
+          await inputElement.trigger("focus");
+          await wrapper.vm.$nextTick();
 
-        const rawExpected = expectedRaw.replace(/\./g, '')
-        expect(inputElement.element.value).toBe(rawExpected)
-      })
-    })
-  })
+          const rawExpected = expectedRaw.replace(/\./g, "");
+          expect(inputElement.element.value).toBe(rawExpected);
+        },
+      );
+    });
+  });
 
-  describe('Slot forwarding', () => {
-    it('should not render empty help text span when helpText slot is not provided', async () => {
+  describe("Slot forwarding", () => {
+    it("should not render empty help text span when helpText slot is not provided", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick();
 
-      const helpSpan = wrapper.find(`[id$="-help"]`)
-      expect(helpSpan.exists()).toBe(false)
-    })
+      const helpSpan = wrapper.find(`[id$="-help"]`);
+      expect(helpSpan.exists()).toBe(false);
+    });
 
-    it('should render help text span when helpText slot is provided', async () => {
+    it("should render help text span when helpText slot is provided", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
         },
         slots: {
-          helpText: 'Enter an amount',
+          helpText: "Enter an amount",
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick();
 
-      const helpSpan = wrapper.find(`[id$="-help"]`)
-      expect(helpSpan.exists()).toBe(true)
-      expect(helpSpan.text()).toContain('Enter an amount')
-    })
+      const helpSpan = wrapper.find(`[id$="-help"]`);
+      expect(helpSpan.exists()).toBe(true);
+      expect(helpSpan.text()).toContain("Enter an amount");
+    });
 
-    it('should render label from label prop when label slot is not provided', async () => {
+    it("should render label from label prop when label slot is not provided", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Amount',
+          label: "Amount",
           modelValue: 10,
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick();
 
-      const label = wrapper.find('label')
-      expect(label.exists()).toBe(true)
-      expect(label.text()).toContain('Amount')
-    })
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.text()).toContain("Amount");
+    });
 
-    it('should render custom label slot instead of label prop', async () => {
+    it("should render custom label slot instead of label prop", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Amount',
+          label: "Amount",
           modelValue: 10,
         },
         slots: {
-          label: '<strong>Custom Label</strong>',
+          label: "<strong>Custom Label</strong>",
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick();
 
-      const strong = wrapper.find('strong')
-      expect(strong.exists()).toBe(true)
-      expect(strong.text()).toBe('Custom Label')
+      const strong = wrapper.find("strong");
+      expect(strong.exists()).toBe(true);
+      expect(strong.text()).toBe("Custom Label");
 
-      const defaultLabel = wrapper.find('label')
-      expect(defaultLabel.exists()).toBe(false)
-    })
+      const defaultLabel = wrapper.find("label");
+      expect(defaultLabel.exists()).toBe(false);
+    });
 
-    it('should not render error message container when errorMessage slot is not provided', async () => {
+    it("should not render error message container when errorMessage slot is not provided", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
           error: true,
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick();
 
-      const errorContainer = wrapper.find('[role="alert"]')
-      expect(errorContainer.exists()).toBe(false)
-    })
+      const errorContainer = wrapper.find('[role="alert"]');
+      expect(errorContainer.exists()).toBe(false);
+    });
 
-    it('should render error message when error is true and errorMessage slot is provided', async () => {
+    it("should render error message when error is true and errorMessage slot is provided", async () => {
       const wrapper = mount(FzCurrencyInput, {
         props: {
-          label: 'Label',
+          label: "Label",
           modelValue: 10,
           error: true,
         },
         slots: {
-          errorMessage: 'Invalid amount',
+          errorMessage: "Invalid amount",
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      const errorContainer = wrapper.find('[role="alert"]');
+      expect(errorContainer.exists()).toBe(true);
+      expect(errorContainer.text()).toContain("Invalid amount");
+    });
+  });
+
+  describe("Clearable", () => {
+    it("does not show clear icon when clearable is false (default)", () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: "Label",
+          modelValue: 100,
+        },
+      });
+
+      expect(wrapper.find('[aria-label="Cancella"]').exists()).toBe(false);
+    });
+
+    it("shows clear icon when clearable is true and model has value", async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: "Label",
+          clearable: true,
+          modelValue: 100,
+        },
+      });
+
+      await wrapper.find("input").trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+
+      expect(wrapper.find('[aria-label="Cancella"]').exists()).toBe(true);
+    });
+
+    it("does not show clear icon when clearable is true but model is empty", () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: "Label",
+          clearable: true,
+          modelValue: undefined,
+        },
+      });
+
+      expect(wrapper.find('[aria-label="Cancella"]').exists()).toBe(false);
+    });
+
+    it("clears model when clear icon is clicked", async () => {
+      let modelValue: number | undefined = 100;
+      let wrapper: ReturnType<typeof mount> | null = null;
+      wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: "Label",
+          clearable: true,
+          modelValue,
+          "onUpdate:modelValue": (e) => {
+            modelValue = e as number;
+            if (wrapper) wrapper.setProps({ modelValue });
+          },
         },
-      })
+      });
+
+      await wrapper.find("input").trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
+
+      await wrapper.find('[aria-label="Cancella"]').trigger("click");
+      await wrapper.vm.$nextTick();
 
-      await wrapper.vm.$nextTick()
+      expect(wrapper.emitted("fzcurrencyinput:clear")).toBeTruthy();
+    });
+
+    it("coexists with step controls", async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: "Label",
+          clearable: true,
+          modelValue: 100,
+        },
+      });
 
-      const errorContainer = wrapper.find('[role="alert"]')
-      expect(errorContainer.exists()).toBe(true)
-      expect(errorContainer.text()).toContain('Invalid amount')
-    })
-  })
-})
+      await wrapper.find("input").trigger("blur");
+      await new Promise((resolve) => window.setTimeout(resolve, 100));
 
+      expect(wrapper.find('[aria-label="Cancella"]').exists()).toBe(true);
+      expect(wrapper.find(".fz__currencyinput__arrowup").exists()).toBe(true);
+      expect(wrapper.find(".fz__currencyinput__arrowdown").exists()).toBe(true);
+    });
+  });
+});