Fix failing tests

app/components/Checkbox.js

@@ -160,7 +160,7 @@ const Checkbox = memo(
         />
       </label>
     );
-  }
+  },
 );
 
 Checkbox.displayName = "Checkbox";

app/components/RadioButton.js

@@ -80,7 +80,7 @@ const RadioButton = ({
         onChange({ checked: true, value });
       }
     },
-    [disabled, onChange, checked, value]
+    [disabled, onChange, checked, value],
   );
 
   return (

app/components/RadioGroup.js

@@ -24,7 +24,7 @@ const RadioGroup = ({
         onChange({ value: optionValue });
       }
     },
-    [disabled, onChange]
+    [disabled, onChange],
   );
 
   return (

app/components/Select.js

@@ -9,10 +9,8 @@ import React, {
   useCallback,
   memo,
 } from "react";
-import ContextMenu from "./ContextMenu";
-import ContextMenuItem from "./ContextMenuItem";
-import ContextMenuSection from "./ContextMenuSection";
-import ContextMenuDivider from "./ContextMenuDivider";
+import SelectDropdown from "./SelectDropdown";
+import SelectOption from "./SelectOption";
 
 const Select = forwardRef(
   (
@@ -31,7 +29,7 @@ const Select = forwardRef(
       onChange,
       ...props
     },
-    ref
+    ref,
   ) => {
     const generatedId = useId();
     const selectId = id || `select-${generatedId}`;
@@ -74,7 +72,7 @@ const Select = forwardRef(
           selectRef.current.focus();
         }
       },
-      [onChange]
+      [onChange],
     );
 
     // Handle select button click
@@ -96,7 +94,7 @@ const Select = forwardRef(
           setIsOpen(false);
         }
       },
-      [disabled, isOpen]
+      [disabled, isOpen],
     );
 
     const getSizeStyles = () => {
@@ -230,14 +228,14 @@ const Select = forwardRef(
       // Handle options prop
       if (props.options && Array.isArray(props.options)) {
         const selectedOption = props.options.find(
-          (option) => option.value === selectedValue
+          (option) => option.value === selectedValue,
         );
         return selectedOption ? selectedOption.label : placeholder;
       }
 
       // Handle children (option elements)
       const selectedOption = React.Children.toArray(children).find(
-        (child) => child.props.value === selectedValue
+        (child) => child.props.value === selectedValue,
       );
       return selectedOption ? selectedOption.props.children : placeholder;
     };
@@ -294,10 +292,10 @@ const Select = forwardRef(
               ref={menuRef}
               className="absolute top-full left-0 right-0 z-50 mt-1"
             >
-              <ContextMenu>
+              <SelectDropdown>
                 {props.options && Array.isArray(props.options)
                   ? props.options.map((option) => (
-                      <ContextMenuItem
+                      <SelectOption
                         key={option.value}
                         selected={option.value === selectedValue}
                         size={size}
@@ -306,35 +304,35 @@ const Select = forwardRef(
                         }
                       >
                         {option.label}
-                      </ContextMenuItem>
+                      </SelectOption>
                     ))
                   : React.Children.map(children, (child) => {
                       if (child.type === "option") {
                         return (
-                          <ContextMenuItem
+                          <SelectOption
                             key={child.props.value}
                             selected={child.props.value === selectedValue}
                             size={size}
                             onClick={() =>
                               handleOptionSelect(
                                 child.props.value,
-                                child.props.children
+                                child.props.children,
                               )
                             }
                           >
                             {child.props.children}
-                          </ContextMenuItem>
+                          </SelectOption>
                         );
                       }
                       return child;
                     })}
-              </ContextMenu>
+              </SelectDropdown>
             </div>
           )}
         </div>
       </div>
     );
-  }
+  },
 );
 
 Select.displayName = "Select";

app/components/SelectDropdown.js

