@fiscozen/tab 0.1.12 → 2.0.0

package/src/__tests__/FzTabs.spec.ts

@@ -1,8 +1,8 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { h } from 'vue'
-import { FzTab, FzTabs } from '..'
-import { FzTabProps, FzTabsProps } from '../types'
+import { mount } from "@vue/test-utils";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { h } from "vue";
+import { FzTab, FzTabs } from "..";
+import { FzTabProps, FzTabsProps } from "../types";
 
 const createWrapper = async (
   props: FzTabsProps,
@@ -10,9 +10,12 @@ const createWrapper = async (
   tab2Props: FzTabProps,
   tab3Props?: FzTabProps,
 ) => {
-  const tabs = [h(FzTab, tab1Props, 'Content tab1'), h(FzTab, tab2Props, 'Content tab2')]
+  const tabs = [
+    h(FzTab, tab1Props, "Content tab1"),
+    h(FzTab, tab2Props, "Content tab2"),
+  ];
   if (tab3Props) {
-    tabs.push(h(FzTab, tab3Props, 'Content tab3'))
+    tabs.push(h(FzTab, tab3Props, "Content tab3"));
   }
 
   const content = mount(FzTabs, {
@@ -20,19 +23,29 @@ const createWrapper = async (
     slots: {
       default: () => tabs,
     },
-  })
+  });
 
-  await content.vm.$nextTick()
-  return content
-}
+  await content.vm.$nextTick();
+  return content;
+};
 
