reshaped 3.3.10 → 3.3.12

package/dist/components/Popover/tests/Popover.test.stories.js

@@ -0,0 +1,167 @@
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
+import Popover from "../index.js";
+import Button from "../../Button/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default {
+    title: "Components/Popover/tests",
+    component: Popover,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/popover",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const defaultActive = {
+    name: "defaultActive, uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let item = canvas.getByText("Content");
+        // Wait for the open animation
+        await sleep(500);
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(item).not.toBeInTheDocument();
+        });
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+    },
+};
+export const active = {
+    name: "active, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const item = canvas.getByText("Content");
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+        });
+        expect(item).toBeInTheDocument();
+    },
+};
+export const activeFalse = {
+    name: "active false, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.queryByText("Content");
+        expect(item).not.toBeInTheDocument();
+    },
+};
+export const dismissible = {
+    name: "dismissible, onClose, className, attributes, closeAriaLabel",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
+					Content
+				</Popover.Dismissible>
+			</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const dismissible = canvas.getByTestId("test-id");
+        const closeButton = within(dismissible).getByRole("button");
+        expect(dismissible).toHaveClass("test-classname");
+        expect(closeButton).toHaveAccessibleName("Close");
+        await userEvent.click(closeButton);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const triggerType = {
+    name: "triggerType hover",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} triggerType="hover">
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.hover(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        await userEvent.unhover(trigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Popover active>
+				<Popover.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</Popover.Trigger>
+				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
+					Content
+				</Popover.Content>
+			</Popover>
+		</div>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const menu = await canvas.findByTestId("test-id");
+        expect(menu).toHaveClass("test-classname");
+    },
+};

package/dist/components/Progress/Progress.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../utilities/helpers.js";
 import s from "./Progress.module.css";
 const Progress = (props) => {
-    const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, className, attributes, } = props;
+    const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, ariaLabel, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, color && s[`--color-${color}`], size && s[`--size-${size}`], !!duration && s["--duration"]);
     const total = max - min;
     const normalizedValue = value - min;
     const resolvedValue = Math.max(min, Math.min(max, normalizedValue));
     const width = (resolvedValue / total) * 100;
     const translate = `${width - 100}%`;
-    return (_jsx("div", { role: "progressbar", ...attributes, className: rootClassNames, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, children: _jsx("div", { className: s.value, style: {
+    return (_jsx("div", { role: "progressbar", ...attributes, className: rootClassNames, "aria-label": ariaLabel || attributes?.["aria-label"], "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, children: _jsx("div", { className: s.value, style: {
                 "--rs-progress-value": translate,
                 "--rs-progress-duration": duration ? `${duration}ms` : undefined,
             } }) }));

package/dist/components/Progress/Progress.types.d.ts

@@ -6,6 +6,7 @@ export type Props = {
     size?: "small" | "medium";
     color?: "primary" | "critical" | "warning" | "positive" | "media";
     duration?: number;
+    ariaLabel?: string;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Progress/tests/Progress.stories.js

@@ -14,36 +14,36 @@ export default {
 };
 export const value = () => (<Example>
 		<Example.Item title="value: 50">
-			<Progress value={50}/>
+			<Progress value={50} ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="value: 20, min: 0, max: 40">
-			<Progress value={20} min={0} max={40}/>
+			<Progress value={20} min={0} max={40} ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="value: 50, min: 0, max: 40">
-			<Progress value={50} min={0} max={40}/>
+			<Progress value={50} min={0} max={40} ariaLabel="rating value"/>
 		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
 		<Example.Item title="size: small, value: 50">
-			<Progress value={50} size="small"/>
+			<Progress value={50} size="small" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="size: medium, value: 50">
-			<Progress value={50} size="medium"/>
+			<Progress value={50} size="medium" ariaLabel="rating value"/>
 		</Example.Item>
 	</Example>);
 export const color = () => (<Example>
 		<Example.Item title="color: critical, value: 50">
-			<Progress value={50} color="critical"/>
+			<Progress value={50} color="critical" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="color: warning, value: 50">
-			<Progress value={50} color="warning"/>
+			<Progress value={50} color="warning" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="color: positive, value: 50">
-			<Progress value={50} color="positive"/>
+			<Progress value={50} color="positive" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="color: media, value: 50">
 			<View padding={4} backgroundColor="black" borderRadius="medium">
-				<Progress value={50} color="media"/>
+				<Progress value={50} color="media" ariaLabel="rating value"/>
 			</View>
 		</Example.Item>
 	</Example>);
@@ -59,7 +59,7 @@ export const duration = () => {
 						<Button onClick={handleChange}>Change</Button>
 					</View.Item>
 
-					<Progress value={active ? 100 : 0} duration={2000}/>
+					<Progress value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
 				</View>
 			</Example.Item>
 		</Example>);

package/dist/components/Progress/tests/Progress.test.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ProgressProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const className: StoryObj;

package/dist/components/Progress/tests/Progress.test.stories.js

@@ -0,0 +1,35 @@
+import { expect } from "@storybook/test";
+import Progress from "../index.js";
+export default {
+    title: "Components/Progress/tests",
+    component: Progress,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/progress",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => <Progress value={75} min={50} max={100} ariaLabel="progress"/>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("progressbar");
+        expect(el).toBeInTheDocument();
+        expect(el).toHaveAttribute("aria-valuenow", "75");
+        expect(el).toHaveAttribute("aria-valuemin", "50");
+        expect(el).toHaveAttribute("aria-valuemax", "100");
+        expect(el).toHaveAccessibleName("progress");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Progress className="test-classname" attributes={{ id: "test-id" }} ariaLabel="progress"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Radio/tests/Radio.test.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").RadioProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const checked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const checkedFalse: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultChecked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultCheckedFalse: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;

package/dist/components/Radio/tests/Radio.test.stories.js

@@ -0,0 +1,118 @@
+import { expect, userEvent, fn } from "@storybook/test";
+import Radio from "../index.js";
+export default {
+    title: "Components/Radio/tests",
+    component: Radio,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/radio",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "name, value",
+    render: () => (<Radio name="test-name" value="test-value">
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toHaveAttribute("value", "test-value");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).not.toBeChecked();
+    },
+};
+export const checked = {
+    name: "checked, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const checkedFalse = {
+    name: "checked false, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked={false} onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        // Still not checked because it's controlled
+        expect(input).not.toBeChecked();
+    },
+};
+export const defaultChecked = {
+    name: "defaultChecked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const defaultCheckedFalse = {
+    name: "defaultChecked false, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Radio name="test-name" value="test-value" disabled>
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Radio className="test-classname" attributes={{ id: "test-id" }} value="value">
+				Content
+			</Radio>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").RadioGroupProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;

package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js

@@ -0,0 +1,78 @@
+import { fn, userEvent, expect } from "@storybook/test";
+import RadioGroup from "../index.js";
+import Radio from "../../Radio/index.js";
+export default {
+    title: "Components/RadioGroup/tests",
+    component: RadioGroup,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/radio",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
+
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        // Still checked because it's controlled
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).not.toBeChecked();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
+
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        expect(inputs[0]).not.toBeChecked();
+        expect(inputs[1]).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<RadioGroup name="test-name" disabled>
+			<Radio value="test-value">Content</Radio>
+		</RadioGroup>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};

package/dist/components/Reshaped/tests/Reshaped.stories.d.ts

@@ -0,0 +1,33 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    parameters: {
+        disableWrapper: boolean;
+    };
+};
+export default _default;
+export declare const rtl: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const lightMode: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => void;
+};
+export declare const darkMode: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => void;
+};
+export declare const scoped: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => Promise<void>;
+};
+export declare const testScoped: StoryObj;
+export declare const keyboardMode: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => Promise<void>;
+};