@@ -0,0 +1,37 @@
+"use client";
+
+import React, { forwardRef, memo } from "react";
+
+const SelectDropdown = forwardRef(
+  ({ className = "", children, ...props }, ref) => {
+    const menuClasses = `
+      bg-black
+      border border-[var(--color-border-default-tertiary)]
+      rounded-[var(--measures-radius-medium)]
+      shadow-lg
+      p-[4px]
+      min-w-[200px]
+      max-w-[300px]
+      ${className}
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    return (
+      <div
+        ref={ref}
+        className={menuClasses}
+        role="listbox"
+        aria-label="Select an option"
+        style={{ backgroundColor: "#000000" }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+SelectDropdown.displayName = "SelectDropdown";
+
+export default memo(SelectDropdown);

app/components/SelectOption.js

@@ -0,0 +1,111 @@
+"use client";
+
+import React, { forwardRef, memo, useCallback } from "react";
+
+const SelectOption = forwardRef(
+  (
+    {
+      children,
+      selected = false,
+      disabled = false,
+      className = "",
+      onClick,
+      size = "medium",
+      ...props
+    },
+    ref,
+  ) => {
+    const getTextSize = () => {
+      switch (size) {
+        case "small":
+          return "text-[10px] leading-[14px]";
+        case "medium":
+          return "text-[14px] leading-[20px]";
+        case "large":
+          return "text-[16px] leading-[24px]";
+        default:
+          return "text-[14px] leading-[20px]";
+      }
+    };
+
+    const itemClasses = `
+      flex items-center justify-between
+      px-[8px] py-[4px]
+      text-[var(--color-content-default-brand-primary)]
+      ${getTextSize()}
+      cursor-pointer
+      transition-colors duration-150
+      ${
+        selected
+          ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--measures-radius-small)]"
+          : ""
+      }
+      ${
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : "hover:!bg-[var(--color-surface-default-secondary)] hover:!rounded-[var(--measures-radius-small)]"
+      }
+      ${className}
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const handleClick = useCallback(
+      (e) => {
+        if (!disabled && onClick) {
+          onClick(e);
+        }
+      },
+      [disabled, onClick],
+    );
+
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!disabled && onClick) {
+            onClick(e);
+          }
+        }
+      },
+      [disabled, onClick],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={itemClasses}
+        role="option"
+        tabIndex={disabled ? -1 : 0}
+        aria-selected={selected}
+        aria-disabled={disabled}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <div className="flex items-center gap-[8px]">
+          {selected && (
+            <svg
+              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          )}
+          <span>{children}</span>
+        </div>
+      </div>
+    );
+  },
+);
+
+SelectOption.displayName = "SelectOption";
+
+export default memo(SelectOption);

app/forms/page.js

@@ -1,90 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import Switch from "../components/Switch";
-
-export default function FormsPlayground() {
-  const [switchStates, setSwitchStates] = useState({
-    switch1: false,
-    switch2: true,
-    switch3: false,
-    switch4: true,
-  });
-
-  const handleSwitchChange = (switchName) => {
-    setSwitchStates((prev) => ({
-      ...prev,
-      [switchName]: !prev[switchName],
-    }));
-  };
-
-  return (
-    <div className="p-[24px] space-y-[24px]">
-      <h1 className="font-bricolage text-[24px]">Forms Playground</h1>
-
-      <section className="space-y-[12px]">
-        <h2 className="font-space text-[18px]">Switch Examples</h2>
-        <div
-          className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg"
-          //style={{ backgroundColor: "white" }}
-        >
-          <div>
-            <h3 className="font-space text-[14px] mb-[8px]">Switch States</h3>
-            <div className="space-y-4">
-              <Switch
-                checked={switchStates.switch1}
-                onChange={() => handleSwitchChange("switch1")}
-                label="Switch label"
-              />
-              <Switch
-                checked={switchStates.switch2}
-                onChange={() => handleSwitchChange("switch2")}
-                label="Switch label"
-              />
-              <Switch
-                checked={switchStates.switch3}
-                onChange={() => handleSwitchChange("switch3")}
-                state="focus"
-                label="Switch label"
-              />
-              <Switch
-                checked={switchStates.switch4}
-                onChange={() => handleSwitchChange("switch4")}
-                state="focus"
-                label="Switch label"
-              />
-            </div>
-          </div>
-
-          <div>
-            <h3 className="font-space text-[14px] mb-[8px]">
-              Interactive Example
-            </h3>
-            <div className="space-y-4">
-              <Switch
-                checked={switchStates.switch1}
-                onChange={() => handleSwitchChange("switch1")}
-                label="Enable notifications"
-              />
-              <Switch
-                checked={switchStates.switch2}
-                onChange={() => handleSwitchChange("switch2")}
-                label="Auto-save documents"
-              />
-              <Switch
-                checked={switchStates.switch3}
-                onChange={() => handleSwitchChange("switch3")}
-                label="Dark mode"
-              />
-              <Switch
-                checked={switchStates.switch4}
-                onChange={() => handleSwitchChange("switch4")}
-                label="Email updates"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-}

package.json

@@ -17,7 +17,7 @@
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
-    "test:sb": "storybook dev -p 6006 & wait-on http://localhost:6006 && test-storybook",
+    "test:sb": "storybook dev -p 6006 & wait-on http://localhost:6006 && test-storybook --url http://localhost:6006",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",
     "e2e:performance": "playwright test tests/e2e/performance.spec.ts",
@@ -66,6 +66,7 @@
     "@storybook/addon-interactions": "^8.3.0",
     "@storybook/addon-viewport": "^9.0.8",
     "@storybook/nextjs": "^8.3.0",
+    "@storybook/test-runner": "^0.22.1",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.11",
     "@testing-library/jest-dom": "^6.8.0",

stories/Checkbox.stories.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Checkbox from "../app/components/Checkbox";
 import {
   DefaultInteraction,
@@ -57,6 +58,16 @@ export const Default = {
     label: "Default checkbox",
   },
   play: DefaultInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <Checkbox
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Checked = {
@@ -68,34 +79,74 @@ export const Checked = {
     label: "Checked checkbox",
   },
   play: CheckedInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <Checkbox
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Standard = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Standard Mode</h3>
-        <div className="flex flex-col gap-2">
-          <Checkbox label="Unchecked" checked={false} mode="standard" />
-          <Checkbox label="Checked" checked={true} mode="standard" />
+  render: () => {
+    const [unchecked, setUnchecked] = React.useState(false);
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Standard Mode</h3>
+          <div className="flex flex-col gap-2">
+            <Checkbox
+              label="Unchecked"
+              checked={unchecked}
+              mode="standard"
+              onChange={({ checked: newChecked }) => setUnchecked(newChecked)}
+            />
+            <Checkbox
+              label="Checked"
+              checked={checked}
+              mode="standard"
+              onChange={({ checked: newChecked }) => setChecked(newChecked)}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: StandardInteraction.play,
 };
 
 export const Inverse = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Inverse Mode</h3>
-        <div className="flex flex-col gap-2">
-          <Checkbox label="Unchecked" checked={false} mode="inverse" />
-          <Checkbox label="Checked" checked={true} mode="inverse" />
+  render: () => {
+    const [unchecked, setUnchecked] = React.useState(false);
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Inverse Mode</h3>
+          <div className="flex flex-col gap-2">
+            <Checkbox
+              label="Unchecked"
+              checked={unchecked}
+              mode="inverse"
+              onChange={({ checked: newChecked }) => setUnchecked(newChecked)}
+            />
+            <Checkbox
+              label="Checked"
+              checked={checked}
+              mode="inverse"
+              onChange={({ checked: newChecked }) => setChecked(newChecked)}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: InverseInteraction.play,
 };

stories/RadioButton.stories.js

@@ -1,3 +1,4 @@
+import React from "react";
 import RadioButton from "../app/components/RadioButton";
 import {
   DefaultInteraction,
@@ -50,6 +51,16 @@ export const Default = {
     label: "Default radio button",
   },
   play: DefaultInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <RadioButton
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Checked = {
@@ -60,34 +71,88 @@ export const Checked = {
     label: "Checked radio button",
   },
   play: CheckedInteraction.play,
+  render: (args) => {
+    const [checked, setChecked] = React.useState(args.checked);
+    return (
+      <RadioButton
+        {...args}
+        checked={checked}
+        onChange={({ checked: newChecked }) => setChecked(newChecked)}
+      />
+    );
+  },
 };
 
 export const Standard = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Standard Mode</h3>
-        <div className="flex flex-col gap-2">
-          <RadioButton label="Unchecked" checked={false} mode="standard" />
-          <RadioButton label="Checked" checked={true} mode="standard" />
+  render: () => {
+    const [selectedValue, setSelectedValue] = React.useState("checked");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Standard Mode</h3>
+          <div className="flex flex-col gap-2">
+            <RadioButton
+              label="Unchecked"
+              checked={selectedValue === "unchecked"}
+              name="standard-example"
+              value="unchecked"
+              mode="standard"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("unchecked");
+              }}
+            />
+            <RadioButton
+              label="Checked"
+              checked={selectedValue === "checked"}
+              name="standard-example"
+              value="checked"
+              mode="standard"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("checked");
+              }}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: StandardInteraction.play,
 };
 
 export const Inverse = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Inverse Mode</h3>