-describe('FzTabs', () => {
+describe("FzTabs", () => {
   beforeEach(() => {
-    globalThis.HTMLElement.prototype.scrollIntoView = vi.fn()
-    vi.spyOn(console, 'warn').mockImplementation(() => {})
+    globalThis.HTMLElement.prototype.scrollIntoView = vi.fn();
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    // Mock IntersectionObserver
+    Object.defineProperty(window, "IntersectionObserver", {
+      writable: true,
+      value: vi.fn().mockImplementation(() => ({
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      })),
+    });
 
     // Mock matchMedia for useMediaQuery composable
-    Object.defineProperty(window, 'matchMedia', {
+    Object.defineProperty(window, "matchMedia", {
       writable: true,
       value: vi.fn().mockImplementation((query) => ({
         matches: false,
@@ -44,1150 +57,1417 @@ describe('FzTabs', () => {
         removeEventListener: vi.fn(),
         dispatchEvent: vi.fn(),
       })),
-    })
-  })
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
 
   // ============================================
   // RENDERING TESTS
   // ============================================
-  describe('Rendering', () => {
-    it('should render with default props', async () => {
+  describe("Rendering", () => {
+    it("should render with default props", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('.tab-container').exists()).toBe(true)
-    })
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.find(".tab-container").exists()).toBe(true);
+    });
 
-    it('should render tab buttons', async () => {
+    it("should render tab buttons", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons.length).toBeGreaterThanOrEqual(2)
-      expect(buttons[0].attributes('title')).toBe('tab1')
-      expect(buttons[1].attributes('title')).toBe('tab2')
-    })
+      const buttons = wrapper.findAll("button");
+      expect(buttons.length).toBeGreaterThanOrEqual(2);
+      expect(buttons[0].attributes("title")).toBe("tab1");
+      expect(buttons[1].attributes("title")).toBe("tab2");
+    });
 
-    it('should render tab content for selected tab', async () => {
+    it("should render tab content for selected tab", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.text()).toContain('Content tab1')
-      expect(wrapper.text()).not.toContain('Content tab2')
-    })
+      expect(wrapper.text()).toContain("Content tab1");
+      expect(wrapper.text()).not.toContain("Content tab2");
+    });
 
-    it('should render tabs-container-end slot', async () => {
+    it("should render tabs-container-end slot", async () => {
       const wrapper = mount(FzTabs, {
         props: {
-          size: 'sm',
+          size: "sm",
         },
         slots: {
-          default: () => [h(FzTab, { title: 'tab1' }, 'Content tab1')],
-          'tabs-container-end': '<div class="custom-end">End</div>',
+          default: () => [h(FzTab, { title: "tab1" }, "Content tab1")],
+          "tabs-container-end": '<div class="custom-end">End</div>',
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
-      expect(wrapper.find('.custom-end').exists()).toBe(true)
-    })
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find(".custom-end").exists()).toBe(true);
+    });
 
-    it('should render tabs-end slot', async () => {
+    it("should render tabs-end slot", async () => {
       const wrapper = mount(FzTabs, {
         props: {
-          size: 'sm',
+          size: "sm",
         },
         slots: {
-          default: () => [h(FzTab, { title: 'tab1' }, 'Content tab1')],
-          'tabs-end': '<div class="custom-tabs-end">Tabs End</div>',
+          default: () => [h(FzTab, { title: "tab1" }, "Content tab1")],
+          "tabs-end": '<div class="custom-tabs-end">Tabs End</div>',
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
-      expect(wrapper.find('.custom-tabs-end').exists()).toBe(true)
-    })
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find(".custom-tabs-end").exists()).toBe(true);
+    });
 
-    it('should render selected tab content slot', async () => {
+    it("should render selected tab content slot", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
       const slotWrapper = mount(FzTabs, {
         props: {
-          size: 'sm',
+          size: "sm",
         },
         slots: {
-          default: () => [h(FzTab, { title: 'tab1' }, 'Content tab1')],
+          default: () => [h(FzTab, { title: "tab1" }, "Content tab1")],
         },
         scopedSlots: {
-          selected: (props: { selected: string }) => `Selected: ${props.selected}`,
+          selected: (props: { selected: string }) =>
+            `Selected: ${props.selected}`,
         },
-      })
+      });
 
-      await slotWrapper.vm.$nextTick()
+      await slotWrapper.vm.$nextTick();
       // Note: scopedSlots may not work exactly like this in Vue 3, but testing structure
-      expect(slotWrapper.exists()).toBe(true)
-    })
-  })
+      expect(slotWrapper.exists()).toBe(true);
+    });
+  });
 
   // ============================================
   // PROPS TESTS
   // ============================================
-  describe('Props', () => {
-    describe('size prop', () => {
-      it('should apply sm size classes', async () => {
+  describe("Props", () => {
+    describe("size prop (deprecated)", () => {
+      it("should apply default size classes (size prop is deprecated)", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const button = wrapper.find('button')
-        expect(button.classes()).toContain('text-sm')
-        expect(button.classes()).toContain('h-40')
-        expect(button.classes()).toContain('gap-6')
-        expect(button.classes()).toContain('py-8')
-        expect(button.classes()).toContain('px-12')
-      })
+        const button = wrapper.find("button");
+        // Size prop is deprecated - component uses default sizing
+        expect(button.classes()).toContain("text-md");
+        expect(button.classes()).toContain("h-40");
+        expect(button.classes()).toContain("gap-8");
+        expect(button.classes()).toContain("py-8");
+        expect(button.classes()).toContain("px-12");
+      });
 
-      it('should apply md size classes', async () => {
+      it("should apply default size classes when md size is passed (deprecated)", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'md',
+            size: "md",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const button = wrapper.find('button')
-        expect(button.classes()).toContain('text-md')
-        expect(button.classes()).toContain('gap-8')
-        expect(button.classes()).toContain('py-12')
-        expect(button.classes()).toContain('px-14')
-      })
-    })
+        const button = wrapper.find("button");
+        // Size prop is deprecated - component uses default sizing
+        expect(button.classes()).toContain("text-md");
+        expect(button.classes()).toContain("gap-8");
+        expect(button.classes()).toContain("py-8");
+        expect(button.classes()).toContain("px-12");
+      });
+    });
 
-    describe('vertical prop', () => {
-      it('should apply horizontal layout by default', async () => {
+    describe("vertical prop", () => {
+      it("should apply horizontal layout by default", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
             vertical: false,
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const container = wrapper.find('.tab-container')
-        expect(container.classes()).toContain('flex-row')
-        expect(wrapper.find('.flex-col').exists()).toBe(true) // wrapper class
-      })
+        const container = wrapper.find(".tab-container");
+        expect(container.classes()).toContain("flex-row");
+        expect(wrapper.find(".flex-col").exists()).toBe(true); // wrapper class
+      });
 
-      it('should apply vertical layout when true', async () => {
+      it("should apply vertical layout when true", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
             vertical: true,
           },
           {
-            title: 'tab1',
-          },
-          {
-            title: 'tab2',
-          },
-        )
-
-        const container = wrapper.find('.tab-container')
-        expect(container.classes()).toContain('flex-col')
-        expect(wrapper.find('.flex-row').exists()).toBe(true) // wrapper class
-      })
-    })
-
-    describe('horizontalOverflow prop', () => {
-      it('should show tab buttons when horizontalOverflow is false and not overflowing', async () => {
-        const wrapper = await createWrapper(
-          {
-            size: 'sm',
-            horizontalOverflow: false,
-          },
-          {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        // When not overflowing, should show FzTabButton components
-        const buttons = wrapper.findAll('button[title]')
-        expect(buttons.length).toBeGreaterThanOrEqual(2)
-      })
-    })
+        const container = wrapper.find(".tab-container");
+        expect(container.classes()).toContain("flex-col");
+        expect(wrapper.find(".flex-row").exists()).toBe(true); // wrapper class
+      });
+    });
 
-    describe('FzTab props', () => {
-      it('should render tab with icon', async () => {
+    describe("FzTab props", () => {
+      it("should render tab with icon", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
-            icon: 'bell',
+            title: "tab1",
+            icon: "bell",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const icon = wrapper.findComponent({ name: 'FzIcon' })
-        expect(icon.exists()).toBe(true)
-      })
+        const icon = wrapper.findComponent({ name: "FzIcon" });
+        expect(icon.exists()).toBe(true);
+      });
 
-      it('should render tab with badgeContent', async () => {
+      it("should render tab with badgeContent", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
-            badgeContent: '5',
+            title: "tab1",
+            badgeContent: "5",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const badge = wrapper.findComponent({ name: 'FzBadge' })
-        expect(badge.exists()).toBe(true)
-        expect(badge.text()).toBe('5')
-      })
+        const badge = wrapper.findComponent({ name: "FzBadge" });
+        expect(badge.exists()).toBe(true);
+        expect(badge.text()).toBe("5");
+      });
 
-      it('should render disabled tab', async () => {
+      it("should render disabled tab", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
             disabled: true,
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const button = wrapper.find('button[title="tab1"]')
-        expect(button.classes()).toContain('cursor-not-allowed')
-      })
+        const button = wrapper.find('button[title="tab1"]');
+        expect(button.classes()).toContain("cursor-not-allowed");
+      });
 
-      it('should select tab with initialSelected prop', async () => {
+      it("should select tab with initialSelected prop", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
             initialSelected: true,
           },
-        )
+        );
 
-        expect(wrapper.text()).toContain('Content tab2')
-        expect(wrapper.text()).not.toContain('Content tab1')
-      })
-    })
-  })
+        expect(wrapper.text()).toContain("Content tab2");
+        expect(wrapper.text()).not.toContain("Content tab1");
+      });
+    });
+  });
 
   // ============================================
   // EVENTS TESTS
   // ============================================
