Separator component

packages/core/src/components/separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator } from "./separator";
+export type { SeparatorProps } from "./separator";

packages/core/src/components/separator/separator.tsx

@@ -0,0 +1,28 @@
+import type { JSX } from "solid-js";
+import { splitProps } from "solid-js";
+
+export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Visual and ARIA orientation. @default "horizontal" */
+  orientation?: "horizontal" | "vertical";
+  /** When true, renders role=none (purely visual, not announced). @default false */
+  decorative?: boolean;
+}
+
+/**
+ * A visual divider between sections of content.
+ * Non-decorative separators are announced by screen readers.
+ */
+export function Separator(props: SeparatorProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["orientation", "decorative"]);
+  const orientation = () => local.orientation ?? "horizontal";
+  const isDecorative = () => local.decorative ?? false;
+
+  return (
+    <div
+      role={isDecorative() ? "none" : "separator"}
+      aria-orientation={!isDecorative() && orientation() === "vertical" ? "vertical" : undefined}
+      data-orientation={orientation()}
+      {...rest}
+    />
+  );
+}

packages/core/tests/components/separator/separator.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@solidjs/testing-library";
+import { describe, expect, it } from "vitest";
+import { Separator } from "../../../src/components/separator/index";
+
+describe("Separator", () => {
+  it("renders with role=separator by default", () => {
+    render(() => <Separator />);
+    expect(screen.getByRole("separator")).toBeTruthy();
+  });
+
+  it("renders with role=none when decorative", () => {
+    render(() => <Separator decorative data-testid="sep" />);
+    expect(screen.queryByRole("separator")).toBeNull();
+    expect(screen.getByTestId("sep").getAttribute("role")).toBe("none");
+  });
+
+  it("has data-orientation=horizontal by default", () => {
+    render(() => <Separator data-testid="sep" />);
+    expect(screen.getByTestId("sep").getAttribute("data-orientation")).toBe("horizontal");
+  });
+
+  it("has data-orientation=vertical when set", () => {
+    render(() => <Separator orientation="vertical" data-testid="sep" />);
+    expect(screen.getByTestId("sep").getAttribute("data-orientation")).toBe("vertical");
+  });
+
+  it("has aria-orientation=vertical when vertical and not decorative", () => {
+    render(() => <Separator orientation="vertical" data-testid="sep" />);
+    expect(screen.getByTestId("sep").getAttribute("aria-orientation")).toBe("vertical");
+  });
+
+  it("does not have aria-orientation when horizontal (default)", () => {
+    render(() => <Separator data-testid="sep" />);
+    expect(screen.getByTestId("sep").getAttribute("aria-orientation")).toBeNull();
+  });
+});