-        <div className="flex flex-col gap-2">
-          <RadioButton label="Unchecked" checked={false} mode="inverse" />
-          <RadioButton label="Checked" checked={true} mode="inverse" />
+  render: () => {
+    const [selectedValue, setSelectedValue] = React.useState("checked");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Inverse Mode</h3>
+          <div className="flex flex-col gap-2">
+            <RadioButton
+              label="Unchecked"
+              checked={selectedValue === "unchecked"}
+              name="inverse-example"
+              value="unchecked"
+              mode="inverse"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("unchecked");
+              }}
+            />
+            <RadioButton
+              label="Checked"
+              checked={selectedValue === "checked"}
+              name="inverse-example"
+              value="checked"
+              mode="inverse"
+              onChange={({ checked }) => {
+                if (checked) setSelectedValue("checked");
+              }}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: InverseInteraction.play,
 };

stories/RadioGroup.stories.js

@@ -59,49 +59,67 @@ export const Default = {
     ],
   },
   play: DefaultInteraction.play,
+  render: (args) => {
+    const [value, setValue] = React.useState(args.value);
+    return (
+      <RadioGroup
+        {...args}
+        value={value}
+        onChange={({ value: newValue }) => setValue(newValue)}
+      />
+    );
+  },
 };
 
 export const Standard = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Standard Mode</h3>
-        <RadioGroup
-          name="standard-example"
-          value="option2"
-          mode="standard"
-          options={[
-            { value: "option1", label: "Option 1" },
-            { value: "option2", label: "Option 2" },
-            { value: "option3", label: "Option 3" },
-          ]}
-          onChange={() => {}}
-        />
+  render: () => {
+    const [value, setValue] = React.useState("option2");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Standard Mode</h3>
+          <RadioGroup
+            name="standard-example"
+            value={value}
+            mode="standard"
+            options={[
+              { value: "option1", label: "Option 1" },
+              { value: "option2", label: "Option 2" },
+              { value: "option3", label: "Option 3" },
+            ]}
+            onChange={({ value: newValue }) => setValue(newValue)}
+          />
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: StandardInteraction.play,
 };
 
 export const Inverse = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <h3 className="text-white font-medium">Inverse Mode</h3>