-  describe('Events', () => {
-    it('should emit change event when tab is clicked', async () => {
+  describe("Events", () => {
+    it("should emit change event when tab is clicked", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const tab2Button = wrapper.find('button[title="tab2"]')
-      await tab2Button.trigger('click')
+      const tab2Button = wrapper.find('button[title="tab2"]');
+      await tab2Button.trigger("click");
 
-      expect(wrapper.emitted('change')).toBeTruthy()
+      expect(wrapper.emitted("change")).toBeTruthy();
       // Change event is emitted on mount (tab1) and on click (tab2)
-      const changeEvents = wrapper.emitted('change')!
-      expect(changeEvents[changeEvents.length - 1]).toEqual(['tab2'])
-    })
+      // Event payload: [title, buttonElement]
+      const changeEvents = wrapper.emitted("change")!;
+      expect(changeEvents[changeEvents.length - 1][0]).toBe("tab2");
+    });
 
-    it('should emit change event with correct tab title', async () => {
+    it("should emit change event with correct tab title", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
         {
-          title: 'tab3',
+          title: "tab3",
         },
-      )
+      );
 
-      const tab3Button = wrapper.find('button[title="tab3"]')
-      await tab3Button.trigger('click')
+      const tab3Button = wrapper.find('button[title="tab3"]');
+      await tab3Button.trigger("click");
 
       // Change event is emitted on mount (tab1) and on click (tab3)
-      const changeEvents = wrapper.emitted('change')!
-      expect(changeEvents[changeEvents.length - 1]).toEqual(['tab3'])
-    })
+      // Event payload: [title, buttonElement]
+      const changeEvents = wrapper.emitted("change")!;
+      expect(changeEvents[changeEvents.length - 1][0]).toBe("tab3");
+    });
 
-    it('should not emit change event when disabled tab is clicked', async () => {
+    it("should not emit change event when disabled tab is clicked", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
           disabled: true,
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const tab1Button = wrapper.find('button[title="tab1"]')
-      const initialEmitted = wrapper.emitted('change')?.length || 0
-      await tab1Button.trigger('click')
+      const tab1Button = wrapper.find('button[title="tab1"]');
+      const initialEmitted = wrapper.emitted("change")?.length || 0;
+      await tab1Button.trigger("click");
 
       // Should not emit change event for disabled tab
-      const finalEmitted = wrapper.emitted('change')?.length || 0
-      expect(finalEmitted).toBe(initialEmitted)
-    })
+      const finalEmitted = wrapper.emitted("change")?.length || 0;
+      expect(finalEmitted).toBe(initialEmitted);
+    });
 
-    it('should update selected tab content when change event is emitted', async () => {
+    it("should update selected tab content when change event is emitted", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.text()).toContain('Content tab1')
-      expect(wrapper.text()).not.toContain('Content tab2')
+      expect(wrapper.text()).toContain("Content tab1");
+      expect(wrapper.text()).not.toContain("Content tab2");
 
-      const tab2Button = wrapper.find('button[title="tab2"]')
-      await tab2Button.trigger('click')
-      await wrapper.vm.$nextTick()
+      const tab2Button = wrapper.find('button[title="tab2"]');
+      await tab2Button.trigger("click");
+      await wrapper.vm.$nextTick();
 
-      expect(wrapper.text()).toContain('Content tab2')
-      expect(wrapper.text()).not.toContain('Content tab1')
-    })
+      expect(wrapper.text()).toContain("Content tab2");
+      expect(wrapper.text()).not.toContain("Content tab1");
+    });
 
-    it('should emit change event on mount with initial selected tab', async () => {
+    it("should emit change event on mount with initial selected tab", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
       // Change event should be emitted on mount with the initially selected tab
-      expect(wrapper.emitted('change')).toBeTruthy()
-      const changeEvents = wrapper.emitted('change')!
-      expect(changeEvents[0]).toEqual(['tab1'])
-    })
+      // Event payload: [title, buttonElement]
+      expect(wrapper.emitted("change")).toBeTruthy();
+      const changeEvents = wrapper.emitted("change")!;
+      expect(changeEvents[0][0]).toBe("tab1");
+    });
 
