@etus/ui 0.1.0

package/src/components/navigation/Menubar/Menubar.test.tsx

@@ -0,0 +1,1028 @@
+// Menubar/Menubar.test.tsx
+import { 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 {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "./Menubar"
+
+expect.extend(toHaveNoViolations)
+
+// Helper to open menubar menu
+async function openMenubarMenu(trigger: HTMLElement) {
+  const user = userEvent.setup()
+  await user.click(trigger)
+}
+
+// ============================================
+// MENUBAR ROOT TESTS
+// ============================================
+describe("Menubar", () => {
+  it("renders menubar", () => {
+    render(
+      <Menubar data-testid="menubar">
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+    expect(screen.getByTestId("menubar")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", () => {
+    render(
+      <Menubar data-testid="menubar">
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+    expect(screen.getByTestId("menubar")).toHaveAttribute("data-slot", "menubar")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <Menubar className="custom-class" data-testid="menubar">
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+    expect(screen.getByTestId("menubar")).toHaveClass("custom-class")
+  })
+
+  it("applies base styles", () => {
+    render(
+      <Menubar data-testid="menubar">
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+    const menubar = screen.getByTestId("menubar")
+    expect(menubar).toHaveClass("bg-background")
+    expect(menubar).toHaveClass("rounded-[var(--menubar-root-radius)]")
+    expect(menubar).toHaveClass("border-[var(--menubar-root-border-width)]")
+  })
+})
+
+// ============================================
+// MENUBAR TRIGGER TESTS
+// ============================================
+describe("MenubarTrigger", () => {
+  it("renders trigger", () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+    expect(screen.getByTestId("trigger")).toBeInTheDocument()
+    expect(screen.getByText("File")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+    expect(screen.getByTestId("trigger")).toHaveAttribute(
+      "data-slot",
+      "menubar-trigger"
+    )
+  })
+
+  it("opens menu on click", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("New")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// MENUBAR CONTENT TESTS
+// ============================================
+describe("MenubarContent", () => {
+  it("has data-slot attribute when open", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent data-testid="content">
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("content")).toHaveAttribute(
+      "data-slot",
+      "menubar-content"
+    )
+  })
+
+  it("applies custom className", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent className="custom-class" data-testid="content">
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("content")).toHaveClass("custom-class")
+  })
+
+  it("applies base styles", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent data-testid="content">
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const content = screen.getByTestId("content")
+    expect(content).toHaveClass("bg-popover")
+    expect(content).toHaveClass("text-popover-foreground")
+    expect(content).toHaveClass("rounded-[var(--menubar-content-radius)]")
+    expect(content).toHaveClass("border-[var(--menubar-content-border-width)]")
+  })
+})
+
+// ============================================
+// MENUBAR ITEM TESTS
+// ============================================
+describe("MenubarItem", () => {
+  it("renders with text content", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("New")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem data-testid="item">New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveAttribute(
+      "data-slot",
+      "menubar-item"
+    )
+  })
+
+  it("applies inset data attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem inset data-testid="item">
+              Inset Item
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveAttribute("data-inset", "true")
+  })
+
+  it("applies inset styles when inset prop is true", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem inset data-testid="item">
+              Inset Item
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveClass("pl-[var(--menubar-item-inset-padding-left)]")
+  })
+
+  it("applies default variant", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem data-testid="item">New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveAttribute("data-variant", "default")
+  })
+
+  it("applies destructive variant", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem data-testid="item" variant="destructive">
+              Delete
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const item = screen.getByTestId("item")
+    expect(item).toHaveAttribute("data-variant", "destructive")
+    expect(item).toHaveClass("text-destructive")
+  })
+
+  it("applies custom className", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem className="custom-class" data-testid="item">
+              New
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveClass("custom-class")
+  })
+
+  it("calls onSelect when clicked", async () => {
+    const handleSelect = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem onSelect={handleSelect}>New</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+    await user.click(screen.getByText("New"))
+
+    expect(handleSelect).toHaveBeenCalled()
+  })
+})
+
+// ============================================
+// MENUBAR CHECKBOX ITEM TESTS
+// ============================================
+describe("MenubarCheckboxItem", () => {
+  it("renders with text content", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Show Toolbar")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem data-testid="checkbox">
+              Option
+            </MenubarCheckboxItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("checkbox")).toHaveAttribute(
+      "data-slot",
+      "menubar-checkbox-item"
+    )
+  })
+
+  it("renders with checked state", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem checked data-testid="checkbox">
+              Checked Option
+            </MenubarCheckboxItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("checkbox")).toHaveAttribute("data-state", "checked")
+  })
+
+  it("applies custom className", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem className="custom-class" data-testid="checkbox">
+              Option
+            </MenubarCheckboxItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("checkbox")).toHaveClass("custom-class")
+  })
+})
+
+// ============================================
+// MENUBAR RADIO GROUP TESTS
+// ============================================
+describe("MenubarRadioGroup and MenubarRadioItem", () => {
+  it("renders radio items", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value="option1">
+              <MenubarRadioItem value="option1">Option 1</MenubarRadioItem>
+              <MenubarRadioItem value="option2">Option 2</MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Option 1")).toBeInTheDocument()
+    expect(screen.getByText("Option 2")).toBeInTheDocument()
+  })
+
+  it("radio item has data-slot attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value="option1">
+              <MenubarRadioItem data-testid="radio" value="option1">
+                Option
+              </MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("radio")).toHaveAttribute(
+      "data-slot",
+      "menubar-radio-item"
+    )
+  })
+
+  it("marks selected item as checked", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value="option1">
+              <MenubarRadioItem data-testid="radio1" value="option1">
+                Option 1
+              </MenubarRadioItem>
+              <MenubarRadioItem data-testid="radio2" value="option2">
+                Option 2
+              </MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("radio1")).toHaveAttribute("data-state", "checked")
+    expect(screen.getByTestId("radio2")).toHaveAttribute("data-state", "unchecked")
+  })
+})
+
+// ============================================
+// MENUBAR LABEL TESTS
+// ============================================
+describe("MenubarLabel", () => {
+  it("renders label text", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarLabel>Recent Files</MenubarLabel>
+            <MenubarItem>Document.txt</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Recent Files")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarLabel data-testid="label">Label</MenubarLabel>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("label")).toHaveAttribute(
+      "data-slot",
+      "menubar-label"
+    )
+  })
+
+  it("applies inset styles when inset prop is true", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarLabel inset data-testid="label">
+              Inset Label
+            </MenubarLabel>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("label")).toHaveClass("pl-[var(--menubar-item-inset-padding-left)]")
+  })
+
+  it("applies font-medium style", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarLabel data-testid="label">Label</MenubarLabel>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("label")).toHaveClass("font-medium")
+  })
+})
+
+// ============================================
+// MENUBAR SEPARATOR TESTS
+// ============================================
+describe("MenubarSeparator", () => {
+  it("renders separator", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>Item 1</MenubarItem>
+            <MenubarSeparator data-testid="separator" />
+            <MenubarItem>Item 2</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("separator")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSeparator data-testid="separator" />
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("separator")).toHaveAttribute(
+      "data-slot",
+      "menubar-separator"
+    )
+  })
+
+  it("applies separator styles", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSeparator data-testid="separator" />
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const separator = screen.getByTestId("separator")
+    expect(separator).toHaveClass("bg-border")
+    expect(separator).toHaveClass("h-[var(--menubar-separator-height)]")
+  })
+})
+
+// ============================================
+// MENUBAR SHORTCUT TESTS
+// ============================================
+describe("MenubarShortcut", () => {
+  it("renders shortcut text", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              Save
+              <MenubarShortcut>Cmd+S</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Cmd+S")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              Save
+              <MenubarShortcut data-testid="shortcut">Cmd+S</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("shortcut")).toHaveAttribute(
+      "data-slot",
+      "menubar-shortcut"
+    )
+  })
+
+  it("applies shortcut styles", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              Save
+              <MenubarShortcut data-testid="shortcut">Cmd+S</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const shortcut = screen.getByTestId("shortcut")
+    expect(shortcut).toHaveClass("text-muted-foreground")
+    expect(shortcut).toHaveClass("ml-auto")
+    expect(shortcut).toHaveClass("text-[length:var(--menubar-shortcut-text-size)]")
+    expect(shortcut).toHaveClass("tracking-widest")
+  })
+})
+
+// ============================================
+// MENUBAR GROUP TESTS
+// ============================================
+describe("MenubarGroup", () => {
+  it("groups items together", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarGroup data-testid="group">
+              <MenubarItem>Item 1</MenubarItem>
+              <MenubarItem>Item 2</MenubarItem>
+            </MenubarGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const group = screen.getByTestId("group")
+    expect(group).toBeInTheDocument()
+    expect(group).toHaveAttribute("data-slot", "menubar-group")
+  })
+})
+
+// ============================================
+// MENUBAR SUB TESTS
+// ============================================
+describe("MenubarSub", () => {
+  it("renders sub trigger", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSub>
+              <MenubarSubTrigger data-testid="sub-trigger">
+                Share
+              </MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Email</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("sub-trigger")).toBeInTheDocument()
+  })
+
+  it("sub trigger has data-slot attribute", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSub>
+              <MenubarSubTrigger data-testid="sub-trigger">
+                Share
+              </MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Email</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("sub-trigger")).toHaveAttribute(
+      "data-slot",
+      "menubar-sub-trigger"
+    )
+  })
+
+  it("sub trigger applies inset styles", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSub>
+              <MenubarSubTrigger inset data-testid="sub-trigger">
+                Share
+              </MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Email</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("sub-trigger")).toHaveClass("pl-[var(--menubar-item-inset-padding-left)]")
+  })
+
+  it("sub trigger contains chevron icon", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSub>
+              <MenubarSubTrigger data-testid="sub-trigger">
+                Share
+              </MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Email</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const subTrigger = screen.getByTestId("sub-trigger")
+    expect(subTrigger.querySelector("svg")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// COMPLETE MENUBAR TESTS
+// ============================================
+describe("Complete Menubar", () => {
+  it("renders a complete menubar structure", async () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="file-trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              New
+              <MenubarShortcut>Cmd+N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Open
+              <MenubarShortcut>Cmd+O</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Share</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Email</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarSeparator />
+            <MenubarItem variant="destructive">Delete</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>Undo</MenubarItem>
+            <MenubarItem>Redo</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    expect(screen.getByText("File")).toBeInTheDocument()
+    expect(screen.getByText("Edit")).toBeInTheDocument()
+
+    await openMenubarMenu(screen.getByTestId("file-trigger"))
+
+    expect(screen.getByText("New")).toBeInTheDocument()
+    expect(screen.getByText("Open")).toBeInTheDocument()
+    expect(screen.getByText("Cmd+N")).toBeInTheDocument()
+    expect(screen.getByText("Share")).toBeInTheDocument()
+    expect(screen.getByText("Delete")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// ACCESSIBILITY TESTS
+// ============================================
+describe("Accessibility", () => {
+  it("has no accessibility violations when closed", async () => {
+    const { container } = render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New</MenubarItem>
+            <MenubarItem>Open</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no accessibility violations when open", async () => {
+    const { container } = render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarLabel>Recent</MenubarLabel>
+            <MenubarSeparator />
+            <MenubarItem>New</MenubarItem>
+            <MenubarItem>Open</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with checkbox items", async () => {
+    const { container } = render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem checked>Option 1</MenubarCheckboxItem>
+            <MenubarCheckboxItem>Option 2</MenubarCheckboxItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with radio items", async () => {
+    const { container } = render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value="option1">
+              <MenubarRadioItem value="option1">Option 1</MenubarRadioItem>
+              <MenubarRadioItem value="option2">Option 2</MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with destructive items", async () => {
+    const { container } = render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger data-testid="trigger">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>Edit</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem variant="destructive">Delete</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+
+    await openMenubarMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})