-        <RadioGroup
-          name="inverse-example"
-          value="option1"
-          mode="inverse"
-          options={[
-            { value: "option1", label: "Option 1" },
-            { value: "option2", label: "Option 2" },
-            { value: "option3", label: "Option 3" },
-          ]}
-          onChange={() => {}}
-        />
+  render: () => {
+    const [value, setValue] = React.useState("option1");
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-white font-medium">Inverse Mode</h3>
+          <RadioGroup
+            name="inverse-example"
+            value={value}
+            mode="inverse"
+            options={[
+              { value: "option1", label: "Option 1" },
+              { value: "option2", label: "Option 2" },
+              { value: "option3", label: "Option 3" },
+            ]}
+            onChange={({ value: newValue }) => setValue(newValue)}
+          />
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
   play: InverseInteraction.play,
 };
 

stories/Select.stories.js

@@ -35,11 +35,16 @@ export default {
 const Template = (args) => {
   const [value, setValue] = useState("");
   return (
-    <Select {...args} value={value} onChange={(e) => setValue(e.target.value)}>
-      <option value="item1">Context Menu Item 1</option>
-      <option value="item2">Context Menu Item 2</option>
-      <option value="item3">Context Menu Item 3</option>
-    </Select>
+    <Select
+      {...args}
+      value={value}
+      onChange={setValue}
+      options={[
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+      ]}
+    />
   );
 };
 

tests/accessibility/Select.a11y.test.jsx

@@ -47,8 +47,8 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        const menu = screen.getByRole("menu");
-        expect(menu).toBeInTheDocument();
+        const listbox = screen.getByRole("listbox");
+        expect(listbox).toBeInTheDocument();
       });
     });
 
@@ -60,7 +60,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        const options = screen.getAllByRole("menuitem");
+        const options = screen.getAllByRole("option");
         expect(options).toHaveLength(3);
         expect(options[0]).toHaveTextContent("Option 1");
         expect(options[1]).toHaveTextContent("Option 2");
@@ -79,7 +79,7 @@ describe("Select Component Accessibility", () => {
       await user.keyboard("{Enter}");
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
     });
 
@@ -92,7 +92,7 @@ describe("Select Component Accessibility", () => {
       await user.keyboard(" ");
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
     });
 
@@ -104,7 +104,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       await user.keyboard("{Escape}");
@@ -123,7 +123,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       await user.click(screen.getByText("Option 1"));
@@ -179,7 +179,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       await user.click(screen.getByText("Option 1"));
@@ -216,7 +216,7 @@ describe("Select Component Accessibility", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "border-[var(--color-border-default-utility-negative)]"
+        "border-[var(--color-border-default-utility-negative)]",
       );
     });
   });
@@ -230,7 +230,7 @@ describe("Select Component Accessibility", () => {
 
     it("meets WCAG standards in disabled state", async () => {
       const { container } = render(
-        <Select {...defaultProps} disabled={true} />
+        <Select {...defaultProps} disabled={true} />,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -250,7 +250,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       const results = await axe(container);
@@ -264,7 +264,7 @@ describe("Select Component Accessibility", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "text-[var(--color-content-default-primary)]"
+        "text-[var(--color-content-default-primary)]",
       );
     });
 
@@ -273,7 +273,7 @@ describe("Select Component Accessibility", () => {
 
       const label = screen.getByText("Test Select");
       expect(label).toHaveClass(
-        "text-[var(--color-content-default-secondary)]"
+        "text-[var(--color-content-default-secondary)]",
       );
     });
   });
@@ -284,10 +284,10 @@ describe("Select Component Accessibility", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "focus-visible:border-[var(--color-border-default-utility-info)]"
+        "focus-visible:border-[var(--color-border-default-utility-info)]",
       );
       expect(selectButton).toHaveClass(
-        "focus-visible:shadow-[0_0_5px_3px_#3281F8]"
+        "focus-visible:shadow-[0_0_5px_3px_#3281F8]",
       );
     });
 
@@ -297,10 +297,10 @@ describe("Select Component Accessibility", () => {
       const selectButton = screen.getByRole("button");
       // Focus state should be different from hover state
       expect(selectButton).toHaveClass(
-        "focus-visible:border-[var(--color-border-default-utility-info)]"
+        "focus-visible:border-[var(--color-border-default-utility-info)]",
       );
       expect(selectButton).toHaveClass(
-        "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+        "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
       );
     });
   });

tests/e2e/ContextMenu.storybook.test.ts

