@primitiv-ui/react 0.1.15 → 0.1.17

package/src/Switch/Switch.tsx

@@ -1,41 +1,50 @@
 import { useMemo } from "react";
 import type { ReactElement } from "react";
 
-import { Slot, composeEventHandlers } from "../Slot/index.ts";
+import { Slot } from "../Slot/index.ts";
 
 import { SwitchContext } from "./SwitchContext";
 import { useSwitchContext, useSwitchRoot } from "./hooks/index.ts";
 import { SwitchRootProps, SwitchThumbProps } from "./types";
 
+function dataStateOf(checked: boolean) {
+  return checked ? ("checked" as const) : ("unchecked" as const);
+}
+
 /**
- * The root of a Switch — a native `<button type="button" role="switch">` that
- * owns the binary checked state and provides {@link SwitchContext} to
- * descendant {@link SwitchThumb | `Switch.Thumb`}s.
+ * The root of a Switch — a `<label>` that is itself the **visible track** and
+ * wraps a **real, visually-hidden `<input type="checkbox" role="switch">`**
+ * (the focusable, form-participating control) plus the
+ * {@link SwitchThumb | `Switch.Thumb`}. It provides
+ * {@link SwitchContext | `SwitchContext`} to the thumb.
+ *
+ * Because the underlying element is a genuine native checkbox (with the switch
+ * role), it behaves like a real form field: it submits its `value` under `name`
+ * with an enclosing form, resets with it, and gets keyboard activation and
+ * focus for free. Semantically it represents an immediate on/off action.
+ *
+ * Props routing: `className` / `style` style the **track** (the `<label>` you
+ * see — the input is hidden); every other prop (`name`, `value`, `id`,
+ * `aria-*`, `required`, `disabled`, `ref`, …) spreads onto the input, because
+ * semantically the Root *is* the switch.
  *
  * Supports two state modes, statically discriminated at the type level:
  *
- * - **Uncontrolled** — pass
- *   {@link SwitchRootProps.defaultChecked | `defaultChecked`} (or omit for
- *   unchecked-on-mount). The component owns the value internally.
- * - **Controlled** — pass
- *   {@link SwitchRootProps.checked | `checked`} *and*
- *   {@link SwitchRootProps.onCheckedChange | `onCheckedChange`} together.
- *   The parent owns the value; every click defers back through the callback.
- *
- * **ARIA.** `role="switch"` and `aria-checked` are set automatically.
- * Provide an accessible name via `aria-label`, `aria-labelledby`, or
- * a visible label element.
+ * - **Uncontrolled** — pass `defaultChecked` (or omit). The browser owns the
+ *   value, so the switch participates in forms and resets.
+ * - **Controlled** — pass `checked` *and* `onCheckedChange` together.
  *
- * **Styling hooks.** `data-state="checked" | "unchecked"` on the root, plus
- * `data-disabled=""` when disabled.
+ * **Styling hooks.** `data-state="checked" | "unchecked"` and `data-disabled=""`
+ * on the track (and `data-state` on the thumb). These mirror the input, but
+ * shipped CSS positions the thumb off the input's native `:checked` instead;
+ * `data-state` is a convenience mirror.
  *
- * **`asChild` prop.** Pass `asChild` to render any consumer-supplied element
- * with the switch's ARIA attributes, `data-state`, composed `onClick`, and
- * `ref` merged in. The native `<button>` is dropped.
+ * **Keyboard.** Toggles on `Space` (the native checkbox behaviour); `Enter`
+ * does not toggle a checkbox-based control.
  *
  * @example Uncontrolled
  * ```tsx
- * <Switch.Root defaultChecked aria-label="Enable notifications">
+ * <Switch.Root name="notify" value="on" defaultChecked aria-label="Enable notifications">
  *   <Switch.Thumb />
  * </Switch.Root>
  * ```
@@ -50,41 +59,45 @@ import { SwitchRootProps, SwitchThumbProps } from "./types";
  * ```
  */
 export function SwitchRoot({
+  className,
+  style,
   defaultChecked,
   checked,
   onCheckedChange,
+  onChange,
   disabled,
-  asChild = false,
-  onClick,
   children,
   ref,
-  ...rest
+  ...inputRest
 }: SwitchRootProps): ReactElement {
-  const { checked: isChecked, toggle } = useSwitchRoot({
-    defaultChecked,
-    checked,
-    onCheckedChange,
-  });
-  const contextValue = useMemo(() => ({ checked: isChecked }), [isChecked]);
-  const rootProps = {
-    ...rest,
-    ref,
-    role: "switch" as const,
-    "aria-checked": isChecked,
-    "data-state": isChecked ? ("checked" as const) : ("unchecked" as const),
-    "data-disabled": disabled ? "" : undefined,
-    disabled,
-    onClick: composeEventHandlers(onClick, toggle),
-  };
+  const {
+    checked: isChecked,
+    handleChange,
+    inputStateProps,
+  } = useSwitchRoot({ defaultChecked, checked, onCheckedChange, onChange });
+  const contextValue = useMemo(
+    () => ({ checked: isChecked, disabled: Boolean(disabled) }),
+    [isChecked, disabled],
+  );
   return (
     <SwitchContext.Provider value={contextValue}>
-      {asChild ? (
-        <Slot {...rootProps}>{children}</Slot>
-      ) : (
-        <button type="button" {...rootProps}>
-          {children}
-        </button>
-      )}
+      <label
+        className={className}
+        style={style}
+        data-state={dataStateOf(isChecked)}
+        data-disabled={disabled ? "" : undefined}
+      >
+        <input
+          type="checkbox"
+          role="switch"
+          ref={ref}
+          disabled={disabled}
+          {...inputRest}
+          {...inputStateProps}
+          onChange={handleChange}
+        />
+        {children}
+      </label>
     </SwitchContext.Provider>
   );
 }
