-
Accordion
+import image from "./accordion.webp";
+import { Loader } from "@heathmont/moon-base-tw";
+import { PageHeadComponent } from "@/components/PageHeadComponent";
+
+const TITLE = "Accordion";
+
+export default async function AccordionPage(request: {
+ searchParams: { raw: string };
+}) {
+ const {
+ client: {
+ accordion: { description, descriptions: exampleDescriptions, examples },
+ },
+ } = await getExamples();
+ const ordered = [
+ "Default",
+ "ControlOutside",
+ "Customization",
+ "Disabled",
+ "HeaderContent",
+ "OpenByDefault",
+ "SingleOpen",
+ ];
+ const searchParam = request?.searchParams?.raw;
+ const isMockup = !!searchParam && Object.keys(examples).includes(searchParam);
-
+ if (isMockup) {
+ const Component = dynamic(
+ () => import(`@/app/client/accordion/examples/${searchParam}`),
+ {
+ loading: () =>
,
+ ssr: false,
+ },
+ );
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
-
-
Default
-
-
-
-
- {client.accordion.examples.Default}
-
+
+ {/* TODO: Props table/s */}
-
);
}
diff --git a/docs/app/client/button/page.tsx b/docs/app/client/button/page.tsx
index 7eca4b78..9e2b212d 100644
--- a/docs/app/client/button/page.tsx
+++ b/docs/app/client/button/page.tsx
@@ -4,6 +4,8 @@ import { MDX } from "@/components/MDX";
import { serialize } from "next-mdx-remote/serialize";
import { ExampleSection } from "@/components/exampleSection/ExampleSection";
import { MDXRemote } from "next-mdx-remote/rsc";
+import { MainLayout } from "@/components/MainLayout";
+import dynamic from "next/dynamic";
const TITLE = "Button";
diff --git a/docs/app/types.ts b/docs/app/types.ts
index 7c239ab9..d91d9b37 100644
--- a/docs/app/types.ts
+++ b/docs/app/types.ts
@@ -2,8 +2,18 @@ export type Examples = {
"client": {
"accordion": {
"description": "string",
+ "descriptions": {
+ "ControlOutside": "string"
+ },
"examples": {
- "Default": "string"
+ "ControlOutside": "string",
+ "Customization": "string",
+ "Default": "string",
+ "Disabled": "string",
+ "HeaderContent": "string",
+ "OpenByDefault": "string",
+ "SingleOpen": "string",
+ "Sizes": "string"
}
},
"authcode": {
diff --git a/docs/components/exampleSection/ExampleSection.tsx b/docs/components/exampleSection/ExampleSection.tsx
index 5dc67583..4e67911e 100644
--- a/docs/components/exampleSection/ExampleSection.tsx
+++ b/docs/components/exampleSection/ExampleSection.tsx
@@ -10,7 +10,7 @@ import { MDX } from "../MDX";
type Props = {
title: string;
- description?: string | JSX.Element;
+ description?: JSX.Element;
component: JSX.Element;
code: string;
};
diff --git a/docs/e2e/accordion.spec.ts b/docs/e2e/accordion.spec.ts
new file mode 100644
index 00000000..d2bfc76e
--- /dev/null
+++ b/docs/e2e/accordion.spec.ts
@@ -0,0 +1,553 @@
+import { test, expect } from "@playwright/test";
+
+const COMPONENT_NAME = "accordion";
+const MAX_DIFF_PIXEL_RATIO = 0.01;
+
+const DEFAULT_TIMEOUT = 1000; // We wait max for 1 second for mounting
+
+test.beforeEach(async ({ page }, testInfo) => {
+ const example = testInfo.title?.split(":")?.[0] ?? "Default";
+ const title = testInfo.title?.split(":")?.[1] || "";
+ await page.goto(`/client/accordion/${example}`);
+ await page.waitForTimeout(DEFAULT_TIMEOUT);
+});
+
+test("Default: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Default.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("Default: should open default accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Default" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Default-Open.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("Default: should close default accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Default" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "Default" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("Default: should open test accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("Default: should close test accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("OpenByDefault: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-OpenByDefault.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("OpenByDefault: should close accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("closed");
+});
+
+test("OpenByDefault: should open accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("closed");
+
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("open");
+});
+
+test("SingleOpen: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-SingleOpen.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("SingleOpen: should open first accordion", async ({ page }) => {
+ const allButtons = await page.locator("h3 > button").all();
+ await allButtons[0].click();
+ await page.waitForTimeout(100);
+
+ const state = await allButtons[0].getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("SingleOpen: should open second accordion and close first", async ({
+ page,
+}) => {
+ const buttons = await page.locator("h3 > button").all();
+ await buttons[0].click();
+ await page.waitForTimeout(100);
+
+ const state = await buttons[0].getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await buttons[1].click();
+ await page.waitForTimeout(100);
+
+ const stateOfFirst = await buttons[0].getAttribute("data-state");
+ const stateOfSecond = await buttons[1].getAttribute("data-state");
+
+ await expect(stateOfFirst).toEqual("closed");
+ await expect(stateOfSecond).toEqual("open");
+});
+
+test("SingleOpen: should open first accordion and close second", async ({
+ page,
+}) => {
+ const allButtons = await page.locator("h3 > button").all();
+ await allButtons[1].click();
+ await page.waitForTimeout(100);
+
+ const stateOfFirst = await allButtons[0].getAttribute("data-state");
+ const stateOfSecond = await allButtons[1].getAttribute("data-state");
+
+ await expect(stateOfFirst).toEqual("closed");
+ await expect(stateOfSecond).toEqual("open");
+
+ await allButtons[0].click();
+ await page.waitForTimeout(100);
+
+ const secondStateOfFirst = await allButtons[0].getAttribute("data-state");
+ const secondStateOfSecond = await allButtons[1].getAttribute("data-state");
+
+ await expect(secondStateOfFirst).toEqual("open");
+ await expect(secondStateOfSecond).toEqual("closed");
+});
+
+test("Disabled: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Disabled.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("Disabled: should be disabled", async ({ page }) => {
+ const button = await page.locator("h3 > button");
+ await expect(button).toBeDisabled();
+});
+
+test("HeaderContent: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Disabled.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("HeaderContent: should open accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("HeaderContent: should close accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("Sizes: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Sizes.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("Sizes: should open XL accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "X Large (xl)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "X Large (xl)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("Sizes: should close XL accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "X Large (xl)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "X Large (xl)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "X Large (xl)" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "X Large (xl)" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("Sizes: should open LG accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Large (lg)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Large (lg)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("Sizes: should close LG accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Large (lg)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Large (lg)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "Large (lg)" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Large (lg)" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("Sizes: should open MD accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Medium is default (md)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Medium is default (md)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("Sizes: should close MD accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Medium is default (md)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Medium is default (md)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "Medium is default (md)" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Medium is default (md)" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("Sizes: should open SM accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Small (sm)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Small (sm)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("Sizes: should close SM accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Small (sm)" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Small (sm)" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "Small (sm)" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Small (sm)" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("Customization: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Customization.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("Customization: should open accordion", async ({ page }) => {
+ await page
+ .getByRole("button", { name: "Test accordion with background" })
+ .click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion with background" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await expect(page).toHaveScreenshot(
+ `${COMPONENT_NAME}-Customization-Open.png`,
+ {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ },
+ );
+});
+
+test("Customization: should close accordion", async ({ page }) => {
+ await page
+ .getByRole("button", { name: "Test accordion with background" })
+ .click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion with background" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page
+ .getByRole("button", { name: "Test accordion with background" })
+ .click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Test accordion with background" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("ControlOutside: should be visible in a short term", async ({ page }) => {
+ await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-ControlOutside.png`, {
+ maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+ });
+});
+
+test("ControlOutside: should close default accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Default" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("closed");
+});
+
+test("ControlOutside: should open default accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Default" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("closed");
+
+ await page.getByRole("button", { name: "Default" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("open");
+});
+
+test("ControlOutside: should open test accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+});
+
+test("ControlOutside: should close test accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("open");
+
+ await page.getByRole("button", { name: "Test accordion" }).click();
+ await page.waitForTimeout(100);
+
+ const closedState = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(closedState).toEqual("closed");
+});
+
+test("ControlOutside: should close 2nd accordion", async ({ page }) => {
+ await page.getByRole("button", { name: "Toggle All" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("closed");
+});
+
+test("ControlOutside: should open both accordions", async ({ page }) => {
+ await page.getByRole("button", { name: "Toggle All" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("closed");
+
+ await page.getByRole("button", { name: "Toggle All" }).click();
+ await page.waitForTimeout(100);
+
+ const stateOfFirst = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ const stateOfSecond = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(stateOfFirst).toEqual("open");
+ await expect(stateOfSecond).toEqual("open");
+});
+
+test("ControlOutside: should close both accordions", async ({ page }) => {
+ await page.getByRole("button", { name: "Toggle All" }).click();
+ await page.waitForTimeout(100);
+
+ const state = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(state).toEqual("closed");
+
+ await page.getByRole("button", { name: "Toggle All" }).click();
+ await page.waitForTimeout(100);
+
+ const stateOfFirst = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ const stateOfSecond = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(stateOfFirst).toEqual("open");
+ await expect(stateOfSecond).toEqual("open");
+
+ await page.getByRole("button", { name: "Toggle All" }).click();
+ await page.waitForTimeout(100);
+
+ const closedStateOfFirst = await page
+ .getByRole("button", { name: "Default" })
+ .getAttribute("data-state");
+
+ const closedStateOfSecond = await page
+ .getByRole("button", { name: "Test accordion" })
+ .getAttribute("data-state");
+
+ await expect(closedStateOfFirst).toEqual("closed");
+ await expect(closedStateOfSecond).toEqual("closed");
+});
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..730dbe6e
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..664d4faf
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..69416ad6
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-ControlOutside-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..3f66f51b
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..639f74c3
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..06e6c745
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..58a02c5e
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..75485135
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..68929a14
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Customization-Open-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..c0843f21
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..8f282e03
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..fd33c0bb
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..b1a60ae8
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..1d5946eb
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..f99b223a
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Default-Open-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..c0843f21
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..4fc6669b
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..83418ff9
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..e36a9a8b
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Disabled-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..2bb0d86a
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..070aa7ca
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..414bbbd2
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-OpenByDefault-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..40c92fff
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..ae0ad4b8
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..8738a95b
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-SingleOpen-Mobile-Safari-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Desktop-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Desktop-Chrome-darwin.png
new file mode 100644
index 00000000..8434c3d7
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Desktop-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Mobile-Chrome-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Mobile-Chrome-darwin.png
new file mode 100644
index 00000000..3f18e025
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Mobile-Chrome-darwin.png differ
diff --git a/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Mobile-Safari-darwin.png b/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Mobile-Safari-darwin.png
new file mode 100644
index 00000000..27a70da9
Binary files /dev/null and b/docs/e2e/accordion.spec.ts-snapshots/accordion-Sizes-Mobile-Safari-darwin.png differ
diff --git a/docs/playwright.config.ts b/docs/playwright.config.ts
index 74a1eb70..5fdab427 100644
--- a/docs/playwright.config.ts
+++ b/docs/playwright.config.ts
@@ -20,6 +20,7 @@ export default defineConfig({
// Run your local dev server before starting the tests:
// https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+
// webServer: {
// command: 'npm run dev',
// url: baseURL,