@@ -1,302 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("ContextMenu Components Storybook Tests", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--default",
-    );
-  });
-
-  test("renders default context menu", async ({ page }) => {
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    const items = page.getByRole("option");
-    const count = await items.count();
-    expect(count).toBeGreaterThan(0);
-  });
-
-  test("renders menu items correctly", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    for (let i = 0; i < count; i++) {
-      await expect(menuItems.nth(i)).toBeVisible();
-    }
-  });
-
-  test("handles menu item clicks", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.click();
-
-    // Check that click was handled (no error should occur)
-    await expect(firstItem).toBeVisible();
-  });
-
-  test("shows selected state correctly", async ({ page }) => {
-    // Navigate to MenuItem story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    // Check that at least one item has selected state
-    let hasSelected = false;
-    for (let i = 0; i < count; i++) {
-      const isSelected = await menuItems.nth(i).getAttribute("aria-selected");
-      if (isSelected === "true") {
-        hasSelected = true;
-        break;
-      }
-    }
-
-    expect(hasSelected).toBe(true);
-  });
-
-  test("shows submenu indicators", async ({ page }) => {
-    // Navigate to MenuItem story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
-    );
-
-    const submenuArrows = page.getByTestId("submenu-arrow");
-    const count = await submenuArrows.count();
-
-    if (count > 0) {
-      await expect(submenuArrows.first()).toBeVisible();
-    }
-  });
-
-  test("shows checkmarks for selected items", async ({ page }) => {
-    // Navigate to MenuItem story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
-    );
-
-    const checkmarks = page.getByTestId("checkmark");
-    const count = await checkmarks.count();
-
-    if (count > 0) {
-      await expect(checkmarks.first()).toBeVisible();
-    }
-  });
-
-  test("renders menu sections correctly", async ({ page }) => {
-    // Navigate to MenuSection story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-section",
-    );
-
-    const sectionTitles = page.getByText(/Section/);
-    const count = await sectionTitles.count();
-
-    expect(count).toBeGreaterThan(0);
-
-    for (let i = 0; i < count; i++) {
-      await expect(sectionTitles.nth(i)).toBeVisible();
-    }
-  });
-
-  test("renders menu dividers correctly", async ({ page }) => {
-    // Navigate to MenuDivider story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-divider",
-    );
-
-    const dividers = page.getByTestId("context-menu-divider");
-    const count = await dividers.count();
-
-    expect(count).toBeGreaterThan(0);
-
-    for (let i = 0; i < count; i++) {
-      await expect(dividers.nth(i)).toBeVisible();
-    }
-  });
-
-  test("shows all variants correctly", async ({ page }) => {
-    // Navigate to All Variants story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
-    );
-
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-    expect(count).toBeGreaterThan(0);
-
-    // Check for sections
-    const sectionTitles = page.getByText(/Section/);
-    const sectionCount = await sectionTitles.count();
-    expect(sectionCount).toBeGreaterThan(0);
-
-    // Check for dividers
-    const dividers = page.getByTestId("context-menu-divider");
-    const dividerCount = await dividers.count();
-    expect(dividerCount).toBeGreaterThan(0);
-  });
-
-  test("handles keyboard navigation", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.focus();
-    await expect(firstItem).toBeFocused();
-
-    // Navigate with arrow keys
-    await page.keyboard.press("ArrowDown");
-    const secondItem = menuItems.nth(1);
-    await expect(secondItem).toBeFocused();
-  });
-
-  test("handles Enter key selection", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.focus();
-    await page.keyboard.press("Enter");
-
-    // Should handle the selection without error
-    await expect(firstItem).toBeVisible();
-  });
-
-  test("handles Space key selection", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.focus();
-    await page.keyboard.press(" ");
-
-    // Should handle the selection without error
-    await expect(firstItem).toBeVisible();
-  });
-
-  test("shows hover effects", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.hover();
-
-    // Check that hover styles are applied
-    const backgroundColor = await firstItem.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.backgroundColor;
-    });
-
-    // Should have some background color change on hover
-    expect(backgroundColor).toBeDefined();
-  });
-
-  test("has correct styling for different sizes", async ({ page }) => {
-    // Navigate to All Variants story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    for (let i = 0; i < count; i++) {
-      const item = menuItems.nth(i);
-      await expect(item).toBeVisible();
-
-      // Check that items have proper text styling
-      const fontSize = await item.evaluate((el) => {
-        const styles = window.getComputedStyle(el);
-        return styles.fontSize;
-      });
-
-      expect(fontSize).toBeDefined();
-    }
-  });
-
-  test("has proper ARIA attributes", async ({ page }) => {
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    for (let i = 0; i < count; i++) {
-      const item = menuItems.nth(i);
-      const ariaSelected = await item.getAttribute("aria-selected");
-      expect(ariaSelected).toBeDefined();
-    }
-  });
-
-  test("handles disabled items correctly", async ({ page }) => {
-    // Navigate to All Variants story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    // Check for disabled items
-    for (let i = 0; i < count; i++) {
-      const item = menuItems.nth(i);
-      const isDisabled = await item.isDisabled();
-
-      if (isDisabled) {
-        // Disabled items should not respond to clicks
-        await item.click();
-        // Should not cause any errors
-        await expect(item).toBeVisible();
-      }
-    }
-  });
-
-  test("has proper color contrast", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    const color = await firstItem.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.color;
-    });
-
-    expect(color).toBeDefined();
-    expect(color).not.toBe("rgba(0, 0, 0, 0)"); // Should not be transparent
-  });
-
-  test("renders with custom styling", async ({ page }) => {
-    // Navigate to With Custom Styling story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--with-custom-styling",
-    );
-
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    // Check that custom styling is applied
-    const customClass = await menu.getAttribute("class");
-    expect(customClass).toContain("custom-menu");
-  });
-
-  test("handles interactive story correctly", async ({ page }) => {
-    // Navigate to Interactive story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--interactive",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    expect(count).toBeGreaterThan(0);
-
-    // Test interaction with different items
-    for (let i = 0; i < Math.min(count, 3); i++) {
-      const item = menuItems.nth(i);
-      await item.click();
-
-      // Should handle click without error
-      await expect(item).toBeVisible();
-    }
-  });
-});

