@etus/ui 0.1.0

package/src/components/primitives/Badge/Badge.test.tsx

@@ -0,0 +1,1146 @@
+// Badge/Badge.test.tsx
+import { fireEvent, render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { Badge } from "./Badge"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("Badge", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(<Badge>Test Label</Badge>)
+      expect(screen.getByText("Test Label")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<Badge className="custom-class" data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveAttribute("data-slot", "badge")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(<Badge data-custom="value" data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("renders as span by default", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge").tagName).toBe("SPAN")
+    })
+
+    it("renders as child element with asChild", () => {
+      render(
+        <Badge asChild>
+          <a href="/test">Link Badge</a>
+        </Badge>
+      )
+      const link = screen.getByRole("link")
+      expect(link).toHaveAttribute("href", "/test")
+      expect(link).toHaveAttribute("data-slot", "badge")
+    })
+  })
+
+  // ============================================
+  // TYPE VARIANT TESTS
+  // ============================================
+  describe("Type Variants", () => {
+    it("applies pill-color type classes (default)", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+      expect(screen.getByTestId("badge")).toHaveClass("border-transparent")
+    })
+
+    it("applies pill-color type classes explicitly", () => {
+      render(<Badge data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+      expect(screen.getByTestId("badge")).toHaveClass("border-transparent")
+    })
+
+    it("applies pill-outline type classes", () => {
+      render(<Badge data-testid="badge" type="pill-outline">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+      expect(screen.getByTestId("badge")).toHaveClass("bg-transparent")
+    })
+
+    it("applies badge-color type classes", () => {
+      render(<Badge data-testid="badge" type="badge-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-default)]")
+      expect(screen.getByTestId("badge")).toHaveClass("border-transparent")
+    })
+
+    it("applies badge-modern type classes", () => {
+      render(<Badge data-testid="badge" type="badge-modern">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-default)]")
+      expect(screen.getByTestId("badge")).toHaveClass("border-transparent")
+    })
+
+    it("badge-modern has left accent bar styling", () => {
+      render(<Badge type="badge-modern">Modern</Badge>)
+      expect(screen.getByText("Modern")).toHaveClass("border-l-[3px]")
+    })
+
+    it("applies badge-outline type classes", () => {
+      render(<Badge type="badge-outline">Outline</Badge>)
+      expect(screen.getByText("Outline")).toHaveClass("rounded-[var(--badge-radius-default)] bg-transparent")
+    })
+  })
+
+  // ============================================
+  // INTERACTIVE TESTS
+  // ============================================
+  describe("Interactive", () => {
+    it("applies interactive styles when interactive prop is true", () => {
+      render(<Badge interactive>Interactive</Badge>)
+      expect(screen.getByText("Interactive")).toHaveClass("cursor-pointer hover:brightness-90")
+    })
+
+    it("applies interactive styles when onClick is provided", () => {
+       
+      render(<Badge onClick={() => {}}>Clickable</Badge>)
+      expect(screen.getByText("Clickable")).toHaveClass("cursor-pointer hover:brightness-90")
+    })
+
+    it("calls onClick when clicked", async () => {
+      const handleClick = vi.fn()
+      const user = userEvent.setup()
+      render(<Badge onClick={handleClick}>Click Me</Badge>)
+      
+      await user.click(screen.getByText("Click Me"))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ============================================
+  // ICON ALIAS TESTS
+  // ============================================
+  describe("Icon Alias", () => {
+    it("renders icon prop as leadingIcon", () => {
+      render(<Badge icon={<span data-testid="icon">Icon</span>}>Text</Badge>)
+      expect(screen.getByTestId("icon")).toBeInTheDocument()
+      expect(screen.getByTestId("icon").parentElement).toHaveAttribute("data-slot", "badge-leading-icon")
+    })
+
+    it("leadingIcon takes precedence over icon", () => {
+      render(
+        <Badge 
+          icon={<span data-testid="alias">Alias</span>} 
+          leadingIcon={<span data-testid="leading">Leading</span>}
+        >
+          Text
+        </Badge>
+      )
+      expect(screen.getByTestId("leading")).toBeInTheDocument()
+      expect(screen.queryByTestId("alias")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // COLOR VARIANTS - PILL COLOR
+  // ============================================
+  describe("Color Variants - Pill Color", () => {
+    it("applies primary color classes (default)", () => {
+      render(<Badge data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-[color:var(--badge-color-primary-bg)]")
+      expect(screen.getByTestId("badge")).toHaveClass("text-[color:var(--badge-color-primary-fg)]")
+    })
+
+    it("applies destructive color classes", () => {
+      render(<Badge color="destructive" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-[color:var(--badge-color-destructive-bg)]")
+      expect(screen.getByTestId("badge")).toHaveClass("text-[color:var(--badge-color-destructive-fg)]")
+    })
+
+    it("applies warning color classes", () => {
+      render(<Badge color="warning" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-warning")
+      expect(screen.getByTestId("badge")).toHaveClass("text-warning-foreground")
+    })
+
+    it("applies success color classes", () => {
+      render(<Badge color="success" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-success")
+      expect(screen.getByTestId("badge")).toHaveClass("text-success-foreground")
+    })
+
+    it("applies muted color classes", () => {
+      render(<Badge color="muted" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-[color:var(--badge-color-secondary-bg)]")
+      expect(screen.getByTestId("badge")).toHaveClass("text-[color:var(--badge-color-secondary-fg)]")
+    })
+
+    it("applies blue-gray color classes", () => {
+      render(<Badge color="blue-gray" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-slate-500")
+      expect(screen.getByTestId("badge")).toHaveClass("text-white")
+    })
+
+    it("applies blue-light color classes", () => {
+      render(<Badge color="blue-light" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-sky-400")
+      expect(screen.getByTestId("badge")).toHaveClass("text-sky-950")
+    })
+
+    it("applies blue color classes", () => {
+      render(<Badge color="blue" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-blue-400")
+      expect(screen.getByTestId("badge")).toHaveClass("text-blue-950")
+    })
+
+    it("applies indigo color classes", () => {
+      render(<Badge color="indigo" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-indigo-400")
+      expect(screen.getByTestId("badge")).toHaveClass("text-indigo-950")
+    })
+
+    it("applies purple color classes", () => {
+      render(<Badge color="purple" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-violet-400")
+      expect(screen.getByTestId("badge")).toHaveClass("text-violet-950")
+    })
+
+    it("applies pink color classes", () => {
+      render(<Badge color="pink" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-pink-400")
+      expect(screen.getByTestId("badge")).toHaveClass("text-pink-950")
+    })
+
+    it("applies orange color classes", () => {
+      render(<Badge color="orange" data-testid="badge" type="pill-color">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-orange-500")
+      expect(screen.getByTestId("badge")).toHaveClass("text-orange-950")
+    })
+  })
+
+  // ============================================
+  // COLOR VARIANT TESTS - PILL-OUTLINE
+  // ============================================
+  describe("Color Variants - Pill Outline", () => {
+    it("applies primary outline color classes", () => {
+      render(<Badge color="primary" data-testid="badge" type="pill-outline">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("border-primary")
+      expect(screen.getByTestId("badge")).toHaveClass("text-primary")
+    })
+
+    it("applies destructive outline color classes", () => {
+      render(<Badge color="destructive" data-testid="badge" type="pill-outline">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("border-destructive")
+      expect(screen.getByTestId("badge")).toHaveClass("text-destructive")
+    })
+
+    it("applies muted outline color classes", () => {
+      render(<Badge color="muted" data-testid="badge" type="pill-outline">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("border-border")
+      expect(screen.getByTestId("badge")).toHaveClass("text-muted-foreground")
+    })
+
+    it("applies blue outline color classes", () => {
+      render(<Badge color="blue" data-testid="badge" type="pill-outline">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("border-blue-400")
+      expect(screen.getByTestId("badge")).toHaveClass("text-blue-400")
+    })
+  })
+
+  // ============================================
+  // COLOR VARIANT TESTS - BADGE-MODERN
+  // ============================================
+  describe("Color Variants - Badge Modern", () => {
+    it("applies primary modern color classes", () => {
+      render(<Badge color="primary" data-testid="badge" type="badge-modern">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-primary/10")
+      expect(screen.getByTestId("badge")).toHaveClass("text-primary")
+      expect(screen.getByTestId("badge")).toHaveClass("border-l-primary")
+    })
+
+    it("applies destructive modern color classes", () => {
+      render(<Badge color="destructive" data-testid="badge" type="badge-modern">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-destructive/10")
+      expect(screen.getByTestId("badge")).toHaveClass("text-destructive")
+    })
+
+    it("applies blue modern color classes", () => {
+      render(<Badge color="blue" data-testid="badge" type="badge-modern">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("bg-blue-400/10")
+      expect(screen.getByTestId("badge")).toHaveClass("text-blue-400")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies sm size classes", () => {
+      render(<Badge data-testid="badge" size="sm">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("h-[var(--badge-size-sm-h)]")
+      expect(screen.getByTestId("badge")).toHaveClass("px-[var(--badge-size-sm-px)]")
+      expect(screen.getByTestId("badge")).toHaveClass("text-[length:var(--badge-size-sm-text)]")
+    })
+
+    it("applies default size classes", () => {
+      render(<Badge data-testid="badge" size="default">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("h-[var(--badge-size-md-h)]")
+      expect(screen.getByTestId("badge")).toHaveClass("px-[var(--badge-size-md-px)]")
+      expect(screen.getByTestId("badge")).toHaveClass("text-[length:var(--badge-size-md-text)]")
+    })
+
+    it("applies lg size classes", () => {
+      render(<Badge data-testid="badge" size="lg">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("h-[var(--badge-size-lg-h)]")
+      expect(screen.getByTestId("badge")).toHaveClass("px-[var(--badge-size-lg-px)]")
+      expect(screen.getByTestId("badge")).toHaveClass("text-[length:var(--badge-size-lg-text)]")
+    })
+
+    it("uses default size when not specified", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("h-[var(--badge-size-md-h)]")
+    })
+  })
+
+  // ============================================
+  // DOT FEATURE TESTS
+  // ============================================
+  describe("Dot Feature", () => {
+    it("renders dot when dot=true", () => {
+      render(<Badge dot data-testid="badge">Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-dot"]')).toBeInTheDocument()
+    })
+
+    it("does not render dot by default", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-dot"]')).not.toBeInTheDocument()
+    })
+
+    it("dot has correct size classes", () => {
+      render(<Badge dot>Label</Badge>)
+      const dot = document.querySelector('[data-slot="badge-dot"]')
+      expect(dot).toHaveClass("size-1.5")
+      expect(dot).toHaveClass("rounded-full")
+    })
+
+    it("dot inherits primary color by default", () => {
+      render(<Badge dot>Label</Badge>)
+      const dot = document.querySelector('[data-slot="badge-dot"]')
+      expect(dot).toHaveClass("bg-primary-foreground")
+    })
+
+    it("dot adapts to destructive color", () => {
+      render(<Badge dot color="destructive">Label</Badge>)
+      const dot = document.querySelector('[data-slot="badge-dot"]')
+      expect(dot).toHaveClass("bg-white")
+    })
+
+    it("dot adapts to muted color", () => {
+      render(<Badge dot color="muted">Label</Badge>)
+      const dot = document.querySelector('[data-slot="badge-dot"]')
+      expect(dot).toHaveClass("bg-muted-foreground")
+    })
+
+    it("dot adapts to success color", () => {
+      render(<Badge dot color="success">Label</Badge>)
+      const dot = document.querySelector('[data-slot="badge-dot"]')
+      expect(dot).toHaveClass("bg-success-foreground")
+    })
+  })
+
+  // ============================================
+  // DISMISS FEATURE TESTS
+  // ============================================
+  describe("Dismiss Feature", () => {
+    it("renders dismiss button when onDismiss is provided", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge onDismiss={handleDismiss}>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-dismiss"]')).toBeInTheDocument()
+    })
+
+    it("does not render dismiss button by default", () => {
+      render(<Badge>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-dismiss"]')).not.toBeInTheDocument()
+    })
+
+    it("calls onDismiss when dismiss button is clicked", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge onDismiss={handleDismiss}>Label</Badge>)
+
+      const dismissButton = document.querySelector<HTMLButtonElement>('[data-slot="badge-dismiss"]')
+      if (!dismissButton) {
+        throw new Error("Expected dismiss button to exist.")
+      }
+      fireEvent.click(dismissButton)
+
+      expect(handleDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it("dismiss button stops event propagation", () => {
+      const handleDismiss = vi.fn()
+      const handleBadgeClick = vi.fn()
+
+      render(
+        <Badge onClick={handleBadgeClick} onDismiss={handleDismiss}>Label</Badge>
+      )
+
+      const dismissButton = document.querySelector<HTMLButtonElement>('[data-slot="badge-dismiss"]')
+      if (!dismissButton) {
+        throw new Error("Expected dismiss button to exist.")
+      }
+      fireEvent.click(dismissButton)
+
+      expect(handleDismiss).toHaveBeenCalledTimes(1)
+      expect(handleBadgeClick).not.toHaveBeenCalled()
+    })
+
+    it("dismiss button has accessible label", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge onDismiss={handleDismiss}>Label</Badge>)
+
+      const dismissButton = document.querySelector('[data-slot="badge-dismiss"]')
+      expect(dismissButton).toHaveAttribute("aria-label", "Dismiss")
+    })
+
+    it("dismiss button has custom accessible label", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge dismissLabel="Remove item" onDismiss={handleDismiss}>Label</Badge>)
+
+      const dismissButton = document.querySelector('[data-slot="badge-dismiss"]')
+      expect(dismissButton).toHaveAttribute("aria-label", "Remove item")
+    })
+
+    it("dismiss button is focusable", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge onDismiss={handleDismiss}>Label</Badge>)
+
+      const dismissButton = document.querySelector('[data-slot="badge-dismiss"]')
+      expect(dismissButton).toHaveAttribute("type", "button")
+    })
+
+    it("dismiss button inherits primary color styling", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge onDismiss={handleDismiss}>Label</Badge>)
+
+      const dismissButton = document.querySelector('[data-slot="badge-dismiss"]')
+      expect(dismissButton).toHaveClass("text-primary-foreground")
+    })
+
+    it("dismiss button adapts to destructive color", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge color="destructive" onDismiss={handleDismiss}>Label</Badge>)
+
+      const dismissButton = document.querySelector('[data-slot="badge-dismiss"]')
+      expect(dismissButton).toHaveClass("text-white")
+    })
+  })
+
+  // ============================================
+  // LEADING ICON FEATURE TESTS
+  // ============================================
+  describe("Leading Icon Feature", () => {
+    it("renders leading icon when leadingIcon is provided", () => {
+      render(
+        <Badge leadingIcon={<svg data-testid="leading-icon" />}>Label</Badge>
+      )
+      expect(screen.getByTestId("leading-icon")).toBeInTheDocument()
+    })
+
+    it("does not render leading icon by default", () => {
+      render(<Badge>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-leading-icon"]')).not.toBeInTheDocument()
+    })
+
+    it("leading icon has data-slot attribute", () => {
+      render(
+        <Badge leadingIcon={<svg data-testid="leading-icon" />}>Label</Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-leading-icon"]')).toBeInTheDocument()
+    })
+
+    it("leading icon has shrink-0 class", () => {
+      render(
+        <Badge leadingIcon={<svg data-testid="leading-icon" />}>Label</Badge>
+      )
+      const iconWrapper = document.querySelector('[data-slot="badge-leading-icon"]')
+      expect(iconWrapper).toHaveClass("shrink-0")
+    })
+
+    it("dot takes precedence over leading icon", () => {
+      render(
+        <Badge dot leadingIcon={<svg data-testid="leading-icon" />}>Label</Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-dot"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-leading-icon"]')).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // TRAILING ICON FEATURE TESTS
+  // ============================================
+  describe("Trailing Icon Feature", () => {
+    it("renders trailing icon when trailingIcon is provided", () => {
+      render(
+        <Badge trailingIcon={<svg data-testid="trailing-icon" />}>Label</Badge>
+      )
+      expect(screen.getByTestId("trailing-icon")).toBeInTheDocument()
+    })
+
+    it("does not render trailing icon by default", () => {
+      render(<Badge>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-trailing-icon"]')).not.toBeInTheDocument()
+    })
+
+    it("trailing icon has data-slot attribute", () => {
+      render(
+        <Badge trailingIcon={<svg data-testid="trailing-icon" />}>Label</Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-trailing-icon"]')).toBeInTheDocument()
+    })
+
+    it("trailing icon has shrink-0 class", () => {
+      render(
+        <Badge trailingIcon={<svg data-testid="trailing-icon" />}>Label</Badge>
+      )
+      const iconWrapper = document.querySelector('[data-slot="badge-trailing-icon"]')
+      expect(iconWrapper).toHaveClass("shrink-0")
+    })
+
+    it("onDismiss takes precedence over trailing icon", () => {
+      const handleDismiss = vi.fn()
+      render(
+        <Badge trailingIcon={<svg data-testid="trailing-icon" />} onDismiss={handleDismiss}>
+          Label
+        </Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-dismiss"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-trailing-icon"]')).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // COUNTRY FLAG FEATURE TESTS
+  // ============================================
+  describe("Country Flag Feature", () => {
+    it("renders country flag when country is provided", () => {
+      render(<Badge country="US">Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-country"]')).toBeInTheDocument()
+    })
+
+    it("does not render country flag by default", () => {
+      render(<Badge>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-country"]')).not.toBeInTheDocument()
+    })
+
+    it("country flag has role=img for accessibility", () => {
+      render(<Badge country="US">Label</Badge>)
+      const flag = document.querySelector('[data-slot="badge-country"]')
+      expect(flag).toHaveAttribute("role", "img")
+    })
+
+    it("country flag has accessible label", () => {
+      render(<Badge country="BR">Label</Badge>)
+      const flag = document.querySelector('[data-slot="badge-country"]')
+      expect(flag).toHaveAttribute("aria-label", "Flag of BR")
+    })
+
+    it("converts country code to flag emoji", () => {
+      render(<Badge country="US">Label</Badge>)
+      const flag = document.querySelector('[data-slot="badge-country"]')
+      // US flag emoji is 🇺🇸
+      expect(flag?.textContent).toBe("🇺🇸")
+    })
+
+    it("handles lowercase country codes", () => {
+      render(<Badge country="br">Label</Badge>)
+      const flag = document.querySelector('[data-slot="badge-country"]')
+      // BR flag emoji is 🇧🇷
+      expect(flag?.textContent).toBe("🇧🇷")
+    })
+
+    it("country takes precedence over dot", () => {
+      render(<Badge dot country="US">Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-country"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-dot"]')).not.toBeInTheDocument()
+    })
+
+    it("country takes precedence over leading icon", () => {
+      render(
+        <Badge country="US" leadingIcon={<svg data-testid="leading-icon" />}>
+          Label
+        </Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-country"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-leading-icon"]')).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // AVATAR FEATURE TESTS
+  // ============================================
+  describe("Avatar Feature", () => {
+    it("renders avatar when avatar is provided", () => {
+      render(<Badge avatar={{ fallback: "JD" }}>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-avatar"]')).toBeInTheDocument()
+    })
+
+    it("does not render avatar by default", () => {
+      render(<Badge>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-avatar"]')).not.toBeInTheDocument()
+    })
+
+    it("renders avatar with image when src is provided", () => {
+      render(
+        <Badge avatar={{ src: "https://example.com/avatar.jpg", fallback: "JD" }}>
+          Label
+        </Badge>
+      )
+      const img = document.querySelector('[data-slot="badge-avatar"] img')
+      expect(img).toBeInTheDocument()
+      expect(img).toHaveAttribute("src", "https://example.com/avatar.jpg")
+    })
+
+    it("renders avatar fallback initials when no src", () => {
+      render(<Badge avatar={{ fallback: "John Doe" }}>Label</Badge>)
+      const avatar = document.querySelector('[data-slot="badge-avatar"]')
+      expect(avatar?.textContent).toBe("JD")
+    })
+
+    it("limits initials to 2 characters", () => {
+      render(<Badge avatar={{ fallback: "John Middle Doe" }}>Label</Badge>)
+      const avatar = document.querySelector('[data-slot="badge-avatar"]')
+      expect(avatar?.textContent).toBe("JM")
+    })
+
+    it("avatar has correct styling classes", () => {
+      render(<Badge avatar={{ fallback: "JD" }}>Label</Badge>)
+      const avatar = document.querySelector('[data-slot="badge-avatar"]')
+      expect(avatar).toHaveClass("size-4")
+      expect(avatar).toHaveClass("rounded-full")
+      expect(avatar).toHaveClass("shrink-0")
+    })
+
+    it("avatar takes precedence over country", () => {
+      render(
+        <Badge avatar={{ fallback: "JD" }} country="US">
+          Label
+        </Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-avatar"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-country"]')).not.toBeInTheDocument()
+    })
+
+    it("avatar takes precedence over dot", () => {
+      render(
+        <Badge dot avatar={{ fallback: "JD" }}>
+          Label
+        </Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-avatar"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-dot"]')).not.toBeInTheDocument()
+    })
+
+    it("avatar takes precedence over leading icon", () => {
+      render(
+        <Badge avatar={{ fallback: "JD" }} leadingIcon={<svg data-testid="leading-icon" />}>
+          Label
+        </Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-avatar"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-leading-icon"]')).not.toBeInTheDocument()
+    })
+
+    it("avatar image uses alt from props", () => {
+      render(
+        <Badge avatar={{ src: "https://example.com/avatar.jpg", fallback: "JD", alt: "User avatar" }}>
+          Label
+        </Badge>
+      )
+      const img = document.querySelector('[data-slot="badge-avatar"] img')
+      expect(img).toHaveAttribute("alt", "User avatar")
+    })
+
+    it("avatar image falls back to fallback text for alt", () => {
+      render(
+        <Badge avatar={{ src: "https://example.com/avatar.jpg", fallback: "John Doe" }}>
+          Label
+        </Badge>
+      )
+      const img = document.querySelector('[data-slot="badge-avatar"] img')
+      expect(img).toHaveAttribute("alt", "John Doe")
+    })
+  })
+
+  // ============================================
+  // ICON ONLY FEATURE TESTS
+  // ============================================
+  describe("Icon Only Feature", () => {
+    it("renders iconOnly when provided", () => {
+      render(<Badge iconOnly={<svg data-testid="only-icon" />} />)
+      expect(screen.getByTestId("only-icon")).toBeInTheDocument()
+    })
+
+    it("does not render iconOnly by default", () => {
+      render(<Badge>Label</Badge>)
+      expect(document.querySelector('[data-slot="badge-icon-only"]')).not.toBeInTheDocument()
+    })
+
+    it("iconOnly has data-slot attribute", () => {
+      render(<Badge iconOnly={<svg data-testid="only-icon" />} />)
+      expect(document.querySelector('[data-slot="badge-icon-only"]')).toBeInTheDocument()
+    })
+
+    it("iconOnly ignores children", () => {
+      render(<Badge iconOnly={<svg data-testid="only-icon" />}>Label</Badge>)
+      expect(screen.queryByText("Label")).not.toBeInTheDocument()
+      expect(screen.getByTestId("only-icon")).toBeInTheDocument()
+    })
+
+    it("iconOnly ignores leadingIcon", () => {
+      render(
+        <Badge
+          iconOnly={<svg data-testid="only-icon" />}
+          leadingIcon={<svg data-testid="leading-icon" />}
+        />
+      )
+      expect(screen.getByTestId("only-icon")).toBeInTheDocument()
+      expect(screen.queryByTestId("leading-icon")).not.toBeInTheDocument()
+    })
+
+    it("iconOnly ignores trailingIcon", () => {
+      render(
+        <Badge
+          iconOnly={<svg data-testid="only-icon" />}
+          trailingIcon={<svg data-testid="trailing-icon" />}
+        />
+      )
+      expect(screen.getByTestId("only-icon")).toBeInTheDocument()
+      expect(screen.queryByTestId("trailing-icon")).not.toBeInTheDocument()
+    })
+
+    it("iconOnly ignores dot", () => {
+      render(<Badge dot iconOnly={<svg data-testid="only-icon" />} />)
+      expect(screen.getByTestId("only-icon")).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-dot"]')).not.toBeInTheDocument()
+    })
+
+    it("iconOnly ignores onDismiss", () => {
+      const handleDismiss = vi.fn()
+      render(<Badge iconOnly={<svg data-testid="only-icon" />} onDismiss={handleDismiss} />)
+      expect(screen.getByTestId("only-icon")).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-dismiss"]')).not.toBeInTheDocument()
+    })
+
+    it("iconOnly badge has square aspect ratio", () => {
+      render(<Badge data-testid="badge" iconOnly={<svg />} />)
+      expect(screen.getByTestId("badge")).toHaveClass("aspect-square")
+    })
+
+    it("iconOnly badge has no horizontal padding", () => {
+      render(<Badge data-testid="badge" iconOnly={<svg />} />)
+      expect(screen.getByTestId("badge")).toHaveClass("px-0")
+    })
+
+    it("iconOnly works with all type variants", () => {
+      const { rerender } = render(
+        <Badge data-testid="badge" iconOnly={<svg />} type="pill-color" />
+      )
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+
+      rerender(<Badge data-testid="badge" iconOnly={<svg />} type="pill-outline" />)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+
+      rerender(<Badge data-testid="badge" iconOnly={<svg />} type="badge-color" />)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-default)]")
+
+      rerender(<Badge data-testid="badge" iconOnly={<svg />} type="badge-modern" />)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-default)]")
+    })
+
+    it("iconOnly works with all size variants", () => {
+      const { rerender } = render(
+        <Badge data-testid="badge" iconOnly={<svg />} size="sm" />
+      )
+      expect(screen.getByTestId("badge")).toHaveClass("h-[var(--badge-size-sm-h)]")
+
+      rerender(<Badge data-testid="badge" iconOnly={<svg />} size="default" />)
+      expect(screen.getByTestId("badge")).toHaveClass("h-[var(--badge-size-md-h)]")
+
+      rerender(<Badge data-testid="badge" iconOnly={<svg />} size="lg" />)
+      expect(screen.getByTestId("badge")).toHaveClass("h-[var(--badge-size-lg-h)]")
+    })
+
+    it("iconOnly works with all color variants", () => {
+      render(
+        <Badge color="destructive" data-testid="badge" iconOnly={<svg />} />
+      )
+      expect(screen.getByTestId("badge")).toHaveClass("bg-[color:var(--badge-color-destructive-bg)]")
+    })
+  })
+
+  // ============================================
+  // BACKWARDS COMPATIBILITY TESTS
+  // ============================================
+  /* eslint-disable @typescript-eslint/no-deprecated -- Testing legacy variant API for backwards compatibility */
+  describe("Backwards Compatibility", () => {
+    it("maps variant=default to pill-color primary", () => {
+      render(<Badge data-testid="badge" variant="default">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+      expect(screen.getByTestId("badge")).toHaveClass("bg-[color:var(--badge-color-primary-bg)]")
+    })
+
+    it("maps variant=secondary to pill-color muted", () => {
+      render(<Badge data-testid="badge" variant="secondary">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+      expect(screen.getByTestId("badge")).toHaveClass("bg-[color:var(--badge-color-secondary-bg)]")
+      expect(screen.getByTestId("badge")).toHaveClass("text-[color:var(--badge-color-secondary-fg)]")
+    })
+
+    it("maps variant=destructive to pill-color destructive", () => {
+      render(<Badge data-testid="badge" variant="destructive">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+      expect(screen.getByTestId("badge")).toHaveClass("bg-[color:var(--badge-color-destructive-bg)]")
+    })
+
+    it("maps variant=outline to pill-outline muted", () => {
+      render(<Badge data-testid="badge" variant="outline">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-pill)]")
+      expect(screen.getByTestId("badge")).toHaveClass("bg-transparent")
+      expect(screen.getByTestId("badge")).toHaveClass("border-border")
+    })
+
+    it("new props take precedence over legacy variant", () => {
+      render(
+        <Badge color="success" data-testid="badge" type="badge-color" variant="default">
+          Label
+        </Badge>
+      )
+      expect(screen.getByTestId("badge")).toHaveClass("rounded-[var(--badge-radius-default)]")
+      expect(screen.getByTestId("badge")).toHaveClass("bg-success")
+    })
+
+    it("new color takes precedence over legacy variant color", () => {
+      render(
+        <Badge color="warning" data-testid="badge" variant="destructive">
+          Label
+        </Badge>
+      )
+      expect(screen.getByTestId("badge")).toHaveClass("bg-warning")
+    })
+  })
+  /* eslint-enable @typescript-eslint/no-deprecated */
+
+  // ============================================
+  // COMBINED VARIANT TESTS
+  // ============================================
+  describe("Combined Variants", () => {
+    it("combines type, color, and size variants", () => {
+      render(
+        <Badge color="success" data-testid="badge" size="lg" type="badge-color">
+          Label
+        </Badge>
+      )
+      const badge = screen.getByTestId("badge")
+      expect(badge).toHaveClass("rounded-[var(--badge-radius-default)]") // badge-color
+      expect(badge).toHaveClass("bg-success") // success color
+      expect(badge).toHaveClass("h-[var(--badge-size-lg-h)]") // lg size
+    })
+
+    it("combines type, color, and dot feature", () => {
+      render(
+        <Badge dot color="blue" data-testid="badge" type="pill-outline">
+          Label
+        </Badge>
+      )
+      expect(screen.getByTestId("badge")).toHaveClass("border-blue-400")
+      expect(document.querySelector('[data-slot="badge-dot"]')).toBeInTheDocument()
+    })
+
+    it("combines all features", () => {
+      const handleDismiss = vi.fn()
+      render(
+        <Badge
+          dot
+          color="purple"
+          data-testid="badge"
+          size="sm"
+          type="badge-modern"
+          onDismiss={handleDismiss}
+        >
+          Label
+        </Badge>
+      )
+      const badge = screen.getByTestId("badge")
+      expect(badge).toHaveClass("bg-violet-400/10")
+      expect(badge).toHaveClass("h-[var(--badge-size-sm-h)]")
+      expect(document.querySelector('[data-slot="badge-dot"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-dismiss"]')).toBeInTheDocument()
+    })
+
+    it("combines leading icon with trailing icon", () => {
+      render(
+        <Badge
+          data-testid="badge"
+          leadingIcon={<svg data-testid="leading" />}
+          trailingIcon={<svg data-testid="trailing" />}
+        >
+          Label
+        </Badge>
+      )
+      expect(screen.getByTestId("leading")).toBeInTheDocument()
+      expect(screen.getByTestId("trailing")).toBeInTheDocument()
+    })
+
+    it("combines avatar with onDismiss", () => {
+      const handleDismiss = vi.fn()
+      render(
+        <Badge
+          avatar={{ fallback: "JD" }}
+          data-testid="badge"
+          onDismiss={handleDismiss}
+        >
+          Label
+        </Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-avatar"]')).toBeInTheDocument()
+      expect(document.querySelector('[data-slot="badge-dismiss"]')).toBeInTheDocument()
+    })
+
+    it("combines country with trailing icon", () => {
+      render(
+        <Badge
+          country="US"
+          data-testid="badge"
+          trailingIcon={<svg data-testid="trailing" />}
+        >
+          Label
+        </Badge>
+      )
+      expect(document.querySelector('[data-slot="badge-country"]')).toBeInTheDocument()
+      expect(screen.getByTestId("trailing")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // BASE STYLING TESTS
+  // ============================================
+  describe("Base Styling", () => {
+    it("has inline-flex display", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("inline-flex")
+    })
+
+    it("has items-center alignment", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("items-center")
+    })
+
+    it("has justify-center alignment", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("justify-center")
+    })
+
+    it("has font-medium styling", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("font-medium")
+    })
+
+    it("has w-fit width", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("w-fit")
+    })
+
+    it("has whitespace-nowrap", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("whitespace-nowrap")
+    })
+
+    it("has shrink-0 to prevent shrinking", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("shrink-0")
+    })
+
+    it("has overflow-hidden", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("overflow-hidden")
+    })
+
+    it("has border styling", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("border")
+    })
+
+    it("has transition-colors for hover states", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      expect(screen.getByTestId("badge")).toHaveClass("transition-[color,background-color,box-shadow,filter]")
+    })
+
+    it("has focus-visible ring styling", () => {
+      render(<Badge data-testid="badge">Label</Badge>)
+      const badge = screen.getByTestId("badge")
+      expect(badge).toHaveClass("focus-visible:outline-none")
+      expect(badge).toHaveClass("focus-visible:ring-2")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations with basic badge", async () => {
+      const { container } = render(<Badge>Label</Badge>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with dot feature", async () => {
+      const { container } = render(<Badge dot>Label</Badge>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with dismiss feature", async () => {
+      const { container } = render(<Badge onDismiss={() => {}}>Label</Badge>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all type variants", async () => {
+      const { container } = render(
+        <div>
+          <Badge type="pill-color">Pill Color</Badge>
+          <Badge type="pill-outline">Pill Outline</Badge>
+          <Badge type="badge-color">Badge Color</Badge>
+          <Badge type="badge-modern">Badge Modern</Badge>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <Badge size="sm">Small</Badge>
+          <Badge size="default">Default</Badge>
+          <Badge size="lg">Large</Badge>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all semantic color variants", async () => {
+      const { container } = render(
+        <div>
+          <Badge color="primary">Primary</Badge>
+          <Badge color="destructive">Destructive</Badge>
+          <Badge color="warning">Warning</Badge>
+          <Badge color="success">Success</Badge>
+          <Badge color="muted">Muted</Badge>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with extended color palette", async () => {
+      const { container } = render(
+        <div>
+          <Badge color="blue-gray">Blue Gray</Badge>
+          <Badge color="blue-light">Blue Light</Badge>
+          <Badge color="blue">Blue</Badge>
+          <Badge color="indigo">Indigo</Badge>
+          <Badge color="purple">Purple</Badge>
+          <Badge color="pink">Pink</Badge>
+          <Badge color="orange">Orange</Badge>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    /* eslint-disable @typescript-eslint/no-deprecated -- Testing legacy variant API for accessibility */
+    it("has no violations with legacy variants", async () => {
+      const { container } = render(
+        <div>
+          <Badge variant="default">Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+    /* eslint-enable @typescript-eslint/no-deprecated */
+
+    it("has no violations with asChild as link", async () => {
+      const { container } = render(
+        <Badge asChild>
+          <a href="/test">Link Badge</a>
+        </Badge>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with leading icon", async () => {
+      const { container } = render(
+        <Badge leadingIcon={<svg aria-hidden="true" />}>Label</Badge>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with trailing icon", async () => {
+      const { container } = render(
+        <Badge trailingIcon={<svg aria-hidden="true" />}>Label</Badge>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with country flag", async () => {
+      const { container } = render(
+        <Badge country="US">Label</Badge>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with avatar", async () => {
+      const { container } = render(
+        <Badge avatar={{ fallback: "JD" }}>Label</Badge>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with avatar with image", async () => {
+      const { container } = render(
+        <Badge avatar={{ src: "https://example.com/avatar.jpg", fallback: "JD", alt: "User avatar" }}>
+          Label
+        </Badge>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with iconOnly", async () => {
+      const { container } = render(
+        <Badge iconOnly={<svg aria-label="Star icon" role="img" />} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})