@etus/ui 0.1.1 → 0.1.2

package/src/components/forms/ColorPicker/ColorPicker.test.tsx

@@ -1,916 +0,0 @@
-// ColorPicker/ColorPicker.test.tsx
-import { render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { beforeAll, describe, expect, it, vi } from "vitest"
-
-import { ColorPicker } from "./ColorPicker"
-
-expect.extend(toHaveNoViolations)
-
-// Mock pointer capture methods for JSDOM (Radix Popover uses them)
-beforeAll(() => {
-  Element.prototype.hasPointerCapture = vi.fn(() => false)
-  Element.prototype.setPointerCapture = vi.fn()
-  Element.prototype.releasePointerCapture = vi.fn()
-})
-
-// Helper to open the color picker
-async function openColorPicker(user: ReturnType<typeof userEvent.setup>) {
-  const trigger = screen.getByRole("combobox")
-  await user.click(trigger)
-}
-
-function getNativeInput(): HTMLInputElement {
-  const input = document.querySelector<HTMLInputElement>('[data-slot="color-picker-native"]')
-  if (!input) {
-    throw new Error("Expected native color input to exist.")
-  }
-  return input
-}
-
-function getHexInput(): HTMLInputElement {
-  const input = document.querySelector<HTMLInputElement>('[data-slot="color-picker-input"]')
-  if (!input) {
-    throw new Error("Expected hex input to exist.")
-  }
-  return input
-}
-
-function getSwatchAt(index: number): HTMLButtonElement {
-  const swatches = document.querySelectorAll<HTMLButtonElement>('[data-slot="color-picker-swatch"]')
-  const swatch = swatches[index]
-  if (!swatch) {
-    throw new Error(`Expected swatch at index ${String(index)}.`)
-  }
-  return swatch
-}
-
-// Test colors
-const testColor = "#ff0000"
-const testColor2 = "#00ff00"
-
-// ============================================
-// RENDERING TESTS
-// ============================================
-describe("ColorPicker", () => {
-  describe("Rendering", () => {
-    it("renders correctly", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toBeInTheDocument()
-    })
-
-    it("renders with custom className", () => {
-      render(<ColorPicker aria-label="Select color" className="custom-class" />)
-      const wrapper = screen.getByRole("combobox").closest('[data-slot="color-picker"]')
-      expect(wrapper).toHaveClass("custom-class")
-    })
-
-    it("renders with placeholder", () => {
-      render(<ColorPicker aria-label="Select color" placeholder="Pick a color" />)
-      expect(screen.getByText("Pick a color")).toBeInTheDocument()
-    })
-
-    it("renders with default value", () => {
-      render(<ColorPicker aria-label="Select color" defaultValue={testColor} />)
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-    })
-
-    it("renders with controlled value", () => {
-      render(<ColorPicker aria-label="Select color" value={testColor} onChange={() => {}} />)
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-    })
-
-    it("has data-slot attribute on wrapper", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      const wrapper = screen.getByRole("combobox").closest('[data-slot="color-picker"]')
-      expect(wrapper).toHaveAttribute("data-slot", "color-picker")
-    })
-
-    it("has data-slot attribute on trigger", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "color-picker-trigger")
-    })
-
-    it("renders palette icon", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      const trigger = screen.getByRole("combobox")
-      expect(trigger.querySelector("svg")).toBeInTheDocument()
-    })
-
-    it("renders color preview when value is set", () => {
-      render(<ColorPicker aria-label="Select color" defaultValue={testColor} />)
-      const preview = screen.getByRole("combobox").querySelector('[data-slot="color-picker-preview"]')
-      expect(preview).toBeInTheDocument()
-      expect(preview).toHaveStyle({ backgroundColor: testColor })
-    })
-
-    it("does not render preview when showPreview is false", () => {
-      render(<ColorPicker aria-label="Select color" defaultValue={testColor} showPreview={false} />)
-      const preview = screen.getByRole("combobox").querySelector('[data-slot="color-picker-preview"]')
-      expect(preview).not.toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // STATE TESTS
-  // ============================================
-  describe("States", () => {
-    it("handles disabled state", () => {
-      render(<ColorPicker disabled aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toBeDisabled()
-    })
-
-    it("applies disabled styling", () => {
-      render(<ColorPicker disabled aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveClass("disabled:opacity-50")
-    })
-
-    it("handles aria-invalid state", () => {
-      render(<ColorPicker invalid aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true")
-    })
-
-    it("handles required state", () => {
-      render(<ColorPicker required aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true")
-    })
-
-    it("shows placeholder when no value selected", () => {
-      render(<ColorPicker aria-label="Select color" placeholder="Choose color" />)
-      expect(screen.getByText("Choose color")).toBeInTheDocument()
-    })
-
-    it("shows selected color instead of placeholder", () => {
-      render(<ColorPicker aria-label="Select color" defaultValue={testColor} placeholder="Choose color" />)
-      expect(screen.queryByText("Choose color")).not.toBeInTheDocument()
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-    })
-
-    it("applies muted color when no color selected", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveClass("text-muted-foreground")
-    })
-
-    it("removes muted color when color is selected", () => {
-      render(<ColorPicker aria-label="Select color" defaultValue={testColor} />)
-      expect(screen.getByRole("combobox")).not.toHaveClass("text-muted-foreground")
-    })
-  })
-
-  // ============================================
-  // POPOVER TESTS
-  // ============================================
-  describe("Popover", () => {
-    it("opens popover when trigger is clicked", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-    })
-
-    it("shows color picker content when opened", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" defaultValue={testColor} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const content = document.querySelector('[data-slot="color-picker-content"]')
-        expect(content).toBeInTheDocument()
-      })
-    })
-
-    it("shows native color input in popover", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const nativeInput = document.querySelector('[data-slot="color-picker-native"]')
-        expect(nativeInput).toBeInTheDocument()
-      })
-    })
-
-    it("shows hex input in popover when showInput is true", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" showInput={true} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const hexInput = document.querySelector('[data-slot="color-picker-input"]')
-        expect(hexInput).toBeInTheDocument()
-      })
-    })
-
-    it("hides hex input when showInput is false", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" showInput={false} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const hexInput = document.querySelector('[data-slot="color-picker-input"]')
-      expect(hexInput).not.toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // COLOR SELECTION TESTS
-  // ============================================
-  describe("Color Selection", () => {
-    it("calls onChange when color is selected from native input", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const nativeInput = getNativeInput()
-      // Use fireEvent for native inputs as userEvent doesn't support color inputs well
-      await user.click(nativeInput)
-      // Manually trigger the change with React-compatible approach
-      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(nativeInput, testColor)
-      nativeInput.dispatchEvent(new Event("input", { bubbles: true }))
-      nativeInput.dispatchEvent(new Event("change", { bubbles: true }))
-
-      expect(handleChange).toHaveBeenCalledWith(testColor)
-    })
-
-    it("updates value when hex input is changed", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const hexInput = getHexInput()
-      await user.clear(hexInput)
-      await user.type(hexInput, "#00ff00")
-
-      // Check last call since it validates on each character typed
-      expect(handleChange).toHaveBeenLastCalledWith("#00ff00")
-    })
-
-    it("auto-prefixes # to hex input", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const hexInput = getHexInput()
-      await user.clear(hexInput)
-      await user.type(hexInput, "00ff00")
-
-      // Check last call since it validates on each character typed
-      expect(handleChange).toHaveBeenLastCalledWith("#00ff00")
-    })
-  })
-
-  // ============================================
-  // SWATCH TESTS
-  // ============================================
-  describe("Preset Swatches", () => {
-    it("renders default swatches", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const swatches = document.querySelectorAll('[data-slot="color-picker-swatch"]')
-        expect(swatches.length).toBe(10) // Default 10 swatches
-      })
-    })
-
-    it("renders custom swatches", async () => {
-      const user = userEvent.setup()
-      const customSwatches = ["#ff0000", "#00ff00", "#0000ff"]
-      render(<ColorPicker aria-label="Select color" swatches={customSwatches} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const swatches = document.querySelectorAll('[data-slot="color-picker-swatch"]')
-        expect(swatches.length).toBe(3)
-      })
-    })
-
-    it("calls onChange when swatch is clicked", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      const customSwatches = ["#ff0000", "#00ff00", "#0000ff"]
-      render(<ColorPicker aria-label="Select color" swatches={customSwatches} onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const greenSwatch = getSwatchAt(1)
-      await user.click(greenSwatch) // Click green swatch
-
-      expect(handleChange).toHaveBeenCalledWith("#00ff00")
-    })
-
-    it("marks selected swatch with data-selected", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" defaultValue="#00ff00" swatches={["#ff0000", "#00ff00", "#0000ff"]} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const selectedSwatch = document.querySelector('[data-slot="color-picker-swatch"][data-selected="true"]')
-        expect(selectedSwatch).toBeInTheDocument()
-        expect(selectedSwatch).toHaveAttribute("data-color", "#00ff00")
-      })
-    })
-
-    it("hides swatches when empty array passed", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" swatches={[]} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const swatchesContainer = document.querySelector('[data-slot="color-picker-swatches"]')
-      expect(swatchesContainer).not.toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // EVENT TESTS
-  // ============================================
-  describe("Events", () => {
-    it("calls onOpenChange when popover opens", async () => {
-      const user = userEvent.setup()
-      const handleOpenChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onOpenChange={handleOpenChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(handleOpenChange).toHaveBeenCalledWith(true)
-      })
-    })
-
-    it("calls onOpenChange when popover closes", async () => {
-      const user = userEvent.setup()
-      const handleOpenChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onOpenChange={handleOpenChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      await user.keyboard("{Escape}")
-
-      await waitFor(() => {
-        expect(handleOpenChange).toHaveBeenCalledWith(false)
-      })
-    })
-
-    it("does not open when disabled", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker disabled aria-label="Select color" />)
-
-      const trigger = screen.getByRole("combobox")
-      await user.click(trigger)
-
-      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // SIZE VARIANT TESTS
-  // ============================================
-  describe("Size Variants", () => {
-    it("applies default size (md)", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveClass("h-9")
-    })
-
-    it("applies sm size", () => {
-      render(<ColorPicker aria-label="Select color" size="sm" />)
-      expect(screen.getByRole("combobox")).toHaveClass("h-8")
-    })
-
-    it("applies md size", () => {
-      render(<ColorPicker aria-label="Select color" size="md" />)
-      expect(screen.getByRole("combobox")).toHaveClass("h-9")
-    })
-
-    it("applies lg size", () => {
-      render(<ColorPicker aria-label="Select color" size="lg" />)
-      expect(screen.getByRole("combobox")).toHaveClass("h-10")
-    })
-
-    it("has data-size attribute for sm", () => {
-      render(<ColorPicker aria-label="Select color" size="sm" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "sm")
-    })
-
-    it("has data-size attribute for md", () => {
-      render(<ColorPicker aria-label="Select color" size="md" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "md")
-    })
-
-    it("has data-size attribute for lg", () => {
-      render(<ColorPicker aria-label="Select color" size="lg" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "lg")
-    })
-  })
-
-  // ============================================
-  // VISUAL VARIANT TESTS
-  // ============================================
-  describe("Visual Variants", () => {
-    it("applies default variant", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveClass("border-input")
-    })
-
-    it("applies filled variant", () => {
-      render(<ColorPicker aria-label="Select color" variant="filled" />)
-      expect(screen.getByRole("combobox")).toHaveClass("bg-muted")
-    })
-
-    it("applies flushed variant", () => {
-      render(<ColorPicker aria-label="Select color" variant="flushed" />)
-      expect(screen.getByRole("combobox")).toHaveClass("rounded-none")
-      expect(screen.getByRole("combobox")).toHaveClass("border-x-0")
-    })
-
-    it("has data-variant attribute for default", () => {
-      render(<ColorPicker aria-label="Select color" variant="default" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "default")
-    })
-
-    it("has data-variant attribute for filled", () => {
-      render(<ColorPicker aria-label="Select color" variant="filled" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "filled")
-    })
-
-    it("has data-variant attribute for flushed", () => {
-      render(<ColorPicker aria-label="Select color" variant="flushed" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "flushed")
-    })
-  })
-
-  // ============================================
-  // KEYBOARD NAVIGATION TESTS
-  // ============================================
-  describe("Keyboard Navigation", () => {
-    it("opens popover with Enter key", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      screen.getByRole("combobox").focus()
-      await user.keyboard("{Enter}")
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-    })
-
-    it("opens popover with Space key", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      screen.getByRole("combobox").focus()
-      await user.keyboard(" ")
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-    })
-
-    it("closes popover with Escape key", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      await user.keyboard("{Escape}")
-
-      await waitFor(() => {
-        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // CONTROLLED STATE TESTS
-  // ============================================
-  describe("Controlled State", () => {
-    it("respects controlled value", () => {
-      const { rerender } = render(
-        <ColorPicker aria-label="Select color" value={testColor} onChange={() => {}} />
-      )
-
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-
-      rerender(<ColorPicker aria-label="Select color" value={testColor2} onChange={() => {}} />)
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor2)
-    })
-
-    it("reports new value via onChange", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" swatches={[testColor2]} value={testColor} onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const swatch = getSwatchAt(0)
-      await user.click(swatch)
-
-      expect(handleChange).toHaveBeenCalledWith(testColor2)
-    })
-
-    it("maintains controlled state across renders", () => {
-      const { rerender } = render(
-        <ColorPicker aria-label="Select color" value={testColor} onChange={() => {}} />
-      )
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-
-      rerender(<ColorPicker aria-label="Select color" value={testColor} onChange={() => {}} />)
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-    })
-  })
-
-  // ============================================
-  // FOCUS TESTS
-  // ============================================
-  describe("Focus", () => {
-    it("trigger is focusable", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      const trigger = screen.getByRole("combobox")
-      trigger.focus()
-      expect(trigger).toHaveFocus()
-    })
-
-    it("trigger is not focusable when disabled", () => {
-      render(<ColorPicker disabled aria-label="Select color" />)
-      const trigger = screen.getByRole("combobox")
-      trigger.focus()
-      expect(trigger).not.toHaveFocus()
-    })
-
-    it("can be focused via Tab", async () => {
-      const user = userEvent.setup()
-      render(
-        <div>
-          <button>Before</button>
-          <ColorPicker aria-label="Select color" />
-        </div>
-      )
-
-      await user.tab()
-      await user.tab()
-      expect(screen.getByRole("combobox")).toHaveFocus()
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations with aria-label", async () => {
-      const { container } = render(
-        <label>
-          Favorite color
-          <ColorPicker id="color" />
-        </label>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("trigger has combobox role", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toBeInTheDocument()
-    })
-
-    it("trigger has aria-haspopup", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("aria-haspopup", "dialog")
-    })
-
-    it("trigger has aria-expanded", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "false")
-    })
-
-    it("trigger has aria-expanded=true when open", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true")
-      })
-    })
-
-    it("supports aria-label prop", () => {
-      render(<ColorPicker aria-label="Select your favorite color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("aria-label")
-    })
-
-    it("supports aria-labelledby", () => {
-      render(
-        <>
-          <span id="my-label">Pick a color</span>
-          <ColorPicker aria-labelledby="my-label" />
-        </>
-      )
-      expect(screen.getByRole("combobox")).toHaveAttribute("aria-labelledby", "my-label")
-    })
-
-    it("swatches have aria-pressed attribute", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" defaultValue="#ff0000" swatches={["#ff0000", "#00ff00"]} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const swatches = document.querySelectorAll('[data-slot="color-picker-swatch"]')
-        expect(swatches[0]).toHaveAttribute("aria-pressed", "true")
-        expect(swatches[1]).toHaveAttribute("aria-pressed", "false")
-      })
-    })
-
-    it("swatches have aria-label", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" swatches={["#ff0000"]} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const swatch = document.querySelector('[data-slot="color-picker-swatch"]')
-        expect(swatch).toHaveAttribute("aria-label", "Select color #ff0000")
-      })
-    })
-  })
-
-  // ============================================
-  // DATA ATTRIBUTE TESTS
-  // ============================================
-  describe("Data Attributes", () => {
-    it("has data-slot on wrapper", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      const wrapper = screen.getByRole("combobox").closest('[data-slot="color-picker"]')
-      expect(wrapper).toBeInTheDocument()
-    })
-
-    it("has data-slot on trigger", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "color-picker-trigger")
-    })
-
-    it("has data-slot on content when opened", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        const content = document.querySelector('[data-slot="color-picker-content"]')
-        expect(content).toBeInTheDocument()
-      })
-    })
-
-    it("has data-state on trigger", () => {
-      render(<ColorPicker aria-label="Select color" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "closed")
-    })
-
-    it("has data-state=open when opened", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "open")
-      })
-    })
-  })
-
-  // ============================================
-  // FORM INTEGRATION TESTS
-  // ============================================
-  describe("Form Integration", () => {
-    it("renders hidden input with name", () => {
-      const { container } = render(<ColorPicker aria-label="Select color" name="color" />)
-      const hiddenInput = container.querySelector('input[type="hidden"][name="color"]')
-      expect(hiddenInput).toBeInTheDocument()
-    })
-
-    it("hidden input has color value", () => {
-      const { container } = render(<ColorPicker aria-label="Select color" defaultValue={testColor} name="color" />)
-      const hiddenInput = container.querySelector('input[type="hidden"]')
-      expect(hiddenInput).toBeDefined()
-      expect((hiddenInput as HTMLInputElement).value).toBe(testColor)
-    })
-
-    it("hidden input is empty when no color selected", () => {
-      const { container } = render(<ColorPicker aria-label="Select color" name="color" />)
-      const hiddenInput = container.querySelector('input[type="hidden"]')
-      expect(hiddenInput).toBeDefined()
-      expect((hiddenInput as HTMLInputElement).value).toBe("")
-    })
-
-    it("supports id for label association", () => {
-      render(<ColorPicker aria-label="Select color" id="color-input" />)
-      expect(screen.getByRole("combobox")).toHaveAttribute("id", "color-input")
-    })
-  })
-
-  // ============================================
-  // HEX INPUT VALIDATION TESTS
-  // ============================================
-  describe("Hex Input Validation", () => {
-    it("accepts valid 6-digit hex", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const hexInput = getHexInput()
-      await user.clear(hexInput)
-      await user.type(hexInput, "#abcdef")
-
-      // Check last call since it validates on each character typed
-      expect(handleChange).toHaveBeenLastCalledWith("#abcdef")
-    })
-
-    it("accepts valid 3-digit hex and converts to 6-digit on blur", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const hexInput = getHexInput()
-      await user.clear(hexInput)
-      await user.type(hexInput, "#abc")
-
-      // 3-digit hex should not trigger onChange during typing
-      expect(handleChange).not.toHaveBeenCalled()
-
-      // Blur the input to trigger 3-digit hex conversion
-      await user.tab()
-
-      // Check that 3-digit hex is expanded to 6-digit on blur
-      expect(handleChange).toHaveBeenLastCalledWith("#aabbcc")
-    })
-
-    it("does not call onChange for invalid hex", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const hexInput = getHexInput()
-      await user.clear(hexInput)
-      await user.type(hexInput, "xyz")
-
-      // Should not have been called with invalid value
-      expect(handleChange).not.toHaveBeenCalledWith("xyz")
-      expect(handleChange).not.toHaveBeenCalledWith("#xyz")
-    })
-  })
-
-  // ============================================
-  // EDGE CASES TESTS
-  // ============================================
-  describe("Edge Cases", () => {
-    it("handles empty className", () => {
-      render(<ColorPicker aria-label="Select color" className="" />)
-      expect(screen.getByRole("combobox")).toBeInTheDocument()
-    })
-
-    it("handles whitespace-only className", () => {
-      render(<ColorPicker aria-label="Select color" className="   " />)
-      expect(screen.getByRole("combobox")).toBeInTheDocument()
-    })
-
-    it("handles rapid open/close correctly", async () => {
-      const user = userEvent.setup()
-      render(<ColorPicker aria-label="Select color" />)
-
-      const trigger = screen.getByRole("combobox")
-      await user.click(trigger)
-      await user.keyboard("{Escape}")
-      await user.click(trigger)
-      await user.keyboard("{Escape}")
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-    })
-
-    it("maintains state through re-renders", () => {
-      const { rerender } = render(<ColorPicker aria-label="Select color" defaultValue={testColor} />)
-
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-
-      rerender(<ColorPicker aria-label="Select color" defaultValue={testColor} />)
-      expect(screen.getByRole("combobox")).toHaveTextContent(testColor)
-    })
-
-    it("normalizes uppercase hex to lowercase", async () => {
-      const user = userEvent.setup()
-      const handleChange = vi.fn()
-      render(<ColorPicker aria-label="Select color" onChange={handleChange} />)
-
-      await openColorPicker(user)
-
-      await waitFor(() => {
-        expect(screen.getByRole("dialog")).toBeInTheDocument()
-      })
-
-      const hexInput = getHexInput()
-      await user.clear(hexInput)
-      await user.type(hexInput, "#AABBCC")
-
-      // Check last call since it validates on each character typed
-      expect(handleChange).toHaveBeenLastCalledWith("#aabbcc")
-    })
-  })
-
-  // ============================================
-  // TYPE SAFETY TESTS
-  // ============================================
-  describe("Type Safety", () => {
-    it("accepts valid size prop values", () => {
-      const sizes = ["sm", "md", "lg"] as const
-      sizes.forEach((size) => {
-        const { unmount } = render(<ColorPicker aria-label="Select color" size={size} />)
-        expect(screen.getByRole("combobox")).toBeInTheDocument()
-        unmount()
-      })
-    })
-
-    it("accepts valid variant prop values", () => {
-      const variants = ["default", "filled", "flushed"] as const
-      variants.forEach((variant) => {
-        const { unmount } = render(<ColorPicker aria-label="Select color" variant={variant} />)
-        expect(screen.getByRole("combobox")).toBeInTheDocument()
-        unmount()
-      })
-    })
-  })
-})