tests/e2e/Input.storybook.test.ts

@@ -1,308 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-test.describe("Input Component Storybook", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--default");
-  });
-
-  test("renders default input correctly", async ({ page }) => {
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-    await expect(input).toHaveAttribute("type", "text");
-  });
-
-  test("renders with label", async ({ page }) => {
-    const label = page.getByText("Default Input");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders with placeholder", async ({ page }) => {
-    const input = page.getByPlaceholder("Enter text...");
-    await expect(input).toBeVisible();
-  });
-
-  test("handles text input", async ({ page }) => {
-    const input = page.getByRole("textbox");
-    await input.fill("test input");
-    await expect(input).toHaveValue("test input");
-  });
-
-  test("handles focus and blur", async ({ page }) => {
-    const input = page.getByRole("textbox");
-
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    await input.blur();
-    await expect(input).not.toBeFocused();
-  });
-
-  test("handles keyboard navigation", async ({ page }) => {
-    const input = page.getByRole("textbox");
-
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    await input.press("Tab");
-    // Input should lose focus when tabbing away
-  });
-
-  test("handles different input types", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    // Test typing
-    await input.fill("test@example.com");
-    await expect(input).toHaveValue("test@example.com");
-  });
-});
-
-test.describe("Input Component - Size Variants", () => {
-  test("renders small size correctly", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--small");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Small Input");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders medium size correctly", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--medium");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Medium Input");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders large size correctly", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--large");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Large Input");
-    await expect(label).toBeVisible();
-  });
-});
-
-test.describe("Input Component - Label Variants", () => {
-  test("renders default label variant", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--default-label");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const inputId = await input.getAttribute("id");
-    const label = page.locator(`label[for="${inputId}"]`);
-    await expect(label).toBeVisible();
-  });
-
-  test("renders horizontal label variant", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--horizontal-label");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const inputId = await input.getAttribute("id");
-    const label = page.locator(`label[for="${inputId}"]`);
-    await expect(label).toBeVisible();
-  });
-});
-
-test.describe("Input Component - States", () => {
-  test("renders active state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--active");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Active State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders hover state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--hover");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Hover State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders focus state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--focus");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Focus State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders error state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--error");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Error State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders disabled state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--disabled");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-    await expect(input).toBeDisabled();
-
-    const label = page.getByText("Disabled State");
-    await expect(label).toBeVisible();
-  });
-});
-
-test.describe("Input Component - Comparison Stories", () => {
-  test("renders all sizes comparison", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--all-sizes");
-
-    // Check that all size variants are present
-    await expect(page.getByText("Small Size")).toBeVisible();
-    await expect(page.getByText("Medium Size")).toBeVisible();
-    await expect(page.getByText("Large Size")).toBeVisible();
-
-    // Check that inputs are present
-    const inputs = page.getByRole("textbox");
-    // Small horizontal story was removed; expect 5 inputs now
-    await expect(inputs).toHaveCount(5);
-  });
-
-  test("renders all states comparison", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--all-states");
-
-    // Check that all state variants are present
-    await expect(page.getByText("Default State")).toBeVisible();
-    await expect(page.getByText("Active State")).toBeVisible();
-    await expect(page.getByText("Hover State")).toBeVisible();
-    await expect(page.getByText("Focus State")).toBeVisible();
-    await expect(page.getByText("Error State")).toBeVisible();
-    await expect(page.getByText("Disabled State")).toBeVisible();
-
-    // Check that inputs are present
-    const inputs = page.getByRole("textbox");
-    await expect(inputs).toHaveCount(6);
-  });
-});
-
-test.describe("Input Component - Interactive Story", () => {
-  test("handles interactive input changes", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    // Test typing
-    await input.fill("Hello World");
-    await expect(input).toHaveValue("Hello World");
-
-    // Test clearing
-    await input.fill("");
-    await expect(input).toHaveValue("");
-
-    // Test typing again
-    await input.fill("New text");
-    await expect(input).toHaveValue("New text");
-  });
-
-  test("handles focus and blur in interactive story", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    await input.blur();
-    await expect(input).not.toBeFocused();
-  });
-});
-
-test.describe("Input Component - Accessibility", () => {
-  test("has proper label association", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--default");
-
-    const input = page.getByRole("textbox");
-    const label = page.getByText("Default Input");
-
-    await expect(input).toBeVisible();
-    await expect(label).toBeVisible();
-
-    // Check that label is properly associated
-    const labelFor = await label.getAttribute("for");
-    const inputId = await input.getAttribute("id");
-    expect(labelFor).toBe(inputId);
-  });
-
-  test("supports keyboard navigation", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    // Focus with keyboard
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    // Type with keyboard
-    await input.press("a");
-    await expect(input).toHaveValue("a");
-
-    await input.press("b");
-    await expect(input).toHaveValue("ab");
-  });
-
-  test("handles disabled state accessibility", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--disabled");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeDisabled();
-
-    // Verify that filling is not allowed by asserting it remains empty without attempting to fill
-    await expect(input).toHaveValue("");
-  });
-});
-
-test.describe("Input Component - Form Integration", () => {
-  test("works within form context", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    // Test form-like behavior
-    await input.fill("form value");
-    await expect(input).toHaveValue("form value");
-
-    // Test clearing
-    await input.clear();
-    await expect(input).toHaveValue("");
-  });
-
-  test("handles different input types", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    // Test different input patterns
-    await input.fill("test@example.com");
-    await expect(input).toHaveValue("test@example.com");
-
-    await input.clear();
-    await input.fill("12345");
-    await expect(input).toHaveValue("12345");
-  });
-});