-    it('should emit change event with initialSelected tab on mount', async () => {
+    it("should emit change event with initialSelected tab on mount", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
           initialSelected: true,
         },
-      )
+      );
 
       // Change event should be emitted on mount with the tab marked as initialSelected
-      expect(wrapper.emitted('change')).toBeTruthy()
-      const changeEvents = wrapper.emitted('change')!
-      expect(changeEvents[0]).toEqual(['tab2'])
-    })
+      // Event payload: [title, buttonElement]
+      expect(wrapper.emitted("change")).toBeTruthy();
+      const changeEvents = wrapper.emitted("change")!;
+      expect(changeEvents[0][0]).toBe("tab2");
+    });
 
-    it('should emit change event payload as string (tab title)', async () => {
+    it("should emit change event payload with title and button element", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const tab2Button = wrapper.find('button[title="tab2"]')
-      await tab2Button.trigger('click')
+      const tab2Button = wrapper.find('button[title="tab2"]');
+      await tab2Button.trigger("click");
 
-      const changeEvents = wrapper.emitted('change')!
-      const lastEvent = changeEvents[changeEvents.length - 1]
-      expect(lastEvent).toHaveLength(1)
-      expect(typeof lastEvent[0]).toBe('string')
-      expect(lastEvent[0]).toBe('tab2')
-    })
+      const changeEvents = wrapper.emitted("change")!;
+      const lastEvent = changeEvents[changeEvents.length - 1];
+      // Event payload: [title, buttonElement]
+      expect(lastEvent).toHaveLength(2);
+      expect(typeof lastEvent[0]).toBe("string");
+      expect(lastEvent[0]).toBe("tab2");
+    });
 
-    it('should emit change event multiple times when switching between tabs', async () => {
+    it("should emit change event multiple times when switching between tabs", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
         {
-          title: 'tab3',
+          title: "tab3",
         },
-      )
+      );
 
-      const initialCount = wrapper.emitted('change')?.length || 0
+      const initialCount = wrapper.emitted("change")?.length || 0;
 
-      const tab2Button = wrapper.find('button[title="tab2"]')
-      await tab2Button.trigger('click')
+      const tab2Button = wrapper.find('button[title="tab2"]');
+      await tab2Button.trigger("click");
 
-      const tab3Button = wrapper.find('button[title="tab3"]')
-      await tab3Button.trigger('click')
+      const tab3Button = wrapper.find('button[title="tab3"]');
+      await tab3Button.trigger("click");
 
-      const tab1Button = wrapper.find('button[title="tab1"]')
-      await tab1Button.trigger('click')
+      const tab1Button = wrapper.find('button[title="tab1"]');
+      await tab1Button.trigger("click");
 
-      const finalCount = wrapper.emitted('change')?.length || 0
-      expect(finalCount).toBe(initialCount + 3)
+      const finalCount = wrapper.emitted("change")?.length || 0;
+      expect(finalCount).toBe(initialCount + 3);
 
-      const changeEvents = wrapper.emitted('change')!
-      expect(changeEvents[changeEvents.length - 3]).toEqual(['tab2'])
-      expect(changeEvents[changeEvents.length - 2]).toEqual(['tab3'])
-      expect(changeEvents[changeEvents.length - 1]).toEqual(['tab1'])
-    })
-  })
+      // Event payload: [title, buttonElement]
+      const changeEvents = wrapper.emitted("change")!;
+      expect(changeEvents[changeEvents.length - 3][0]).toBe("tab2");
+      expect(changeEvents[changeEvents.length - 2][0]).toBe("tab3");
+      expect(changeEvents[changeEvents.length - 1][0]).toBe("tab1");
+    });
+  });
 
   // ============================================
   // ACCESSIBILITY TESTS
   // ============================================
-  describe('Accessibility', () => {
-    describe('ARIA attributes', () => {
+  describe("Accessibility", () => {
+    describe("ARIA attributes", () => {
       it('should have role="tablist" on tab container', async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const container = wrapper.find('.tab-container')
+        const container = wrapper.find(".tab-container");
         // Note: Current implementation may not have role="tablist" - documenting expected behavior
         // This test documents the expected ARIA pattern for tabs
-        expect(container.exists()).toBe(true)
-      })
+        expect(container.exists()).toBe(true);
+      });
 
       it('should have role="tab" on tab buttons', async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const buttons = wrapper.findAll('button[title]')
+        const buttons = wrapper.findAll("button[title]");
         // Note: Current implementation uses title attribute - documenting expected role="tab"
-        expect(buttons.length).toBeGreaterThanOrEqual(2)
-      })
+        expect(buttons.length).toBeGreaterThanOrEqual(2);
+      });
 
       it('should have aria-selected="true" on selected tab', async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const selectedButton = wrapper.find('button[title="tab1"]')
+        const selectedButton = wrapper.find('button[title="tab1"]');
         // Note: Current implementation may not have aria-selected - documenting expected behavior
-        expect(selectedButton.exists()).toBe(true)
-      })
+        expect(selectedButton.exists()).toBe(true);
+      });
 
       it('should have aria-selected="false" on unselected tabs', async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const unselectedButton = wrapper.find('button[title="tab2"]')
+        const unselectedButton = wrapper.find('button[title="tab2"]');
         // Note: Current implementation may not have aria-selected - documenting expected behavior
-        expect(unselectedButton.exists()).toBe(true)
-      })
+        expect(unselectedButton.exists()).toBe(true);
+      });
 
