@etus/ui 0.1.0

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

@@ -0,0 +1,945 @@
+// ButtonGroup/ButtonGroup.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { ChevronLeft, ChevronRight, Plus } from "lucide-react"
+import { describe, expect, it, vi } from "vitest"
+
+import { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonGroupText } from "./ButtonGroup"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// BUTTONGROUP RENDERING TESTS
+// ============================================
+describe("ButtonGroup", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      expect(screen.getByTestId("button-group")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(
+        <ButtonGroup>
+          <button>Button 1</button>
+          <button>Button 2</button>
+        </ButtonGroup>
+      )
+      expect(screen.getByText("Button 1")).toBeInTheDocument()
+      expect(screen.getByText("Button 2")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <ButtonGroup className="custom-class" data-testid="button-group">
+          Content
+        </ButtonGroup>
+      )
+      expect(screen.getByTestId("button-group")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      expect(screen.getByTestId("button-group")).toHaveAttribute(
+        "data-slot",
+        "button-group"
+      )
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <ButtonGroup data-custom="value" data-testid="button-group">
+          Content
+        </ButtonGroup>
+      )
+      expect(screen.getByTestId("button-group")).toHaveAttribute(
+        "data-custom",
+        "value"
+      )
+    })
+
+    it("renders as div by default", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      expect(screen.getByTestId("button-group").tagName).toBe("DIV")
+    })
+
+    it("has role=group for accessibility", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      expect(screen.getByTestId("button-group")).toHaveAttribute("role", "group")
+    })
+  })
+
+  // ============================================
+  // ORIENTATION VARIANT TESTS
+  // ============================================
+  describe("Orientation Variants", () => {
+    it("applies horizontal orientation by default", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      // When no orientation is provided, defaults to horizontal styling but data-orientation is undefined
+      expect(group).not.toHaveClass("flex-col")
+    })
+
+    it("applies horizontal orientation explicitly", () => {
+      render(
+        <ButtonGroup data-testid="button-group" orientation="horizontal">
+          Content
+        </ButtonGroup>
+      )
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveAttribute("data-orientation", "horizontal")
+      // Horizontal does not have flex-col class
+      expect(group).not.toHaveClass("flex-col")
+    })
+
+    it("applies vertical orientation", () => {
+      render(
+        <ButtonGroup data-testid="button-group" orientation="vertical">
+          Content
+        </ButtonGroup>
+      )
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveAttribute("data-orientation", "vertical")
+      expect(group).toHaveClass("flex-col")
+    })
+
+    it("has data-orientation attribute for horizontal", () => {
+      render(
+        <ButtonGroup data-testid="button-group" orientation="horizontal">
+          Content
+        </ButtonGroup>
+      )
+      expect(screen.getByTestId("button-group")).toHaveAttribute(
+        "data-orientation",
+        "horizontal"
+      )
+    })
+
+    it("has data-orientation attribute for vertical", () => {
+      render(
+        <ButtonGroup data-testid="button-group" orientation="vertical">
+          Content
+        </ButtonGroup>
+      )
+      expect(screen.getByTestId("button-group")).toHaveAttribute(
+        "data-orientation",
+        "vertical"
+      )
+    })
+  })
+
+  // ============================================
+  // BASE STYLING TESTS
+  // ============================================
+  describe("Base Styling", () => {
+    it("has flex display", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      expect(screen.getByTestId("button-group")).toHaveClass("flex")
+    })
+
+    it("has w-fit width", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      expect(screen.getByTestId("button-group")).toHaveClass("w-fit")
+    })
+
+    it("has items-stretch alignment", () => {
+      render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+      expect(screen.getByTestId("button-group")).toHaveClass("items-stretch")
+    })
+  })
+})
+
+// ============================================
+// BUTTONGROUPTEXT RENDERING TESTS
+// ============================================
+describe("ButtonGroupText", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(<ButtonGroupText>Label Text</ButtonGroupText>)
+      expect(screen.getByText("Label Text")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <ButtonGroupText className="custom-class" data-testid="button-group-text">
+          Text
+        </ButtonGroupText>
+      )
+      expect(screen.getByTestId("button-group-text")).toHaveClass("custom-class")
+    })
+
+    it("renders as div by default", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text").tagName).toBe("DIV")
+    })
+
+    it("renders as child element with asChild", () => {
+      render(
+        <ButtonGroupText asChild>
+          <span data-testid="child-span">Child Text</span>
+        </ButtonGroupText>
+      )
+      const span = screen.getByTestId("child-span")
+      expect(span).toBeInTheDocument()
+      expect(span.tagName).toBe("SPAN")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <ButtonGroupText data-custom="value" data-testid="button-group-text">
+          Text
+        </ButtonGroupText>
+      )
+      expect(screen.getByTestId("button-group-text")).toHaveAttribute(
+        "data-custom",
+        "value"
+      )
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPTEXT STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has flex display", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("flex")
+    })
+
+    it("has items-center alignment", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("items-center")
+    })
+
+    it("has bg-muted background", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("bg-muted")
+    })
+
+    it("has border styling", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("border")
+    })
+
+    it("has rounded-md", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("rounded-md")
+    })
+
+    it("has font-medium styling", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("font-medium")
+    })
+
+    it("has text-sm size", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("text-sm")
+    })
+
+    it("has shadow-xs", () => {
+      render(<ButtonGroupText data-testid="button-group-text">Text</ButtonGroupText>)
+      expect(screen.getByTestId("button-group-text")).toHaveClass("shadow-xs")
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPTEXT ASCHILD TESTS
+  // ============================================
+  describe("asChild", () => {
+    it("renders child element with merged props", () => {
+      render(
+        <ButtonGroupText asChild className="custom-class">
+          <span className="existing-class" data-testid="child-span">
+            Text
+          </span>
+        </ButtonGroupText>
+      )
+      const span = screen.getByTestId("child-span")
+      expect(span).toHaveClass("custom-class")
+    })
+
+    it("preserves child element type", () => {
+      render(
+        <ButtonGroupText asChild>
+          <label htmlFor="test">Label</label>
+        </ButtonGroupText>
+      )
+      const label = screen.getByText("Label")
+      expect(label.tagName).toBe("LABEL")
+    })
+  })
+})
+
+// ============================================
+// BUTTONGROUPSEPARATOR RENDERING TESTS
+// ============================================
+describe("ButtonGroupSeparator", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<ButtonGroupSeparator data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(<ButtonGroupSeparator data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toHaveAttribute(
+        "data-slot",
+        "button-group-separator"
+      )
+    })
+
+    it("renders with custom className", () => {
+      render(<ButtonGroupSeparator className="custom-class" data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toHaveClass("custom-class")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(<ButtonGroupSeparator data-custom="value" data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toHaveAttribute(
+        "data-custom",
+        "value"
+      )
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPSEPARATOR ORIENTATION TESTS
+  // ============================================
+  describe("Orientation", () => {
+    it("uses vertical orientation by default", () => {
+      render(<ButtonGroupSeparator data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toHaveAttribute(
+        "data-orientation",
+        "vertical"
+      )
+    })
+
+    it("applies vertical orientation explicitly", () => {
+      render(<ButtonGroupSeparator data-testid="separator" orientation="vertical" />)
+      expect(screen.getByTestId("separator")).toHaveAttribute(
+        "data-orientation",
+        "vertical"
+      )
+    })
+
+    it("applies horizontal orientation", () => {
+      render(<ButtonGroupSeparator data-testid="separator" orientation="horizontal" />)
+      expect(screen.getByTestId("separator")).toHaveAttribute(
+        "data-orientation",
+        "horizontal"
+      )
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPSEPARATOR STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has separator background token", () => {
+      render(<ButtonGroupSeparator data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toHaveClass("bg-[color:var(--button-group-separator-color)]")
+    })
+
+    it("has self-stretch alignment", () => {
+      render(<ButtonGroupSeparator data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toHaveClass("self-stretch")
+    })
+
+    it("has relative positioning", () => {
+      render(<ButtonGroupSeparator data-testid="separator" />)
+      expect(screen.getByTestId("separator")).toHaveClass("relative")
+    })
+  })
+})
+
+// ============================================
+// COMBINED COMPONENT TESTS
+// ============================================
+describe("Combined Components", () => {
+  it("renders ButtonGroup with ButtonGroupText and separator", () => {
+    render(
+      <ButtonGroup data-testid="button-group">
+        <ButtonGroupText data-testid="text">Label</ButtonGroupText>
+        <ButtonGroupSeparator data-testid="separator" />
+        <button>Action</button>
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("button-group")).toBeInTheDocument()
+    expect(screen.getByTestId("text")).toBeInTheDocument()
+    expect(screen.getByTestId("separator")).toBeInTheDocument()
+    expect(screen.getByText("Action")).toBeInTheDocument()
+  })
+
+  it("renders ButtonGroup with multiple buttons", () => {
+    render(
+      <ButtonGroup data-testid="button-group">
+        <button>First</button>
+        <button>Second</button>
+        <button>Third</button>
+      </ButtonGroup>
+    )
+    expect(screen.getByText("First")).toBeInTheDocument()
+    expect(screen.getByText("Second")).toBeInTheDocument()
+    expect(screen.getByText("Third")).toBeInTheDocument()
+  })
+
+  it("renders vertical ButtonGroup with separator", () => {
+    render(
+      <ButtonGroup data-testid="button-group" orientation="vertical">
+        <button>Top</button>
+        <ButtonGroupSeparator data-testid="separator" orientation="horizontal" />
+        <button>Bottom</button>
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("button-group")).toHaveClass("flex-col")
+    expect(screen.getByTestId("separator")).toHaveAttribute(
+      "data-orientation",
+      "horizontal"
+    )
+  })
+
+  it("renders nested ButtonGroups", () => {
+    render(
+      <ButtonGroup data-testid="outer-group">
+        <ButtonGroup data-testid="inner-group">
+          <button>Inner 1</button>
+          <button>Inner 2</button>
+        </ButtonGroup>
+        <button>Outer</button>
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("outer-group")).toBeInTheDocument()
+    expect(screen.getByTestId("inner-group")).toBeInTheDocument()
+    expect(screen.getByText("Inner 1")).toBeInTheDocument()
+    expect(screen.getByText("Inner 2")).toBeInTheDocument()
+    expect(screen.getByText("Outer")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// ACCESSIBILITY TESTS
+// ============================================
+describe("Accessibility", () => {
+  it("ButtonGroup has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroup>
+        <button>Button 1</button>
+        <button>Button 2</button>
+      </ButtonGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("ButtonGroup has role=group attribute", () => {
+    render(<ButtonGroup data-testid="button-group">Content</ButtonGroup>)
+    expect(screen.getByTestId("button-group")).toHaveAttribute("role", "group")
+  })
+
+  it("ButtonGroup can have aria-label", () => {
+    render(
+      <ButtonGroup aria-label="Action buttons" data-testid="button-group">
+        <button>Button 1</button>
+        <button>Button 2</button>
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("button-group")).toHaveAttribute(
+      "aria-label",
+      "Action buttons"
+    )
+  })
+
+  it("ButtonGroup can have aria-labelledby", () => {
+    render(
+      <>
+        <span id="group-label">Button Group Label</span>
+        <ButtonGroup aria-labelledby="group-label" data-testid="button-group">
+          <button>Button 1</button>
+        </ButtonGroup>
+      </>
+    )
+    expect(screen.getByTestId("button-group")).toHaveAttribute(
+      "aria-labelledby",
+      "group-label"
+    )
+  })
+
+  it("ButtonGroupText has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroupText>Label Text</ButtonGroupText>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("ButtonGroupSeparator has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroupSeparator />
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("Combined components have no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroup aria-label="Text input group">
+        <ButtonGroupText>https://</ButtonGroupText>
+        <input aria-label="URL input" type="text" />
+        <button>Submit</button>
+      </ButtonGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("Vertical ButtonGroup has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroup aria-label="Vertical actions" orientation="vertical">
+        <button>Action 1</button>
+        <button>Action 2</button>
+        <button>Action 3</button>
+      </ButtonGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("ButtonGroup with separator has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroup aria-label="Separated buttons">
+        <button>Left</button>
+        <ButtonGroupSeparator />
+        <button>Right</button>
+      </ButtonGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})
+
+// ============================================
+// BUTTONGROUP VARIANT TESTS
+// ============================================
+describe("ButtonGroup Variants", () => {
+  describe("default variant", () => {
+    it("applies default variant styling", () => {
+      render(<ButtonGroup data-testid="button-group" variant="default">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveAttribute("data-variant", "default")
+    })
+
+    it("does not have segmented styling classes", () => {
+      render(<ButtonGroup data-testid="button-group" variant="default">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      expect(group).not.toHaveClass("border-[color:var(--button-group-root-border-color)]")
+      expect(group).not.toHaveClass("shadow-[var(--button-group-root-shadow)]")
+    })
+  })
+
+  describe("segmented variant", () => {
+    it("applies segmented variant styling", () => {
+      render(<ButtonGroup data-testid="button-group" variant="segmented">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveAttribute("data-variant", "segmented")
+    })
+
+    it("has border styling", () => {
+      render(<ButtonGroup data-testid="button-group" variant="segmented">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveClass("border")
+    })
+
+    it("has rounded styling with token", () => {
+      render(<ButtonGroup data-testid="button-group" variant="segmented">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveClass("rounded-[var(--button-group-root-radius)]")
+    })
+
+    it("has shadow styling with token", () => {
+      render(<ButtonGroup data-testid="button-group" variant="segmented">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveClass("shadow-[var(--button-group-root-shadow)]")
+    })
+
+    it("has overflow-clip styling", () => {
+      render(<ButtonGroup data-testid="button-group" variant="segmented">Content</ButtonGroup>)
+      const group = screen.getByTestId("button-group")
+      expect(group).toHaveClass("overflow-clip")
+    })
+  })
+})
+
+// ============================================
+// BUTTONGROUPITEM RENDERING TESTS
+// ============================================
+describe("ButtonGroupItem", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(<ButtonGroupItem>Item Text</ButtonGroupItem>)
+      expect(screen.getByText("Item Text")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <ButtonGroupItem className="custom-class" data-testid="item">
+          Item
+        </ButtonGroupItem>
+      )
+      expect(screen.getByTestId("item")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveAttribute(
+        "data-slot",
+        "button-group-item"
+      )
+    })
+
+    it("renders as button element", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item").tagName).toBe("BUTTON")
+    })
+
+    it("has type=button attribute", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveAttribute("type", "button")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <ButtonGroupItem data-custom="value" data-testid="item">
+          Item
+        </ButtonGroupItem>
+      )
+      expect(screen.getByTestId("item")).toHaveAttribute("data-custom", "value")
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPITEM CURRENT STATE TESTS
+  // ============================================
+  describe("Current State", () => {
+    it("applies default (not current) styling", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      const item = screen.getByTestId("item")
+      expect(item).toHaveAttribute("data-current", "false")
+      expect(item).toHaveClass("bg-[color:var(--button-group-item-background)]")
+    })
+
+    it("applies current styling when current=true", () => {
+      render(<ButtonGroupItem current data-testid="item">Item</ButtonGroupItem>)
+      const item = screen.getByTestId("item")
+      expect(item).toHaveAttribute("data-current", "true")
+      expect(item).toHaveClass("bg-[color:var(--button-group-item-background-active)]")
+    })
+
+    it("applies not current styling when current=false", () => {
+      render(<ButtonGroupItem current={false} data-testid="item">Item</ButtonGroupItem>)
+      const item = screen.getByTestId("item")
+      expect(item).toHaveAttribute("data-current", "false")
+      expect(item).toHaveClass("bg-[color:var(--button-group-item-background)]")
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPITEM ICON MODES TESTS
+  // ============================================
+  describe("Icon Modes", () => {
+    it("applies none icon mode by default", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      const item = screen.getByTestId("item")
+      expect(item).toHaveClass("px-[var(--button-group-item-padding-x)]")
+      expect(item).toHaveClass("py-[var(--button-group-item-padding-y)]")
+    })
+
+    it("renders with leading icon", () => {
+      render(
+        <ButtonGroupItem data-testid="item" icon={<Plus data-testid="icon" />}>
+          Add Item
+        </ButtonGroupItem>
+      )
+      expect(screen.getByTestId("icon")).toBeInTheDocument()
+      expect(screen.getByText("Add Item")).toBeInTheDocument()
+      const item = screen.getByTestId("item")
+      expect(item).toHaveClass("pl-3.5")
+    })
+
+    it("renders icon-only mode when icon provided without children", () => {
+      render(
+        <ButtonGroupItem data-testid="item" icon={<ChevronLeft data-testid="icon" />} />
+      )
+      expect(screen.getByTestId("icon")).toBeInTheDocument()
+      const item = screen.getByTestId("item")
+      expect(item).toHaveClass("px-3")
+    })
+
+    it("renders with dot indicator", () => {
+      render(
+        <ButtonGroupItem dot data-testid="item">
+          Status Item
+        </ButtonGroupItem>
+      )
+      const dot = screen.getByTestId("item").querySelector("[data-slot='button-group-item-dot']")
+      expect(dot).toBeInTheDocument()
+      expect(dot).toHaveClass("bg-success")
+    })
+
+    it("renders with custom dot color", () => {
+      render(
+        <ButtonGroupItem data-testid="item" dot="bg-destructive">
+          Error Item
+        </ButtonGroupItem>
+      )
+      const dot = screen.getByTestId("item").querySelector("[data-slot='button-group-item-dot']")
+      expect(dot).toBeInTheDocument()
+      expect(dot).toHaveClass("bg-destructive")
+    })
+
+    it("renders text in text slot", () => {
+      render(<ButtonGroupItem data-testid="item">Text Content</ButtonGroupItem>)
+      const textSlot = screen.getByTestId("item").querySelector("[data-slot='button-group-item-text']")
+      expect(textSlot).toBeInTheDocument()
+      expect(textSlot).toHaveTextContent("Text Content")
+    })
+
+    it("renders icon in icon slot", () => {
+      render(
+        <ButtonGroupItem data-testid="item" icon={<Plus data-testid="icon" />}>
+          Add
+        </ButtonGroupItem>
+      )
+      const iconSlot = screen.getByTestId("item").querySelector("[data-slot='button-group-item-icon']")
+      expect(iconSlot).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPITEM DISABLED STATE TESTS
+  // ============================================
+  describe("Disabled State", () => {
+    it("can be disabled", () => {
+      render(<ButtonGroupItem disabled data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toBeDisabled()
+    })
+
+    it("is not disabled by default", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).not.toBeDisabled()
+    })
+
+    it("does not fire click when disabled", async () => {
+      const user = userEvent.setup()
+      const handleClick = vi.fn()
+      render(
+        <ButtonGroupItem disabled data-testid="item" onClick={handleClick}>
+          Item
+        </ButtonGroupItem>
+      )
+      await user.click(screen.getByTestId("item"))
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPITEM INTERACTION TESTS
+  // ============================================
+  describe("Interactions", () => {
+    it("fires onClick when clicked", async () => {
+      const user = userEvent.setup()
+      const handleClick = vi.fn()
+      render(
+        <ButtonGroupItem data-testid="item" onClick={handleClick}>
+          Item
+        </ButtonGroupItem>
+      )
+      await user.click(screen.getByTestId("item"))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it("fires onFocus when focused", async () => {
+      const user = userEvent.setup()
+      const handleFocus = vi.fn()
+      render(
+        <ButtonGroupItem data-testid="item" onFocus={handleFocus}>
+          Item
+        </ButtonGroupItem>
+      )
+      await user.tab()
+      expect(handleFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it("fires onBlur when blurred", async () => {
+      const user = userEvent.setup()
+      const handleBlur = vi.fn()
+      render(
+        <ButtonGroupItem data-testid="item" onBlur={handleBlur}>
+          Item
+        </ButtonGroupItem>
+      )
+      await user.tab()
+      await user.tab()
+      expect(handleBlur).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ============================================
+  // BUTTONGROUPITEM STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has inline-flex display", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveClass("inline-flex")
+    })
+
+    it("has items-center alignment", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveClass("items-center")
+    })
+
+    it("has justify-center alignment", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveClass("justify-center")
+    })
+
+    it("has gap token spacing", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveClass("gap-[var(--button-group-item-gap)]")
+    })
+
+    it("has font-size token", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveClass("text-[length:var(--button-group-item-font-size)]")
+    })
+
+    it("has font-weight token", () => {
+      render(<ButtonGroupItem data-testid="item">Item</ButtonGroupItem>)
+      expect(screen.getByTestId("item")).toHaveClass("font-[var(--button-group-item-font-weight)]")
+    })
+  })
+})
+
+// ============================================
+// SEGMENTED BUTTONGROUP COMBINED TESTS
+// ============================================
+describe("Segmented ButtonGroup Combined", () => {
+  it("renders segmented ButtonGroup with ButtonGroupItems", () => {
+    render(
+      <ButtonGroup aria-label="View options" data-testid="button-group" variant="segmented">
+        <ButtonGroupItem data-testid="item-1">List</ButtonGroupItem>
+        <ButtonGroupItem data-testid="item-2">Grid</ButtonGroupItem>
+        <ButtonGroupItem data-testid="item-3">Table</ButtonGroupItem>
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("button-group")).toBeInTheDocument()
+    expect(screen.getByTestId("item-1")).toBeInTheDocument()
+    expect(screen.getByTestId("item-2")).toBeInTheDocument()
+    expect(screen.getByTestId("item-3")).toBeInTheDocument()
+  })
+
+  it("renders segmented ButtonGroup with current item", () => {
+    render(
+      <ButtonGroup aria-label="View options" data-testid="button-group" variant="segmented">
+        <ButtonGroupItem current data-testid="item-1">List</ButtonGroupItem>
+        <ButtonGroupItem data-testid="item-2">Grid</ButtonGroupItem>
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("item-1")).toHaveAttribute("data-current", "true")
+    expect(screen.getByTestId("item-2")).toHaveAttribute("data-current", "false")
+  })
+
+  it("renders segmented ButtonGroup with icons", () => {
+    render(
+      <ButtonGroup aria-label="Navigation" data-testid="button-group" variant="segmented">
+        <ButtonGroupItem data-testid="item-prev" icon={<ChevronLeft data-testid="icon-prev" />} />
+        <ButtonGroupItem data-testid="item-next" icon={<ChevronRight data-testid="icon-next" />} />
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("icon-prev")).toBeInTheDocument()
+    expect(screen.getByTestId("icon-next")).toBeInTheDocument()
+  })
+
+  it("renders vertical segmented ButtonGroup", () => {
+    render(
+      <ButtonGroup
+        aria-label="Options"
+        data-testid="button-group"
+        orientation="vertical"
+        variant="segmented"
+      >
+        <ButtonGroupItem data-testid="item-1">Option 1</ButtonGroupItem>
+        <ButtonGroupItem data-testid="item-2">Option 2</ButtonGroupItem>
+      </ButtonGroup>
+    )
+    expect(screen.getByTestId("button-group")).toHaveClass("flex-col")
+    expect(screen.getByTestId("button-group")).toHaveAttribute("data-orientation", "vertical")
+  })
+})
+
+// ============================================
+// BUTTONGROUPITEM ACCESSIBILITY TESTS
+// ============================================
+describe("ButtonGroupItem Accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroupItem>Item</ButtonGroupItem>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("disabled item has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroupItem disabled>Disabled Item</ButtonGroupItem>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("current item has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroupItem current>Current Item</ButtonGroupItem>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("item with icon has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroupItem icon={<Plus />}>Add Item</ButtonGroupItem>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("icon-only item has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroupItem aria-label="Previous" icon={<ChevronLeft />} />
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("segmented ButtonGroup with items has no accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroup aria-label="View options" variant="segmented">
+        <ButtonGroupItem current>List</ButtonGroupItem>
+        <ButtonGroupItem>Grid</ButtonGroupItem>
+        <ButtonGroupItem>Table</ButtonGroupItem>
+      </ButtonGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})