package/dist/components/Reshaped/tests/Reshaped.stories.js

@@ -0,0 +1,88 @@
+import { expect, userEvent } from "@storybook/test";
+import { useTheme } from "../../Theme/index.js";
+import Button from "../../Button/index.js";
+import Reshaped from "../Reshaped.js";
+export default {
+    title: "Utilities/Reshaped",
+    parameters: {
+        disableWrapper: true,
+    },
+};
+export const rtl = {
+    name: "defaultRTL",
+    render: () => (<Reshaped defaultRTL theme="reshaped" defaultColorMode="dark">
+			Hello
+		</Reshaped>),
+};
+export const lightMode = {
+    name: "defaultColorMode=light",
+    render: () => <Reshaped theme="reshaped">Hello</Reshaped>,
+    play: () => {
+        const theme = document.documentElement.getAttribute("data-rs-theme");
+        const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
+        expect(theme).toEqual("reshaped");
+        expect(colorMode).toEqual("light");
+    },
+};
+export const darkMode = {
+    name: "defaultColorMode=dark",
+    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
+			Hello
+		</Reshaped>),
+    play: () => {
+        const theme = document.documentElement.getAttribute("data-rs-theme");
+        const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
+        expect(theme).toEqual("reshaped");
+        expect(colorMode).toEqual("dark");
+    },
+};
+export const scoped = {
+    name: "scoped",
+    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark" scoped>
+			Hello
+		</Reshaped>),
+    play: async () => {
+        const root = document.querySelector("[data-rs-root]");
+        expect(root).toBeInTheDocument();
+        expect(root).not.toBe(document.documentElement);
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(document.documentElement).not.toHaveAttribute("data-rs-theme");
+    },
+};
+const ScopedComponent = () => {
+    const { invertColorMode } = useTheme();
+    return <Button onClick={invertColorMode}>Invert</Button>;
+};
+export const testScoped = {
+    name: "test: scoped switch",
+    render: () => (<Reshaped theme="reshaped">
+			<Reshaped theme="slate" scoped>
+				<ScopedComponent />
+			</Reshaped>
+		</Reshaped>),
+    play: async ({ canvas }) => {
+        const nestedRoot = document.querySelector("[data-rs-root]");
+        const button = canvas.getAllByRole("button")[0];
+        expect(document.documentElement).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
+        expect(nestedRoot).toHaveAttribute("data-rs-theme", "slate");
+        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "light");
+        await userEvent.click(button);
+        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
+        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const keyboardMode = {
+    name: "test: keyboard mode",
+    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
+			Hello
+		</Reshaped>),
+    play: async () => {
+        const attribute = "data-rs-keyboard";
+        expect(document.documentElement).not.toHaveAttribute(attribute);
+        await userEvent.keyboard("{Tab/}");
+        expect(document.documentElement).toHaveAttribute(attribute);
+        await userEvent.click(document.body);
+        expect(document.documentElement).not.toHaveAttribute(attribute);
+    },
+};