-      it('should have aria-controls linking to tabpanel', async () => {
+      it("should have aria-controls linking to tabpanel", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const button = wrapper.find('button[title="tab1"]')
+        const button = wrapper.find('button[title="tab1"]');
         // Note: Current implementation may not have aria-controls - documenting expected behavior
-        expect(button.exists()).toBe(true)
-      })
+        expect(button.exists()).toBe(true);
+      });
 
       it('should have role="tabpanel" on tab content', async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
         // Note: Current implementation may not have role="tabpanel" - documenting expected behavior
-        expect(wrapper.text()).toContain('Content tab1')
-      })
+        expect(wrapper.text()).toContain("Content tab1");
+      });
 
-      it('should have aria-disabled on disabled tabs', async () => {
+      it("should have aria-disabled on disabled tabs", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
             disabled: true,
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const disabledButton = wrapper.find('button[title="tab1"]')
+        const disabledButton = wrapper.find('button[title="tab1"]');
         // Note: Current implementation may not have aria-disabled - documenting expected behavior
-        expect(disabledButton.exists()).toBe(true)
-        expect(disabledButton.classes()).toContain('cursor-not-allowed')
-      })
+        expect(disabledButton.exists()).toBe(true);
+        expect(disabledButton.classes()).toContain("cursor-not-allowed");
+      });
 
-      it('should hide decorative icons from screen readers', async () => {
+      it("should hide decorative icons from screen readers", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
-            icon: 'bell',
+            title: "tab1",
+            icon: "bell",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const icon = wrapper.findComponent({ name: 'FzIcon' })
+        const icon = wrapper.findComponent({ name: "FzIcon" });
         if (icon.exists()) {
           // FzIcon should handle aria-hidden internally, but documenting expectation
-          expect(icon.exists()).toBe(true)
+          expect(icon.exists()).toBe(true);
         }
-      })
-    })
+      });
+    });
 
-    describe('Keyboard navigation', () => {
-      it('should be focusable when not disabled', async () => {
+    describe("Keyboard navigation", () => {
+      it("should be focusable when not disabled", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const button = wrapper.find('button[title="tab1"]')
+        const button = wrapper.find('button[title="tab1"]');
         // Buttons are naturally focusable
-        expect(button.element.tagName).toBe('BUTTON')
-      })
+        expect(button.element.tagName).toBe("BUTTON");
+      });
 
-      it('should support arrow key navigation between tabs', async () => {
+      it("should support arrow key navigation between tabs", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const tab1Button = wrapper.find('button[title="tab1"]')
+        const tab1Button = wrapper.find('button[title="tab1"]');
         // Note: Current implementation may not support arrow keys - documenting expected behavior
-        expect(tab1Button.exists()).toBe(true)
-      })
+        expect(tab1Button.exists()).toBe(true);
+      });
 
-      it('should support Enter key to activate tab', async () => {
+      it("should support Enter key to activate tab", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const tab2Button = wrapper.find('button[title="tab2"]')
-        await tab2Button.trigger('keydown', { key: 'Enter' })
+        const tab2Button = wrapper.find('button[title="tab2"]');
+        await tab2Button.trigger("keydown", { key: "Enter" });
         // Enter key on button should trigger click
-        expect(tab2Button.exists()).toBe(true)
-      })
+        expect(tab2Button.exists()).toBe(true);
+      });
 
-      it('should support Space key to activate tab', async () => {
+      it("should support Space key to activate tab", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const tab2Button = wrapper.find('button[title="tab2"]')
-        await tab2Button.trigger('keydown', { key: ' ' })
+        const tab2Button = wrapper.find('button[title="tab2"]');
+        await tab2Button.trigger("keydown", { key: " " });
         // Space key on button should trigger click
-        expect(tab2Button.exists()).toBe(true)
-      })
-    })
+        expect(tab2Button.exists()).toBe(true);
+      });
+    });
 
-    describe('Semantic HTML structure', () => {
-      it('should use semantic button elements for tabs', async () => {
+    describe("Semantic HTML structure", () => {
+      it("should use semantic button elements for tabs", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const buttons = wrapper.findAll('button')
-        expect(buttons.length).toBeGreaterThanOrEqual(2)
-      })
+        const buttons = wrapper.findAll("button");
+        expect(buttons.length).toBeGreaterThanOrEqual(2);
+      });
 
-      it('should have accessible labels via title attribute', async () => {
+      it("should have accessible labels via title attribute", async () => {
         const wrapper = await createWrapper(
           {
-            size: 'sm',
+            size: "sm",
           },
           {
-            title: 'tab1',
+            title: "tab1",
           },
           {
-            title: 'tab2',
+            title: "tab2",
           },
-        )
+        );
 
-        const button = wrapper.find('button[title="tab1"]')
-        expect(button.attributes('title')).toBe('tab1')
-      })
-    })
-  })
+        const button = wrapper.find('button[title="tab1"]');
+        expect(button.attributes("title")).toBe("tab1");
+      });
+    });
+  });
 
   // ============================================
   // CSS CLASSES TESTS
   // ============================================
