@boxcustodia/library 2.0.0-alpha.19 → 2.0.0-alpha.20

package/src/components/date-picker/use-hidden-field-value.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+import { emitNativeInputChange } from "./date-picker.utils";
+
+/**
+ * Drives a hidden Base UI `FieldControl` input from a derived form value.
+ *
+ * The input is left uncontrolled and updated imperatively so a native `input`
+ * event fires on every change. Base UI re-runs Field validation (and clears the
+ * error) only inside the control's `onChange` — never from a React `value` prop
+ * — so date changes coming from the calendar or the visible input must emit a
+ * real event for the invalid state to clear.
+ *
+ * Returns the ref to attach to the hidden input.
+ */
+export function useHiddenFieldValue(value: string) {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    emitNativeInputChange(ref.current, value);
+  }, [value]);
+
+  return ref;
+}

package/src/components/dialog/dialog.test.tsx

@@ -162,9 +162,9 @@ describe("Dialog component", () => {
           <DialogPopup className="custom-popup-class">Content</DialogPopup>
         </DialogRoot>,
       );
-      expect(
-        document.querySelector('[data-slot="dialog-popup"]'),
-      ).toHaveClass("custom-popup-class");
+      expect(document.querySelector('[data-slot="dialog-popup"]')).toHaveClass(
+        "custom-popup-class",
+      );
     });
   });
 
@@ -177,7 +177,9 @@ describe("Dialog component", () => {
           </DialogPopup>
         </DialogRoot>,
       );
-      expect(screen.getByRole("button", { name: "Cerrar" })).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Cerrar" }),
+      ).toBeInTheDocument();
     });
 
     it("hides close button when hideClose is true", () => {
@@ -230,9 +232,7 @@ describe("Dialog component", () => {
         </DialogRoot>,
       );
       // Close button is wrapped in a Button with the closeButton class
-      expect(
-        document.querySelector(".custom-close-btn"),
-      ).toBeInTheDocument();
+      expect(document.querySelector(".custom-close-btn")).toBeInTheDocument();
     });
   });
 
@@ -306,7 +306,9 @@ describe("Dialog composite", () => {
     setup({ onClose });
     click(screen.getByRole("button", { name: "Open" }));
     await waitFor(() =>
-      expect(screen.getByRole("button", { name: "Cerrar" })).toBeInTheDocument(),
+      expect(
+        screen.getByRole("button", { name: "Cerrar" }),
+      ).toBeInTheDocument(),
     );
     click(screen.getByRole("button", { name: "Cerrar" }));
     await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));

package/src/components/dropzone/dropzone.test.tsx