tests/e2e/Select.storybook.test.ts

@@ -1,280 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("Select Component Storybook Tests", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto("http://localhost:6006/?path=/story/forms-select--default");
-  });
-
-  test("renders default select component", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await expect(selectButton).toBeVisible();
-
-    const label = page.getByText("Test Select");
-    await expect(label).toBeVisible();
-  });
-
-  test("opens dropdown when clicked", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.click();
-
-    // Wait for dropdown to appear
-    await expect(page.getByRole("listbox")).toBeVisible();
-    await expect(page.getByText("Option 1")).toBeVisible();
-    await expect(page.getByText("Option 2")).toBeVisible();
-    await expect(page.getByText("Option 3")).toBeVisible();
-  });
-
-  test("selects option when clicked", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.click();
-
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    await page.getByText("Option 1").click();
-
-    // Check that the selected value is displayed
-    await expect(selectButton).toContainText("Option 1");
-
-    // Check that dropdown is closed
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-  });
-
-  test("closes dropdown when clicking outside", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.click();
-
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    // Click outside the dropdown
-    await page.click("body", { position: { x: 10, y: 10 } });
-
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-  });
-
-  test("handles keyboard navigation", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.focus();
-
-    // Open with Enter key
-    await page.keyboard.press("Enter");
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    // Close with Escape key
-    await page.keyboard.press("Escape");
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-
-    // Open with Space key
-    await page.keyboard.press(" ");
-    await expect(page.getByRole("listbox")).toBeVisible();
-  });
-
-  test("shows different sizes correctly", async ({ page }) => {
-    // Navigate to All Sizes story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--all-sizes",
-    );
-
-    const selectButtons = page.getByRole("button");
-    const count = await selectButtons.count();
-
-    // Should have multiple select components
-    expect(count).toBeGreaterThan(1);
-
-    // Test that all sizes are visible
-    for (let i = 0; i < count; i++) {
-      await expect(selectButtons.nth(i)).toBeVisible();
-    }
-  });
-
-  test("shows different states correctly", async ({ page }) => {
-    // Navigate to All States story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--all-states",
-    );
-
-    const selectButtons = page.getByRole("button");
-    const count = await selectButtons.count();
-
-    // Should have multiple select components in different states
-    expect(count).toBeGreaterThan(1);
-
-    // Test that all states are visible
-    for (let i = 0; i < count; i++) {
-      await expect(selectButtons.nth(i)).toBeVisible();
-    }
-  });
-
-  test("hover state shows correct styling", async ({ page }) => {
-    // Navigate to Hover story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--hover");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    // Check that hover state is applied (shadow effect)
-    const boxShadow = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.boxShadow;
-    });
-
-    expect(boxShadow).toContain("2px");
-  });
-
-  test("focus state shows correct styling", async ({ page }) => {
-    // Navigate to Focus story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--focus");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    // Check that focus state is applied (blue border and shadow)
-    const borderColor = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.borderColor;
-    });
-
-    const boxShadow = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.boxShadow;
-    });
-
-    expect(boxShadow).toContain("3px");
-  });
-
-  test("error state shows correct styling", async ({ page }) => {
-    // Navigate to Error story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--error");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    // Check that error state is applied (red border)
-    const borderColor = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.borderColor;
-    });
-
-    expect(borderColor).toContain("rgb");
-  });
-
-  test("disabled state prevents interaction", async ({ page }) => {
-    // Navigate to Disabled story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--disabled",
-    );
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-    await expect(selectButton).toBeDisabled();
-
-    // Try to click disabled select
-    await selectButton.click();
-
-    // Dropdown should not open
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-  });
-
-  test("interactive story allows selection", async ({ page }) => {
-    // Navigate to Interactive story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--interactive",
-    );
-
-    const selectButton = page.getByRole("button");
-    await selectButton.click();
-
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    // Select an option
-    await page.getByText("Option 1").click();
-
-    // Check that selection is reflected
-    await expect(selectButton).toContainText("Option 1");
-  });
-
-  test("horizontal label variant displays correctly", async ({ page }) => {
-    // Navigate to Horizontal Label story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--horizontal-label",
-    );
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const label = page.getByText("Test Select");
-    await expect(label).toBeVisible();
-
-    // Check that label and select are in horizontal layout
-    const labelBox = await label.boundingBox();
-    const selectBox = await selectButton.boundingBox();
-
-    expect(labelBox?.y).toBeCloseTo(selectBox?.y || 0, 5);
-  });
-
-  test("small size has correct height", async ({ page }) => {
-    // Navigate to Small story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--small");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const height = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.height;
-    });
-
-    expect(height).toBe("30px");
-  });
-
-  test("medium size has correct height", async ({ page }) => {
-    // Navigate to Medium story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--medium");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const height = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.height;
-    });
-
-    expect(height).toBe("36px");
-  });
-
-  test("large size has correct height", async ({ page }) => {
-    // Navigate to Large story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--large");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const height = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.height;
-    });
-
-    expect(height).toBe("40px");
-  });
-
-  test("focus behavior works correctly", async ({ page }) => {
-    // Navigate to Interactive story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--interactive",
-    );
-
-    const selectButton = page.getByRole("button");
-
-    // Tab to focus the select
-    await page.keyboard.press("Tab");
-    await expect(selectButton).toBeFocused();
-
-    // Check that focus-visible styles are applied
-    const boxShadow = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.boxShadow;
-    });
-
-    // Should have focus indicator
-    expect(boxShadow).toContain("3px");
-  });
-});