@@ -93,16 +106,15 @@ export function SwitchRoot({
 SwitchRoot.displayName = "SwitchRoot";
 
 /**
- * A decorative `<span aria-hidden="true">` that represents the sliding thumb
- * of the switch. Always mounted — its position is driven entirely by CSS
- * targeting `data-state="checked" | "unchecked"`. Unlike
- * {@link Checkbox.Indicator}, it never conditionally unmounts.
+ * A decorative `<span aria-hidden="true">` representing the sliding thumb of
+ * the switch. Always mounted — its position is driven entirely by CSS, which
+ * should key off the input's native `:checked` so it stays correct through a
+ * form reset.
  *
- * **Styling hook.** Mirrors the parent Root's
- * `data-state="checked" | "unchecked"` for CSS transitions.
+ * **Styling hook.** Mirrors the root's `data-state="checked" | "unchecked"`.
  *
- * **`asChild` prop.** Pass `asChild` to render the consumer's own element
- * as the thumb, with `aria-hidden` and `data-state` merged in.
+ * **`asChild` prop.** Pass `asChild` to render the consumer's own element as
+ * the thumb, with `aria-hidden` and `data-state` merged in.
  *
  * @example
  * ```tsx
@@ -122,7 +134,7 @@ export function SwitchThumb({
   const thumbProps = {
     ...rest,
     "aria-hidden": "true" as const,
-    "data-state": checked ? ("checked" as const) : ("unchecked" as const),
+    "data-state": dataStateOf(checked),
   };
   if (asChild) {
     return <Slot {...thumbProps}>{children}</Slot>;
@@ -135,36 +147,37 @@ SwitchThumb.displayName = "SwitchThumb";
 
 /** Type of the {@link Switch} compound — the Root callable plus its sub-components. */
 export type TSwitchCompound = typeof SwitchRoot & {
-  /** The root toggle button, owning checked state and context. */
+  /** The root track, owning checked state and context. */
   Root: typeof SwitchRoot;
   /** The sliding thumb indicator. */
   Thumb: typeof SwitchThumb;
 };
 
 /**
- * Headless, accessible **Switch** — a compound component implementing the
- * [WAI-ARIA Switch pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
- * on a native `<button role="switch">`. Semantically represents an immediate
- * on/off action (as opposed to a selection choice). Zero styles ship.
+ * Headless, accessible **Switch** — a compound component built on a **real,
+ * visually-hidden native `<input type="checkbox" role="switch">`**. Unlike a
+ * button dressed up with `role="switch"`, it participates in native forms.
+ * Semantically represents an immediate on/off action (as opposed to a selection
+ * choice). Zero styles ship.
  *
  * `Switch` is both callable (an alias of
  * {@link SwitchRoot | `Switch.Root`}) and carries its sub-components as
  * static properties.
  *
- * - {@link SwitchRoot | `Switch.Root`} — state owner, context provider, toggle button.
+ * - {@link SwitchRoot | `Switch.Root`} — the track: label + hidden input, state owner, context provider.
  * - {@link SwitchThumb | `Switch.Thumb`} — always-mounted decorative thumb;
- *   position driven by `data-state` via CSS.
+ *   position driven by CSS (the input's native `:checked`).
  *
  * @example Minimal usage
  * ```tsx
  * import { Switch } from "@primitiv-ui/react";
  *
- * <Switch.Root aria-label="Enable notifications">
+ * <Switch.Root name="notify" value="on" aria-label="Enable notifications">
  *   <Switch.Thumb />
  * </Switch.Root>
  * ```
  *
- * @see {@link SwitchRoot} for state modes and ARIA details.
+ * @see {@link SwitchRoot} for state modes and form participation.
  * @see {@link SwitchThumb} for styling the sliding thumb.
  */
 const SwitchCompound: TSwitchCompound = Object.assign(SwitchRoot, {

package/src/Switch/SwitchContext.ts

@@ -3,8 +3,10 @@ import { createStrictContext } from "../utils/index.ts";
 
 /** Value shared from `Switch.Root` to `Switch.Thumb` through context. */
 export type SwitchContextValue = {
-  /** Whether the switch is currently checked. */
+  /** Whether the switch is currently checked (best-effort mirror of the input). */
   checked: boolean;
+  /** Whether the switch is disabled, for the `data-disabled` hook. */
+  disabled: boolean;
 };
 
 const switchContextPair = createStrictContext<SwitchContextValue>(

package/src/Switch/__tests__/Switch.asChild.test.tsx

@@ -1,56 +1,38 @@
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 
 import { Switch } from "../Switch";
 
 describe("Switch asChild", () => {
-  it("renders the Root as the consumer element when asChild is set", () => {
+  it("renders the Thumb as the consumer element when asChild is set", () => {
     // Arrange & Act
     render(
-      <Switch.Root asChild aria-label="Enable notifications">
-        <div>Toggle</div>
-      </Switch.Root>,
-    );
-
-    // Assert — div rendered, not button; role and aria-checked merged
-    const sw = screen.getByRole("switch", { name: "Enable notifications" });
-    expect(sw.tagName).toBe("DIV");
-    expect(sw).toHaveAttribute("aria-checked", "false");
-  });
-
-  it("merges onClick and toggles state on the asChild Root element", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-    render(
-      <Switch.Root asChild aria-label="Enable notifications" onClick={onClick}>
-        <div>Toggle</div>
+      <Switch.Root aria-label="Enable notifications">
+        <Switch.Thumb asChild>
+          <span data-testid="custom-thumb" />
+        </Switch.Thumb>
       </Switch.Root>,
     );
+    const thumb = screen.getByTestId("custom-thumb");
 
-    // Act
-    await user.click(screen.getByRole("switch", { name: "Enable notifications" }));
-
-    // Assert — consumer onClick ran and state toggled
-    expect(onClick).toHaveBeenCalledOnce();
-    expect(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("aria-checked", "true");
+    // Assert — our span rendered; aria-hidden and data-state merged onto it
+    expect(thumb).toHaveAttribute("aria-hidden", "true");
+    expect(thumb).toHaveAttribute("data-state", "unchecked");
   });
 
-  it("renders the Thumb as the consumer element when asChild is set", () => {
+  it("merges the checked data-state onto the asChild Thumb", () => {
     // Arrange & Act
     render(
-      <Switch.Root aria-label="Enable notifications">
+      <Switch.Root aria-label="Enable notifications" defaultChecked>
         <Switch.Thumb asChild>
           <span data-testid="custom-thumb" />
         </Switch.Thumb>
       </Switch.Root>,
     );
 
-    // Assert — our span rendered; aria-hidden and data-state merged onto it
-    const thumb = screen.getByTestId("custom-thumb");
-    expect(thumb).toHaveAttribute("aria-hidden", "true");
-    expect(thumb).toHaveAttribute("data-state", "unchecked");
+    // Assert
+    expect(screen.getByTestId("custom-thumb")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
   });
 });

package/src/Switch/__tests__/Switch.basic-rendering.test.tsx

@@ -1,76 +1,95 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 
 import { Switch } from "../Switch";
 
 describe("Switch basic rendering", () => {
-  it('renders a <button type="button" role="switch">', () => {
+  it('renders a native <input type="checkbox" role="switch">', () => {
     // Arrange & Act
     render(<Switch.Root aria-label="Enable notifications" />);
     const sw = screen.getByRole("switch", { name: "Enable notifications" });
 
     // Assert
-    expect(sw.tagName).toBe("BUTTON");
-    expect(sw).toHaveAttribute("type", "button");
+    expect(sw.tagName).toBe("INPUT");
+    expect(sw).toHaveAttribute("type", "checkbox");
   });
 
-  it('defaults aria-checked="false" when unchecked', () => {
+  it("wraps the input in a <label> so the visible track is clickable", () => {
     // Arrange & Act
     render(<Switch.Root aria-label="Enable notifications" />);
 
     // Assert
     expect(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("aria-checked", "false");
+      screen.getByRole("switch", { name: "Enable notifications" }).closest("label"),
+    ).not.toBeNull();
   });
 
-  it('defaults data-state="unchecked" on mount', () => {
+  it("is unchecked by default", () => {
     // Arrange & Act
     render(<Switch.Root aria-label="Enable notifications" />);
 
     // Assert
     expect(
       screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("data-state", "unchecked");
+    ).not.toBeChecked();
   });
 
-  it("renders Switch.Thumb as a <span> inside the root", () => {
+  it("forwards native input attributes (name, value) to the input", () => {
     // Arrange & Act
-    render(
-      <Switch.Root aria-label="Enable notifications">
-        <Switch.Thumb data-testid="thumb" />
-      </Switch.Root>,
-    );
+    render(<Switch.Root name="notify" value="on" aria-label="Enable notifications" />);
+    const sw = screen.getByRole("switch", { name: "Enable notifications" });
 
     // Assert
-    const thumb = screen.getByTestId("thumb");
-    expect(thumb.tagName).toBe("SPAN");
-    expect(thumb).toBeInTheDocument();
+    expect(sw).toHaveAttribute("name", "notify");
+    expect(sw).toHaveAttribute("value", "on");
   });
 
-  it('sets aria-hidden="true" on the Thumb', () => {
+  it("applies className to the track, not the hidden input", () => {
     // Arrange & Act
-    render(
-      <Switch.Root aria-label="Enable notifications">
-        <Switch.Thumb data-testid="thumb" />
-      </Switch.Root>,
+    render(<Switch.Root className="track" aria-label="Enable notifications" />);
+    const sw = screen.getByRole("switch", { name: "Enable notifications" });
+
+    // Assert
+    expect(sw).not.toHaveClass("track");
+    expect(sw.closest("label")).toHaveClass("track");
+  });
+
+  it("forwards a ref to the underlying input", () => {
+    // Arrange
+    const ref = createRef<HTMLInputElement>();
+
+    // Act
+    render(<Switch.Root ref={ref} aria-label="Enable notifications" />);
+
+    // Assert
+    expect(ref.current).toBe(
+      screen.getByRole("switch", { name: "Enable notifications" }),
     );
+  });
+
+  it('defaults data-state="unchecked" on the track on mount', () => {
+    // Arrange & Act
+    const { container } = render(<Switch.Root aria-label="Enable notifications" />);
 
     // Assert
-    expect(screen.getByTestId("thumb")).toHaveAttribute("aria-hidden", "true");
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "unchecked",
+    );
   });
 
-  it('sets data-state="unchecked" on Thumb by default', () => {
+  it("renders Switch.Thumb as an aria-hidden <span> inside the track", () => {
     // Arrange & Act
     render(
       <Switch.Root aria-label="Enable notifications">
         <Switch.Thumb data-testid="thumb" />
       </Switch.Root>,
     );
+    const thumb = screen.getByTestId("thumb");
 
     // Assert
-    expect(screen.getByTestId("thumb")).toHaveAttribute(
-      "data-state",
-      "unchecked",
-    );
+    expect(thumb.tagName).toBe("SPAN");
+    expect(thumb).toHaveAttribute("aria-hidden", "true");
+    expect(thumb).toHaveAttribute("data-state", "unchecked");
   });
 });

package/src/Switch/__tests__/Switch.contract.test.tsx

@@ -2,7 +2,7 @@ import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 
 import { Switch } from "../Switch";
 
@@ -10,11 +10,11 @@ import { Switch } from "../Switch";
  * Auto-verification of the Switch styling contract (RFC 0004 §3.4 / D15). The
  * `data-*` half of `registry/components/switch/contract.json` is *derived from and
  * asserted against the rendered headless component* so it can never drift from
- * what the component actually emits. Switch is the state-driven proof (no
- * modifiers): its surface is `data-state="checked" | "unchecked"` (always
- * present) plus `data-disabled=""` when disabled. The authored half (root
- * class, parts, custom properties) is a styling convention the headless layer
- * does not emit and is checked by the generator drift-guards instead.
+ * what the component actually emits. The switch's `data-*` surface lives on the
+ * **track** (the styled root) — `data-state="checked" | "unchecked"` (always
+ * present) plus `data-disabled=""` when disabled. The authored half (classes,
+ * parts, custom properties) is a styling convention the headless layer does not
+ * emit and is checked by the generator drift-guards instead.
  */
 const contractPath = resolve(
   dirname(fileURLToPath(import.meta.url)),
@@ -23,6 +23,13 @@ const contractPath = resolve(
 
 const contract = JSON.parse(readFileSync(contractPath, "utf8"));
 
+/** The wrapper element is the contracted styling root. */
+function rootOf(container: HTMLElement): HTMLElement {
+  const root = container.querySelector("label");
+  if (!root) throw new Error("expected a Switch wrapper element");
+  return root;
+}
+
 /** Every `data-*` attribute name present on an element. */
 function dataAttributeNames(element: Element): string[] {
   return [...element.attributes]
@@ -37,7 +44,6 @@ describe("Switch styling contract", () => {
   );
 
   it("declares every data-* attribute as auto-verified against the component", () => {
-    // The Switch has no authored data-* surface; the whole contract is derived.
     expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
   });
 
@@ -51,8 +57,8 @@ describe("Switch styling contract", () => {
         <Switch.Thumb />
       </Switch.Root>,
     ]) {
-      const { unmount } = render(ui);
-      for (const name of dataAttributeNames(screen.getByRole("switch"))) {
+      const { container, unmount } = render(ui);
+      for (const name of dataAttributeNames(rootOf(container))) {
         emitted.add(name);
       }
       unmount();
@@ -70,7 +76,7 @@ describe("Switch styling contract", () => {
     );
 
     for (const entry of stateEntries) {
-      const { unmount } = render(
+      const { container, unmount } = render(
         <Switch.Root
           checked={entry.value === "checked"}
           onCheckedChange={() => {}}
@@ -79,7 +85,7 @@ describe("Switch styling contract", () => {
           <Switch.Thumb />
         </Switch.Root>,
       );
-      expect(screen.getByRole("switch")).toHaveAttribute("data-state", entry.value);
+      expect(rootOf(container)).toHaveAttribute("data-state", entry.value);
       unmount();
     }
   });
@@ -89,21 +95,20 @@ describe("Switch styling contract", () => {
       (attribute: { name: string }) => attribute.name === "data-disabled",
     );
 
-    render(
+    const { container } = render(
       <Switch.Root disabled aria-label="x">
         <Switch.Thumb />
       </Switch.Root>,
     );
-    expect(screen.getByRole("switch")).toHaveAttribute(entry.name, entry.value);
+    expect(rootOf(container)).toHaveAttribute(entry.name, entry.value);
   });
 
   it("omits data-disabled when the documented condition does not hold", () => {
-    render(
+    const { container } = render(
       <Switch.Root aria-label="x">
         <Switch.Thumb />
       </Switch.Root>,
     );
-
-    expect(screen.getByRole("switch")).not.toHaveAttribute("data-disabled");
+    expect(rootOf(container)).not.toHaveAttribute("data-disabled");
   });
 });

package/src/Switch/__tests__/Switch.controlled-state.test.tsx

@@ -6,18 +6,18 @@ import { Switch } from "../Switch";
 describe("Switch controlled state", () => {
   it("reflects checked={true}", () => {
     // Arrange & Act
-    render(
-      <Switch.Root
-        aria-label="Enable notifications"
-        checked
-        onCheckedChange={() => {}}
-      />,
+    const { container } = render(
+      <Switch.Root aria-label="Enable notifications" checked onCheckedChange={() => {}} />,
     );
 
     // Assert
     expect(
       screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("aria-checked", "true");
+    ).toBeChecked();
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
   });
 
   it("reflects checked={false}", () => {
@@ -33,7 +33,7 @@ describe("Switch controlled state", () => {
     // Assert
     expect(
       screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("aria-checked", "false");
+    ).not.toBeChecked();
   });
 
   it("fires onCheckedChange with the next value when clicked", async () => {
@@ -49,9 +49,7 @@ describe("Switch controlled state", () => {
     );
 
     // Act
-    await user.click(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    );
+    await user.click(screen.getByRole("switch", { name: "Enable notifications" }));
 
     // Assert
     expect(onCheckedChange).toHaveBeenCalledOnce();
@@ -74,6 +72,6 @@ describe("Switch controlled state", () => {
     await user.click(sw);
 
     // Assert — controlled value not updated
-    expect(sw).toHaveAttribute("aria-checked", "false");
+    expect(sw).not.toBeChecked();
   });
 });

package/src/Switch/__tests__/Switch.disabled.test.tsx

@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { Switch } from "../Switch";
 
 describe("Switch disabled", () => {
-  it("sets the native disabled attribute", () => {
+  it("sets the native disabled attribute on the input", () => {
     // Arrange & Act
     render(<Switch.Root aria-label="Enable notifications" disabled />);
 
@@ -14,27 +14,25 @@ describe("Switch disabled", () => {
     ).toBeDisabled();
   });
 
-  it('sets data-disabled="" when disabled', () => {
+  it('sets data-disabled="" on the track when disabled', () => {
     // Arrange & Act
-    render(<Switch.Root aria-label="Enable notifications" disabled />);
+    const { container } = render(
+      <Switch.Root aria-label="Enable notifications" disabled />,
+    );
 
     // Assert
-    expect(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("data-disabled", "");
+    expect(container.querySelector("label")).toHaveAttribute("data-disabled", "");
   });
 
   it("does not set data-disabled when not disabled", () => {
     // Arrange & Act
-    render(<Switch.Root aria-label="Enable notifications" />);
+    const { container } = render(<Switch.Root aria-label="Enable notifications" />);
 
     // Assert
-    expect(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    ).not.toHaveAttribute("data-disabled");
+    expect(container.querySelector("label")).not.toHaveAttribute("data-disabled");
   });
 
-  it("does not toggle and does not call onCheckedChange when clicked while disabled", async () => {
+  it("does not toggle or call onCheckedChange when clicked while disabled", async () => {
     // Arrange
     const user = userEvent.setup();
     const onCheckedChange = vi.fn();
@@ -45,16 +43,13 @@ describe("Switch disabled", () => {
         onCheckedChange={onCheckedChange}
       />,
     );
+    const sw = screen.getByRole("switch", { name: "Enable notifications" });
 
     // Act
-    await user.click(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    );
+    await user.click(sw);
 
     // Assert
     expect(onCheckedChange).not.toHaveBeenCalled();
-    expect(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("aria-checked", "false");
+    expect(sw).not.toBeChecked();
   });
 });