-  describe('CSS Classes', () => {
-    it('should apply static base classes to container', async () => {
+  describe("CSS Classes", () => {
+    it("should apply static base classes to container", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const container = wrapper.find('.tab-container')
-      expect(container.classes()).toContain('flex')
-      expect(container.classes()).toContain('rounded-lg')
-      expect(container.classes()).toContain('bg-grey-100')
-    })
+      const container = wrapper.find(".tab-container");
+      expect(container.classes()).toContain("flex");
+      expect(container.classes()).toContain("rounded-lg");
+      expect(container.classes()).toContain("bg-grey-100");
+    });
 
-    it('should apply selected tab classes', async () => {
+    it("should apply selected tab classes", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const selectedButton = wrapper.find('button[title="tab1"]')
-      expect(selectedButton.classes()).toContain('bg-white')
-      expect(selectedButton.classes()).toContain('text-blue-500')
-    })
+      const selectedButton = wrapper.find('button[title="tab1"]');
+      expect(selectedButton.classes()).toContain("bg-white");
+      expect(selectedButton.classes()).toContain("text-blue-500");
+    });
 
-    it('should apply unselected tab classes', async () => {
+    it("should apply unselected tab classes", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const unselectedButton = wrapper.find('button[title="tab2"]')
-      expect(unselectedButton.classes()).toContain('text-grey-500')
-      expect(unselectedButton.classes()).toContain('bg-grey-100')
-    })
+      const unselectedButton = wrapper.find('button[title="tab2"]');
+      expect(unselectedButton.classes()).toContain("text-grey-500");
+      expect(unselectedButton.classes()).toContain("bg-grey-100");
+    });
 
-    it('should apply disabled tab classes', async () => {
+    it("should apply disabled tab classes", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
           disabled: true,
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const disabledButton = wrapper.find('button[title="tab1"]')
-      expect(disabledButton.classes()).toContain('cursor-not-allowed')
-    })
+      const disabledButton = wrapper.find('button[title="tab1"]');
+      expect(disabledButton.classes()).toContain("cursor-not-allowed");
+    });
 
-    it('should apply vertical layout classes when vertical prop is true', async () => {
+    it("should apply vertical layout classes when vertical prop is true", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
           vertical: true,
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const container = wrapper.find('.tab-container')
-      expect(container.classes()).toContain('flex-col')
-    })
+      const container = wrapper.find(".tab-container");
+      expect(container.classes()).toContain("flex-col");
+    });
 
-    it('should apply horizontal layout classes when vertical prop is false', async () => {
+    it("should apply horizontal layout classes when vertical prop is false", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
           vertical: false,
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const container = wrapper.find('.tab-container')
-      expect(container.classes()).toContain('flex-row')
-    })
-  })
+      const container = wrapper.find(".tab-container");
+      expect(container.classes()).toContain("flex-row");
+    });
+  });
 
   // ============================================
   // EDGE CASES
   // ============================================
-  describe('Edge Cases', () => {
-    it('should handle empty tabs array gracefully', async () => {
+  describe("Edge Cases", () => {
+    it("should handle empty tabs array gracefully", async () => {
       const wrapper = mount(FzTabs, {
         props: {
-          size: 'sm',
+          size: "sm",
+          isDebug: true,
         },
         slots: {
           default: () => [],
         },
-      })
+      });
 
-      await wrapper.vm.$nextTick()
-      expect(wrapper.exists()).toBe(true)
+      await wrapper.vm.$nextTick();
+      expect(wrapper.exists()).toBe(true);
       expect(console.warn).toHaveBeenCalledWith(
-        expect.stringContaining('FzTabs must have at least one FzTab child'),
-      )
-    })
+        expect.stringContaining("FzTabs must have at least one FzTab child"),
+      );
+    });
 
-    it('should handle duplicate tab titles with warning', async () => {
+    it("should handle duplicate tab titles with warning", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
+          isDebug: true,
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
-      )
+      );
 
-      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.exists()).toBe(true);
       expect(console.warn).toHaveBeenCalledWith(
-        expect.stringContaining('duplicate titles'),
-      )
-    })
+        expect.stringContaining("duplicate titles"),
+      );
+    });
 
-    it('should select first tab when no initialSelected is provided', async () => {
+    it("should select first tab when no initialSelected is provided", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.text()).toContain('Content tab1')
-      expect(wrapper.text()).not.toContain('Content tab2')
-    })
+      expect(wrapper.text()).toContain("Content tab1");
+      expect(wrapper.text()).not.toContain("Content tab2");
+    });
 