tests/storybook/RadioButton.interactions.test.js

@@ -13,9 +13,10 @@ export const DefaultInteraction = {
     await userEvent.click(radioButton);
     await expect(radioButton).toHaveAttribute("aria-checked", "true");
 
-    // Click to uncheck
+    // Radio buttons can't be unchecked by clicking them again
+    // They stay checked until another radio button in the same group is selected
     await userEvent.click(radioButton);
-    await expect(radioButton).toHaveAttribute("aria-checked", "false");
+    await expect(radioButton).toHaveAttribute("aria-checked", "true");
   },
 };
 
@@ -27,11 +28,8 @@ export const CheckedInteraction = {
     // Should be checked initially
     await expect(radioButton).toHaveAttribute("aria-checked", "true");
 
-    // Click to uncheck
-    await userEvent.click(radioButton);
-    await expect(radioButton).toHaveAttribute("aria-checked", "false");
-
-    // Click to check again
+    // Radio buttons can't be unchecked by clicking them again
+    // They stay checked until another radio button in the same group is selected
     await userEvent.click(radioButton);
     await expect(radioButton).toHaveAttribute("aria-checked", "true");
   },

tests/storybook/RadioGroup.interactions.test.js

@@ -71,18 +71,18 @@ export const InteractiveInteraction = {
     const radioButtons = canvas.getAllByRole("radio");
 
     // Should have radiogroup role
-    expect(radioGroup).toBeInTheDocument();
+    await expect(radioGroup).toBeInTheDocument();
 
     // Should show initial state
-    expect(canvas.getByText("Selected: option1")).toBeVisible();
+    await expect(canvas.getByText("Selected: option1")).toBeVisible();
 
     // Click second option
-    userEvent.click(radioButtons[1]);
-    expect(canvas.getByText("Selected: option2")).toBeVisible();
+    await userEvent.click(radioButtons[1]);
+    await expect(canvas.getByText("Selected: option2")).toBeVisible();
 
     // Click third option
-    userEvent.click(radioButtons[2]);
-    expect(canvas.getByText("Selected: option3")).toBeVisible();
+    await userEvent.click(radioButtons[2]);
+    await expect(canvas.getByText("Selected: option3")).toBeVisible();
   },
 };
 

tests/unit/Input.test.jsx

@@ -123,7 +123,7 @@ describe("Input Component", () => {
     render(<Input error={true} />);
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
   });
 
@@ -138,7 +138,7 @@ describe("Input Component", () => {
     render(<Input state="focus" />);
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-info)]"
+      "border-[var(--color-border-default-utility-info)]",
     );
     expect(input).toHaveClass("shadow-[0_0_5px_3px_#3281F8]");
   });
@@ -148,7 +148,7 @@ describe("Input Component", () => {
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
     expect(input).toHaveClass(
-      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
     );
   });
 
@@ -163,7 +163,7 @@ describe("Input Component", () => {
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
     expect(input).toHaveClass(
-      "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+      "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
     );
   });