@@ -16,7 +16,9 @@ import {
 describe("DropzoneRoot", () => {
   it("renders with data-slot dropzone", () => {
     render(<DropzoneRoot />);
-    expect(document.querySelector('[data-slot="dropzone"]')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="dropzone"]'),
+    ).toBeInTheDocument();
   });
 
   it("applies className to root div", () => {
@@ -136,15 +138,11 @@ describe("DropzoneItem", () => {
 
   it("applies className", () => {
     render(
-      <DropzoneItem
-        file={file}
-        onRemove={vi.fn()}
-        className="custom-item"
-      />,
+      <DropzoneItem file={file} onRemove={vi.fn()} className="custom-item" />,
+    );
+    expect(document.querySelector('[data-slot="dropzone-item"]')).toHaveClass(
+      "custom-item",
     );
-    expect(
-      document.querySelector('[data-slot="dropzone-item"]'),
-    ).toHaveClass("custom-item");
   });
 });
 
@@ -247,15 +245,15 @@ describe("Dropzone composite", () => {
 
   it("shows allowed extensions when provided", () => {
     render(<Dropzone allowedExtensions={["image/png", "image/jpeg"]} />);
-    expect(
-      screen.getByText(/Tipos permitidos/),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/Tipos permitidos/)).toBeInTheDocument();
   });
 
   it("does not show rejected section when showRejected is false", () => {
     render(<Dropzone showRejected={false} />);
     // No rejected items in DOM since showRejected=false (default)
-    expect(document.querySelectorAll('[data-slot="dropzone-item"]')).toHaveLength(0);
+    expect(
+      document.querySelectorAll('[data-slot="dropzone-item"]'),
+    ).toHaveLength(0);
   });
 
   it("applies classNames.trigger to trigger element", () => {

package/src/components/empty/empty.test.tsx

@@ -168,9 +168,10 @@ describe("Empty composite", () => {
 
   it("applies iconVariant='icon' to media slot", () => {
     render(<Empty iconVariant="icon" />);
-    expect(
-      document.querySelector('[data-slot="empty-media"]'),
-    ).toHaveAttribute("data-variant", "icon");
+    expect(document.querySelector('[data-slot="empty-media"]')).toHaveAttribute(
+      "data-variant",
+      "icon",
+    );
   });
 
   it("renders children alongside default slots", () => {

package/src/components/field/field.test.tsx

@@ -1,5 +1,4 @@
-import { render, screen } from "@testing-library/react";
-import { renderHook } from "@testing-library/react";
+import { render, renderHook, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import {
   Field,
@@ -12,8 +11,8 @@ import {
   FieldPrimitive,
   FieldRoot,
   FieldSet,
-  FieldValidity,
   FieldsetPrimitive,
+  FieldValidity,
   normalizeError,
   useFieldName,
   useIsInsideFieldRoot,
@@ -56,9 +55,7 @@ describe("useIsInsideFieldRoot", () => {
 
   it("returns true inside FieldRoot", () => {
     const { result } = renderHook(() => useIsInsideFieldRoot(), {
-      wrapper: ({ children }) => (
-        <FieldRoot name="test">{children}</FieldRoot>
-      ),
+      wrapper: ({ children }) => <FieldRoot name="test">{children}</FieldRoot>,
     });
     expect(result.current).toBe(true);
   });
@@ -72,9 +69,7 @@ describe("useFieldName", () => {
 
   it("returns the name provided to FieldRoot", () => {
     const { result } = renderHook(() => useFieldName(), {
-      wrapper: ({ children }) => (
-        <FieldRoot name="email">{children}</FieldRoot>
-      ),
+      wrapper: ({ children }) => <FieldRoot name="email">{children}</FieldRoot>,
     });
     expect(result.current).toBe("email");
   });
@@ -97,9 +92,9 @@ describe("FieldRoot", () => {
 
   it("does not set data-required when required is absent", () => {
     render(<FieldRoot name="x" />);
-    expect(
-      document.querySelector('[data-slot="field"]'),
-    ).not.toHaveAttribute("data-required");
+    expect(document.querySelector('[data-slot="field"]')).not.toHaveAttribute(
+      "data-required",
+    );
   });
 
   it("forwards className", () => {
@@ -204,7 +199,11 @@ describe("Field composite", () => {
   });
 
   it("renders children", () => {
-    render(<Field><input placeholder="ctrl" /></Field>);
+    render(
+      <Field>
+        <input placeholder="ctrl" />
+      </Field>,
+    );
     expect(screen.getByPlaceholderText("ctrl")).toBeInTheDocument();
   });
 

package/src/components/form/form.stories.tsx

@@ -10,7 +10,7 @@ import {
 import { Button } from "../button/button";
 import { Checkbox } from "../checkbox/checkbox";
 import { Combobox } from "../combobox";
-import { DateInput } from "../date-picker";
+import { DateInput, DatePicker } from "../date-picker";
 import { Field, FieldError, FieldLabel, FieldRoot } from "../field/field";
 import { Input } from "../input/input";
 import { NumberInput } from "../number-input";
@@ -63,6 +63,11 @@ const ROLES = [
  * Native HTML constraint validation. Each `FieldRoot` carries a `name` so Form
  * can route server errors automatically. Errors only surface after the first
  * submit attempt — no premature invalid state.
+ *
+ * Both date controls — typeable `DateInput` and popover `DatePicker` — submit an
+ * ISO date string (`yyyy-MM-dd`), or `""` when empty so `required` triggers
+ * `valueMissing`. The displayed text stays `dd/MM/yyyy`; value and display are
+ * separate layers.
  */
 export const Default: Story = {
   render: () => {
@@ -130,11 +135,21 @@ export const Default: Story = {
         <Field
           name="startDate"
           label="Start date"
+          description="Typeable input — submits yyyy-MM-dd."
           error={{ message: "Start date is required.", match: "valueMissing" }}
         >
           <DateInput required />
         </Field>
 
+        <Field
+          name="endDate"
+          label="End date"
+          description="Popover picker — submits yyyy-MM-dd."
+          error={{ message: "End date is required.", match: "valueMissing" }}
+        >
+          <DatePicker mode="single" required />
+        </Field>
+
         <Field
           name="notifications"
           label="Notification channels"

package/src/components/index.ts

@@ -23,6 +23,7 @@ export * from "./label";
 export * from "./loader";
 export * from "./menu";
 export * from "./number-input";
+export * from "./otp";
 export * from "./pagination";
 export * from "./password";
 export * from "./popover";

package/src/components/label/label.test.tsx

@@ -100,8 +100,8 @@ describe("Label component", () => {
         Email
       </Label>,
     );
-    expect(
-      screen.getByRole("button", { name: "Más información" }),
-    ).toHaveClass("tooltip-btn-cls");
+    expect(screen.getByRole("button", { name: "Más información" })).toHaveClass(
+      "tooltip-btn-cls",
+    );
   });
 });

package/src/components/menu/menu.tsx

@@ -106,11 +106,7 @@ function renderItem(item: MenuItemType, index: number): React.ReactNode {
     case "radio-group": {
       const { type: _, value, onValueChange, items } = item;
       return (
-        <MenuRadioGroup
-          key={index}
-          value={value}
-          onValueChange={onValueChange}
-        >
+        <MenuRadioGroup key={index} value={value} onValueChange={onValueChange}>
           {items.map((subItem, i) => renderItem(subItem, i))}
         </MenuRadioGroup>
       );

package/src/components/number-input/number-input.test.tsx

@@ -215,7 +215,9 @@ describe("NumberInput scrub primitives", () => {
     render(
       <NumberInputRoot name="amount">
         <NumberInputGroup>
-          <NumberInputScrubArea className="scrub-cls">Drag</NumberInputScrubArea>
+          <NumberInputScrubArea className="scrub-cls">
+            Drag
+          </NumberInputScrubArea>
           <NumberInputInput />
         </NumberInputGroup>
       </NumberInputRoot>,
@@ -251,6 +253,8 @@ describe("NumberInput scrub primitives", () => {
     const { container } = render(
       <NumberInputCursorIcon data-testid="cursor-icon" />,
     );
-    expect(container.querySelector("[data-testid='cursor-icon']")).toBeInTheDocument();
+    expect(
+      container.querySelector("[data-testid='cursor-icon']"),
+    ).toBeInTheDocument();
   });
 });

package/src/components/password/password.test.tsx

@@ -12,12 +12,17 @@ describe("Password", () => {
 
     it("renders toggle button with data-slot='password-toggle'", () => {
       render(<Password />);
-      expect(document.querySelector('[data-slot="password-toggle"]')).toBeTruthy();
+      expect(
+        document.querySelector('[data-slot="password-toggle"]'),
+      ).toBeTruthy();
     });
 
     it("defaults to type='password'", () => {
       render(<Password />);
-      expect(document.querySelector("input")).toHaveAttribute("type", "password");
+      expect(document.querySelector("input")).toHaveAttribute(
+        "type",
+        "password",
+      );
     });
   });
 
@@ -25,7 +30,9 @@ describe("Password", () => {
     it("reveals password on toggle click", async () => {
       render(<Password />);
       await userEvent.click(
-        document.querySelector('[data-slot="password-toggle"]') as HTMLButtonElement,
+        document.querySelector(
+          '[data-slot="password-toggle"]',
+        ) as HTMLButtonElement,
       );
       expect(document.querySelector("input")).toHaveAttribute("type", "text");
     });
@@ -37,14 +44,19 @@ describe("Password", () => {
       ) as HTMLButtonElement;
       await userEvent.click(toggle);
       await userEvent.click(toggle);
-      expect(document.querySelector("input")).toHaveAttribute("type", "password");
+      expect(document.querySelector("input")).toHaveAttribute(
+        "type",
+        "password",
+      );
     });
 
     it("fires onShow when revealing password", async () => {
       const onShow = vi.fn();
       render(<Password onShow={onShow} />);
       await userEvent.click(
-        document.querySelector('[data-slot="password-toggle"]') as HTMLButtonElement,
+        document.querySelector(
+          '[data-slot="password-toggle"]',
+        ) as HTMLButtonElement,
       );
       expect(onShow).toHaveBeenCalledTimes(1);
     });
@@ -107,7 +119,9 @@ describe("Password", () => {
     it("renders custom hideIcon after toggle", async () => {
       render(<Password hideIcon={<span data-testid="hide-icon" />} />);
       await userEvent.click(
-        document.querySelector('[data-slot="password-toggle"]') as HTMLButtonElement,
+        document.querySelector(
+          '[data-slot="password-toggle"]',
+        ) as HTMLButtonElement,
       );
       expect(screen.getByTestId("hide-icon")).toBeTruthy();
     });

package/src/components/password/password.tsx

@@ -2,7 +2,7 @@
 
 import { Eye, EyeOff } from "lucide-react";
 import { type ChangeEvent, type ReactNode } from "react";
-import { useToggle } from "../../hooks";
+import { useBoolean } from "../../hooks";
 import { cn } from "../../lib";
 import { InputPrimitive, type InputProps } from "../input/input";
 
@@ -32,7 +32,7 @@ export function Password({
   classNames,
   ...rest
 }: PasswordProps) {
-  const [showPassword, toggleShowPassword] = useToggle(false);
+  const [showPassword, { toggle: toggleShowPassword }] = useBoolean(false);
 
   const handleToggle = () => {
     toggleShowPassword();

package/src/components/popover/popover.test.tsx

@@ -21,7 +21,9 @@ describe("Popover primitives", () => {
         <PopoverPopup>Content</PopoverPopup>
       </PopoverRoot>,
     );
-    expect(document.querySelector('[data-slot="popover-trigger"]')).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="popover-trigger"]'),
+    ).toBeTruthy();
   });
 
   it("PopoverPopup renders data-slot='popover-popup' when open", () => {
@@ -125,9 +127,7 @@ describe("Popover composite", () => {
         <span data-testid="content">Content</span>
       </Popover>,
     );
-    expect(
-      document.querySelector('[data-slot="popover-title"]'),
-    ).toBeNull();
+    expect(document.querySelector('[data-slot="popover-title"]')).toBeNull();
   });
 
   it("opens on trigger click", async () => {

package/src/components/progress/progress.test.tsx

@@ -58,9 +58,7 @@ describe("ProgressLabel", () => {
         <ProgressTrack />
       </ProgressRoot>,
     );
-    expect(
-      document.querySelector('[data-slot="progress-label"]'),
-    ).toBeTruthy();
+    expect(document.querySelector('[data-slot="progress-label"]')).toBeTruthy();
   });
 });
 
@@ -74,9 +72,7 @@ describe("ProgressValue", () => {
         <ProgressValue />
       </ProgressRoot>,
     );
-    expect(
-      document.querySelector('[data-slot="progress-value"]'),
-    ).toBeTruthy();
+    expect(document.querySelector('[data-slot="progress-value"]')).toBeTruthy();
   });
 });
 
@@ -110,7 +106,9 @@ describe("Progress indicator variants", () => {
 
 describe("Progress className", () => {
   it("applies className to root", () => {
-    render(<Progress value={null} className="custom-root" aria-label="Loading" />);
+    render(
+      <Progress value={null} className="custom-root" aria-label="Loading" />,
+    );
     expect(document.querySelector('[data-slot="progress"]')).toHaveClass(
       "custom-root",
     );
@@ -120,7 +118,8 @@ describe("Progress className", () => {
 describe("Progress primitive exports", () => {
   it("exports ProgressRoot", () => expect(ProgressRoot).toBeDefined());
   it("exports ProgressTrack", () => expect(ProgressTrack).toBeDefined());
-  it("exports ProgressIndicator", () => expect(ProgressIndicator).toBeDefined());
+  it("exports ProgressIndicator", () =>
+    expect(ProgressIndicator).toBeDefined());
   it("exports ProgressLabel", () => expect(ProgressLabel).toBeDefined());
   it("exports ProgressValue", () => expect(ProgressValue).toBeDefined());
 });

package/src/components/radio-group/radio-group.test.tsx

@@ -42,7 +42,9 @@ describe("RadioGroup primitives", () => {
         </RadioRoot>
       </RadioGroupRoot>,
     );
-    expect(document.querySelector('[data-slot="radio-indicator"]')).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="radio-indicator"]'),
+    ).toBeTruthy();
   });
 });
 
@@ -60,9 +62,10 @@ describe("RadioGroup composite", () => {
 
   it("marks defaultValue as checked", () => {
     render(<RadioGroup items={items} defaultValue="b" />);
-    expect(
-      screen.getByRole("radio", { name: "Option B" }),
-    ).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("radio", { name: "Option B" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
   });
 
   it("fires onValueChange when selection changes", async () => {
@@ -74,16 +77,17 @@ describe("RadioGroup composite", () => {
 
   it("reflects controlled value", () => {
     render(<RadioGroup items={items} value="a" onValueChange={vi.fn()} />);
-    expect(
-      screen.getByRole("radio", { name: "Option A" }),
-    ).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("radio", { name: "Option A" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
   });
 
   it("disables specific item", () => {
     render(<RadioGroup items={items} />);
-    expect(
-      screen.getByRole("radio", { name: "Option C" }),
-    ).toHaveAttribute("data-disabled");
+    expect(screen.getByRole("radio", { name: "Option C" })).toHaveAttribute(
+      "data-disabled",
+    );
   });
 
   it("disables all items when disabled prop is set", () => {
@@ -140,7 +144,9 @@ describe("RadioGroup.Legend", () => {
 
 describe("RadioGroup controlFirst", () => {
   it("applies flex-row-reverse when controlFirst=false", () => {
-    render(<RadioGroup items={[{ value: "a", label: "A" }]} controlFirst={false} />);
+    render(
+      <RadioGroup items={[{ value: "a", label: "A" }]} controlFirst={false} />,
+    );
     const row = document.querySelector(".flex-row-reverse");
     expect(row).toBeTruthy();
   });

package/src/components/select/select.test.tsx

@@ -51,7 +51,11 @@ describe("Select primitives — data-slots", () => {
   });
 
   it("SelectButton renders data-slot=select-button with type=button by default", () => {
-    render(<SelectRoot><SelectButton>Open</SelectButton></SelectRoot>);
+    render(
+      <SelectRoot>
+        <SelectButton>Open</SelectButton>
+      </SelectRoot>,
+    );
     const btn = slot("select-button") as HTMLButtonElement;
     expect(btn).toBeInTheDocument();
     expect(btn.type).toBe("button");
@@ -235,7 +239,9 @@ describe("Select defaultGetLabel / defaultGetId", () => {
         getId={(o) => o.code}
       />,
     );
-    expect(screen.getByRole("option", { name: "Argentina" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("option", { name: "Argentina" }),
+    ).toBeInTheDocument();
   });
 });
 
@@ -260,11 +266,7 @@ describe("Select disabled items", () => {
       { id: "2", name: "Blocked", blocked: true },
     ];
     render(
-      <Select
-        items={items}
-        defaultOpen
-        getDisabled={(item) => item.blocked}
-      />,
+      <Select items={items} defaultOpen getDisabled={(item) => item.blocked} />,
     );
     expect(
       document.querySelector('[data-slot="select-item"][data-disabled]'),
@@ -277,9 +279,7 @@ describe("Select disabled items", () => {
 describe("Select onValueChange", () => {
   it("fires onValueChange with selected item object (single)", async () => {
     const onChange = vi.fn();
-    render(
-      <Select items={fruits} defaultOpen onValueChange={onChange} />,
-    );
+    render(<Select items={fruits} defaultOpen onValueChange={onChange} />);
 
     await userEvent.click(screen.getByRole("option", { name: "Banana" }));
 

package/src/components/select/select.tsx

@@ -353,12 +353,14 @@ export function Select<TItem = unknown>(
     multiple,
     className,
     classNames,
+    "aria-invalid": ariaInvalid,
     ...rest
   } = allProps as SelectBaseProps<TItem> & {
     multiple?: boolean;
     onValueChange?: (value: any) => void;
     value?: any;
     defaultValue?: any;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
   };
 
   const getLabel: (item: TItem) => string = getLabelProp ?? defaultGetLabel;
@@ -410,7 +412,13 @@ export function Select<TItem = unknown>(
       onValueChange={handleChange as any}
       {...(rest as any)}
     >
-      <SelectTrigger className={className}>
+      <SelectTrigger
+        className={className}
+        // Only forward `aria-invalid` when explicitly set. Base UI's Field
+        // integration already sets it from validity state; passing `undefined`
+        // here would clobber that value during prop merge and drop the error border.
+        {...(ariaInvalid === undefined ? {} : { "aria-invalid": ariaInvalid })}
+      >
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectPopup className={classNames?.popup}>

package/src/components/stepper/stepper.stories.tsx

@@ -411,13 +411,14 @@ const wizardSteps = [
 
 /**
  * Linear wizard driven by `useStep`. Note the index translation: `useStep` is
- * **0-indexed**, the stepper is **1-indexed**. Feed it `currentStepIndex + 1`
+ * **0-indexed**, the stepper is **1-indexed**. Feed it `index + 1` as `value`
  * and bridge `onValueChange` back with `goTo(value - 1)`.
  *
  * ```tsx
- * const { currentStepIndex, goTo, next, back } = useStep(steps);
+ * const [index, { goTo, next, back }] = useStep(steps.length);
+ * const currentStep = steps[index];
  * <Stepper
- *   value={currentStepIndex + 1}
+ *   value={index + 1}
  *   onValueChange={(value) => goTo(value - 1)}
  *   items={steps}
  * />
@@ -425,20 +426,15 @@ const wizardSteps = [
  */
 export const Wizard: Story = {
   render: () => {
-    const {
-      currentStepIndex,
-      step,
-      isFirstStep,
-      isLastStep,
-      next,
-      back,
-      goTo,
-    } = useStep(wizardSteps);
+    const [index, { isFirstStep, isLastStep, next, back, goTo }] = useStep(
+      wizardSteps.length,
+    );
+    const currentStep = wizardSteps[index];
 
     return (
       <div className="w-[840px] space-y-6">
         <Stepper
-          value={currentStepIndex + 1}
+          value={index + 1}
           onValueChange={(value) => goTo(value - 1)}
           indicators={{ completed: <CheckIcon className="size-3.5" /> }}
           items={wizardSteps.map((s) => ({
@@ -447,9 +443,9 @@ export const Wizard: Story = {
           }))}
         />
         <div className="rounded-lg border p-6">
-          <p className="font-medium text-sm">{step.title}</p>
+          <p className="font-medium text-sm">{currentStep.title}</p>
           <p className="mt-1 text-muted-foreground text-sm">
-            {step.description}
+            {currentStep.description}
           </p>
         </div>
         <div className="flex justify-between">

package/src/components/stepper/stepper.test.tsx

@@ -167,7 +167,9 @@ describe("Stepper data-slots", () => {
 
   it("StepperTrigger renders with data-slot='stepper-trigger'", () => {
     render(<TwoStepStepper />);
-    expect(document.querySelector('[data-slot="stepper-trigger"]')).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="stepper-trigger"]'),
+    ).toBeTruthy();
   });
 
   it("StepperIndicator renders with data-slot='stepper-indicator'", () => {
@@ -329,9 +331,9 @@ describe("Stepper loading state", () => {
         </StepperNav>
       </StepperRoot>,
     );
-    expect(document.querySelector('[data-slot="stepper-item"]')).toHaveAttribute(
-      "data-loading",
-    );
+    expect(
+      document.querySelector('[data-slot="stepper-item"]'),
+    ).toHaveAttribute("data-loading");
   });
 });