-    it('should handle tab with very long title', async () => {
+    it("should handle tab with very long title", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'This is a very long tab title that might overflow',
+          title: "This is a very long tab title that might overflow",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      const button = wrapper.find('button[title="This is a very long tab title that might overflow"]')
-      expect(button.exists()).toBe(true)
-    })
+      const button = wrapper.find(
+        'button[title="This is a very long tab title that might overflow"]',
+      );
+      expect(button.exists()).toBe(true);
+    });
 
-    it('should handle rapid tab switching', async () => {
+    it("should handle rapid tab switching", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
         {
-          title: 'tab3',
+          title: "tab3",
         },
-      )
+      );
 
-      const tab2Button = wrapper.find('button[title="tab2"]')
-      const tab3Button = wrapper.find('button[title="tab3"]')
+      const tab2Button = wrapper.find('button[title="tab2"]');
+      const tab3Button = wrapper.find('button[title="tab3"]');
 
-      await tab2Button.trigger('click')
-      await wrapper.vm.$nextTick()
-      await tab3Button.trigger('click')
-      await wrapper.vm.$nextTick()
+      await tab2Button.trigger("click");
+      await wrapper.vm.$nextTick();
+      await tab3Button.trigger("click");
+      await wrapper.vm.$nextTick();
 
-      expect(wrapper.emitted('change')).toBeTruthy()
-      expect(wrapper.emitted('change')!.length).toBeGreaterThanOrEqual(2)
-    })
+      expect(wrapper.emitted("change")).toBeTruthy();
+      expect(wrapper.emitted("change")!.length).toBeGreaterThanOrEqual(2);
+    });
 
-    it('should handle undefined props gracefully', async () => {
+    it("should handle undefined props gracefully", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.exists()).toBe(true)
-    })
+      expect(wrapper.exists()).toBe(true);
+    });
 
-    it('should handle tab removal gracefully', async () => {
+    it("should handle tab removal gracefully", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
       // Simulate tab being removed (selected tab)
-      const tab1Button = wrapper.find('button[title="tab1"]')
-      await tab1Button.trigger('click')
-      await wrapper.vm.$nextTick()
+      const tab1Button = wrapper.find('button[title="tab1"]');
+      await tab1Button.trigger("click");
+      await wrapper.vm.$nextTick();
 
       // Component should handle this gracefully
-      expect(wrapper.exists()).toBe(true)
-    })
-  })
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
 
   // ============================================
   // SNAPSHOTS
   // ============================================
-  describe('Snapshots', () => {
-    it('should match snapshot - default state', async () => {
+  describe("Snapshots", () => {
+    it("should match snapshot - default state", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.html()).toMatchSnapshot()
-    })
+      expect(wrapper.html()).toMatchSnapshot();
+    });
 
-    it('should match snapshot - md size', async () => {
+    it("should match snapshot - md size", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'md',
+          size: "md",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.html()).toMatchSnapshot()
-    })
+      expect(wrapper.html()).toMatchSnapshot();
+    });
 
-    it('should match snapshot - with badgeContent', async () => {
+    it("should match snapshot - with badgeContent", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
-          badgeContent: '1',
+          title: "tab1",
+          badgeContent: "1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.html()).toMatchSnapshot()
-    })
+      expect(wrapper.html()).toMatchSnapshot();
+    });
 
-    it('should match snapshot - with icon', async () => {
+    it("should match snapshot - with icon", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
-          icon: 'bell',
+          title: "tab1",
+          icon: "bell",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.html()).toMatchSnapshot()
-    })
+      expect(wrapper.html()).toMatchSnapshot();
+    });
 
-    it('should match snapshot - tab change', async () => {
+    it("should match snapshot - tab change", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      await wrapper.findAll('button[title="tab2"]')[0].trigger('click')
-      expect(wrapper.html()).toMatchSnapshot()
-    })
+      await wrapper.findAll('button[title="tab2"]')[0].trigger("click");
+      expect(wrapper.html()).toMatchSnapshot();
+    });
 
-    it('should match snapshot - vertical direction', async () => {
+    it("should match snapshot - vertical direction", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
           vertical: true,
         },
         {
-          title: 'tab1',
+          title: "tab1",
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
 
-      expect(wrapper.html()).toMatchSnapshot()
-    })
+      expect(wrapper.html()).toMatchSnapshot();
+    });
 
-    it('should match snapshot - disabled tab', async () => {
+    it("should match snapshot - disabled tab", async () => {
       const wrapper = await createWrapper(
         {
-          size: 'sm',
+          size: "sm",
         },
         {
-          title: 'tab1',
+          title: "tab1",
           disabled: true,
         },
         {
-          title: 'tab2',
+          title: "tab2",
         },
-      )
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - tabStyle scroll", async () => {
+      const wrapper = await createWrapper(
+        { tabStyle: "scroll" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - tabStyle picker", async () => {
+      const wrapper = await createWrapper(
+        { tabStyle: "picker" },
+        { title: "tab1", initialSelected: true },
+        { title: "tab2" },
+      );
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - environment backoffice", async () => {
+      const wrapper = await createWrapper(
+        { environment: "backoffice" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - environment frontoffice", async () => {
+      const wrapper = await createWrapper(
+        { environment: "frontoffice" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - tone neutral", async () => {
+      const wrapper = await createWrapper(
+        { tone: "neutral" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - tone alert", async () => {
+      const wrapper = await createWrapper(
+        { tone: "alert" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  // ============================================
+  // DEPRECATION WARNINGS
+  // ============================================
+  describe("Deprecation Warnings", () => {
+    beforeEach(() => {
+      vi.spyOn(console, "warn").mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it("should warn when size prop is used", async () => {
+      await createWrapper(
+        { size: "sm", isDebug: true },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringContaining('[FzTabs] The "size" prop is deprecated'),
+      );
+    });
+
+    it("should warn when horizontalOverflow prop is used", async () => {
+      await createWrapper(
+        { horizontalOverflow: true, isDebug: true },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringContaining(
+          '[FzTabs] The "horizontalOverflow" prop is deprecated',
+        ),
+      );
+    });
+
+    it("should not warn when deprecated props are not used", async () => {
+      vi.clearAllMocks();
+
+      await createWrapper({}, { title: "tab1" }, { title: "tab2" });
+
+      const deprecationWarnings = (console.warn as any).mock.calls.filter(
+        (call: any[]) => {
+          const message = call[0];
+          return (
+            typeof message === "string" &&
+            message.startsWith("[FzTabs]") &&
+            message.includes("deprecated")
+          );
+        },
+      );
+      expect(deprecationWarnings.length).toBe(0);
+    });
+  });
+
+  // ============================================
+  // TAB STYLE
+  // ============================================
+  describe("TabStyle", () => {
+    it("should render with tabStyle scroll", async () => {
+      const wrapper = await createWrapper(
+        { tabStyle: "scroll" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      const container = wrapper.find(".tab-container");
+      expect(container.classes()).toContain("overflow-x-auto");
+    });
+
+    it("should render with tabStyle picker", async () => {
+      const wrapper = await createWrapper(
+        { tabStyle: "picker" },
+        { title: "tab1", initialSelected: true },
+        { title: "tab2" },
+      );
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: "FzTabPicker" }).exists()).toBe(
+        true,
+      );
+    });
+
+    it("should render with tabStyle scroll as default", async () => {
+      const wrapper = await createWrapper(
+        {},
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      const container = wrapper.find(".tab-container");
+      expect(container.classes()).toContain("overflow-x-auto");
+    });
+  });
+
+  // ============================================
+  // RETROCOMPATIBILITY
+  // ============================================
+  describe("Retrocompatibility", () => {
+    it("should map deprecated size to effectiveSize", async () => {
+      const wrapper = await createWrapper(
+        { size: "md" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toContain("tab1");
+      expect(wrapper.html()).toContain("tab2");
+    });
+
+    it("should map deprecated horizontalOverflow to overflowMode scroll", async () => {
+      const wrapper = await createWrapper(
+        { horizontalOverflow: true },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      await wrapper.vm.$nextTick();
+      const container = wrapper.find(".tab-container");
+      expect(container.html()).toContain("overflow-x-auto");
+    });
+
+    it("should map deprecated horizontalOverflow false to overflowMode none", async () => {
+      const wrapper = await createWrapper(
+        { horizontalOverflow: false },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
 
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-  })
-})
+      const container = wrapper.find(".tab-container");
+      expect(container.classes()).not.toContain("overflow-x-auto");
+    });
 
+    it("should prioritize tabStyle over horizontalOverflow", async () => {
+      const wrapper = await createWrapper(
+        { tabStyle: "picker", horizontalOverflow: true },
+        { title: "tab1", initialSelected: true },
+        { title: "tab2" },
+      );
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: "FzTabPicker" }).exists()).toBe(
+        true,
+      );
+    });
+  });
+
+  // ============================================
+  // ENVIRONMENT
+  // ============================================
+  describe("Environment", () => {
+    it("should render with environment backoffice", async () => {
+      const wrapper = await createWrapper(
+        { environment: "backoffice" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toContain("tab1");
+      expect(wrapper.html()).toContain("tab2");
+    });
+
+    it("should render with environment frontoffice", async () => {
+      const wrapper = await createWrapper(
+        { environment: "frontoffice" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toContain("tab1");
+      expect(wrapper.html()).toContain("tab2");
+    });
+
+    it("should prioritize environment over deprecated size", async () => {
+      const wrapper = await createWrapper(
+        { environment: "backoffice", size: "sm" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.html()).toContain("tab1");
+    });
+  });
+
+  // ============================================
+  // TONE
+  // ============================================
+  describe("Tone", () => {
+    it("should render with tone neutral (default)", async () => {
+      const wrapper = await createWrapper(
+        { tone: "neutral" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.exists()).toBe(true);
+    });
+
+    it("should render with tone alert", async () => {
+      const wrapper = await createWrapper(
+        { tone: "alert" },
+        { title: "tab1" },
+        { title: "tab2" },
+      );
+
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+});