@primitiv-ui/react 0.1.29 → 0.1.30

package/src/Combobox/__tests__/Combobox.keyboard-interaction.test.tsx

@@ -0,0 +1,196 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Combobox } from "../Combobox";
+
+function renderCombobox() {
+  return render(
+    <Combobox.Root defaultOpen>
+      <Combobox.Input aria-label="Framework" />
+      <Combobox.Content aria-label="Frameworks">
+        <Combobox.Item value="react">React</Combobox.Item>
+        <Combobox.Item value="preact">Preact</Combobox.Item>
+      </Combobox.Content>
+    </Combobox.Root>,
+  );
+}
+
+/*
+ * Cursor scrolling. The registry panel caps at 18rem and scrolls past it, so a
+ * cursor that moves without bringing itself into view walks straight off the
+ * bottom of a filtered list — APG requires the referenced option to be made
+ * visible. `block: "nearest"` specifically: it is the option that does nothing
+ * when the item is already on screen, so ordinary arrowing does not jerk the list
+ * about. Same contract, and the same spy technique, as Listbox.
+ */
+describe("Combobox cursor scrolling", () => {
+  it("scrolls the seeded item into view when ArrowDown opens the cursor", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const react = screen.getByRole("option", { hidden: true, name: "React" });
+    const scrollIntoView = vi.spyOn(react, "scrollIntoView");
+
+    await user.click(screen.getByRole("combobox", { name: "Framework" }));
+    await user.keyboard("{ArrowDown}");
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
+  });
+
+  it("scrolls each item into view as the cursor moves onto it", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
+    const scrollIntoView = vi.spyOn(preact, "scrollIntoView");
+
+    await user.click(screen.getByRole("combobox", { name: "Framework" }));
+    await user.keyboard("{ArrowDown}{ArrowDown}");
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
+  });
+
+  it("scrolls the last item into view on End", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
+    const scrollIntoView = vi.spyOn(preact, "scrollIntoView");
+
+    await user.click(screen.getByRole("combobox", { name: "Framework" }));
+    // Seed the cursor first: Home/End move an existing cursor rather than
+    // creating one.
+    await user.keyboard("{ArrowDown}{End}");
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
+  });
+
+  it("scrolls the seeded item into view when ArrowUp opens the cursor at the end", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
+    const scrollIntoView = vi.spyOn(preact, "scrollIntoView");
+
+    await user.click(screen.getByRole("combobox", { name: "Framework" }));
+    await user.keyboard("{ArrowUp}");
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
+  });
+});
+
+describe("Combobox keyboard interaction", () => {
+  it("closes the popup on Escape while leaving focus in the input", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    await user.click(input);
+    expect(screen.getByRole("listbox", { hidden: true })).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+
+    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
+    expect(input).toHaveFocus();
+  });
+
+  it("moves the cursor with the arrow keys and publishes it as aria-activedescendant", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    await user.click(input);
+
+    // no cursor until the user asks for one
+    expect(input).not.toHaveAttribute("aria-activedescendant");
+
+    await user.keyboard("{ArrowDown}");
+    const react = screen.getByRole("option", { hidden: true, name: "React" });
+    expect(input).toHaveAttribute("aria-activedescendant", react.id);
+    expect(react).toHaveAttribute("data-highlighted", "");
+
+    await user.keyboard("{ArrowDown}");
+    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
+    expect(input).toHaveAttribute("aria-activedescendant", preact.id);
+    expect(react).not.toHaveAttribute("data-highlighted");
+
+    await user.keyboard("{ArrowUp}");
+    expect(input).toHaveAttribute("aria-activedescendant", react.id);
+
+    // virtual focus: the cursor moves without an option ever taking DOM focus
+    expect(input).toHaveFocus();
+    expect(react).not.toHaveFocus();
+  });
+
+  it("seeds the cursor on the last item when ArrowUp opens the cursor", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    await user.click(input);
+    await user.keyboard("{ArrowUp}");
+
+    expect(input).toHaveAttribute(
+      "aria-activedescendant",
+      screen.getByRole("option", { hidden: true, name: "Preact" }).id,
+    );
+  });
+
+  it("commits the cursor item on Enter", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <Combobox.Root defaultOpen onValueChange={onValueChange}>
+        <Combobox.Input aria-label="Framework" />
+        <Combobox.Content aria-label="Frameworks">
+          <Combobox.Item value="react">React</Combobox.Item>
+          <Combobox.Item value="preact">Preact</Combobox.Item>
+        </Combobox.Content>
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    await user.click(input);
+    await user.keyboard("{ArrowDown}{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    expect(onValueChange).toHaveBeenCalledWith("preact");
+    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
+    expect(input).toHaveValue("Preact");
+  });
+
+  it("ignores Enter while there is no cursor", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <Combobox.Root defaultOpen onValueChange={onValueChange}>
+        <Combobox.Input aria-label="Framework" />
+        <Combobox.Content aria-label="Frameworks">
+          <Combobox.Item value="react">React</Combobox.Item>
+        </Combobox.Content>
+      </Combobox.Root>,
+    );
+
+    await user.click(screen.getByRole("combobox", { name: "Framework" }));
+    await user.keyboard("{Enter}");
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("listbox", { hidden: true })).toBeInTheDocument();
+  });
+
+  it("keeps the committed value when Escape closes the popup", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    await user.click(screen.getByRole("option", { hidden: true, name: "React" }));
+    await user.type(input, "zzz");
+    await user.keyboard("{Escape}");
+
+    // Escape abandons the query, so the text returns to the committed value
+    expect(input).toHaveValue("React");
+  });
+});

package/src/Combobox/__tests__/Combobox.light-dismiss.test.tsx

@@ -0,0 +1,101 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Combobox } from "../Combobox";
+
+/**
+ * Light dismiss — clicking outside an open combobox closes it.
+ *
+ * The popup is a `popover="auto"` element, so the browser does the outside-click
+ * detection itself and reports it back as a `toggle` event; there is deliberately
+ * no hand-rolled pointerdown-outside listener. That is the same pattern
+ * `useSelectContent` uses, and these tests drive it the same way Select's do: by
+ * dispatching the `toggle` the browser would have sent, since jsdom implements
+ * neither the top layer nor real light-dismiss.
+ */
+function renderCombobox(onOpenChange?: (open: boolean) => void) {
+  return render(
+    <Combobox.Root defaultOpen onOpenChange={onOpenChange}>
+      <Combobox.Input aria-label="Framework" />
+      <Combobox.Content aria-label="Frameworks">
+        <Combobox.Item value="react">React</Combobox.Item>
+        <Combobox.Item value="preact">Preact</Combobox.Item>
+      </Combobox.Content>
+    </Combobox.Root>,
+  );
+}
+
+const listbox = () => screen.getByRole("listbox", { hidden: true });
+
+const dismiss = (element: HTMLElement) => {
+  const event = new Event("toggle");
+  Object.defineProperty(event, "newState", { value: "closed" });
+  fireEvent(element, event);
+};
+
+describe("Combobox light dismiss", () => {
+  it("closes when the popup reports a browser light-dismiss", () => {
+    renderCombobox();
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    expect(input).toHaveAttribute("aria-expanded", "true");
+
+    dismiss(listbox());
+
+    expect(input).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
+  });
+
+  it("ignores a toggle to open, so an opening popup does not thrash state", () => {
+    const onOpenChange = vi.fn();
+    renderCombobox(onOpenChange);
+    const input = screen.getByRole("combobox", { name: "Framework" });
+
+    const event = new Event("toggle");
+    Object.defineProperty(event, "newState", { value: "open" });
+    fireEvent(listbox(), event);
+
+    expect(input).toHaveAttribute("aria-expanded", "true");
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("still dismisses when the consumer attaches its own ref to the popup", () => {
+    // The popup needs an internal ref to call showPopover() on. A consumer ref
+    // must compose with it rather than replace it, or the whole popover
+    // machinery — top layer and light dismiss alike — silently stops working.
+    const consumerRef = { current: null as HTMLDivElement | null };
+    render(
+      <Combobox.Root defaultOpen>
+        <Combobox.Input aria-label="Framework" />
+        <Combobox.Content aria-label="Frameworks" ref={consumerRef}>
+          <Combobox.Item value="react">React</Combobox.Item>
+        </Combobox.Content>
+      </Combobox.Root>,
+    );
+
+    expect(consumerRef.current).not.toBeNull();
+
+    dismiss(listbox());
+
+    expect(screen.getByRole("combobox", { name: "Framework" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("restores the committed label, so a dismissed query never lingers", async () => {
+    const user = userEvent.setup();
+    renderCombobox();
+    const input = screen.getByRole("combobox", { name: "Framework" });
+
+    await user.click(screen.getByRole("option", { hidden: true, name: "React" }));
+    await user.type(input, "zzz");
+    expect(input).toHaveValue("Reactzzz");
+
+    dismiss(listbox());
+
+    // Same contract as Escape: dismissing abandons the query rather than leaving
+    // the field showing text that is not the value.
+    expect(input).toHaveValue("React");
+  });
+});

package/src/Combobox/__tests__/Combobox.query.test.tsx

@@ -0,0 +1,105 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Combobox } from "../Combobox";
+
+describe("Combobox query", () => {
+  it("opens the popup and shows the typed text as the user types", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Combobox.Root>
+        <Combobox.Input aria-label="Framework" />
+        <Combobox.Content aria-label="Frameworks" />
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
+
+    await user.type(input, "Rea");
+
+    expect(input).toHaveValue("Rea");
+    expect(input).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByRole("listbox", { hidden: true })).toBeInTheDocument();
+  });
+
+  it("reports the query to onQueryChange on every keystroke", async () => {
+    const user = userEvent.setup();
+    const onQueryChange = vi.fn();
+
+    render(
+      <Combobox.Root onQueryChange={onQueryChange}>
+        <Combobox.Input aria-label="Framework" />
+        <Combobox.Content aria-label="Frameworks" />
+      </Combobox.Root>,
+    );
+
+    await user.type(screen.getByRole("combobox", { name: "Framework" }), "Re");
+
+    expect(onQueryChange.mock.calls.map(([q]) => q)).toEqual(["R", "Re"]);
+  });
+
+  /*
+   * Emptying the field is a deselect.
+   *
+   * The exploration (§D1) settled that closing resets the text FROM the value, so
+   * the field can never sit showing something that is not the value. Taken alone
+   * that made a cleared field un-clearable: Escape put the old label straight
+   * back. Clearing the value too keeps §D1's invariant intact — empty text, empty
+   * value — while letting the gesture mean what the user intended.
+   */
+  it("clears the committed value when the query is emptied", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <Combobox.Root defaultOpen onValueChange={onValueChange}>
+        <Combobox.Input aria-label="Framework" />
+        <Combobox.Content aria-label="Frameworks">
+          <Combobox.Item value="react">React</Combobox.Item>
+        </Combobox.Content>
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    await user.click(screen.getByRole("option", { hidden: true, name: "React" }));
+    expect(input).toHaveValue("React");
+    onValueChange.mockClear();
+
+    await user.clear(input);
+
+    expect(onValueChange).toHaveBeenCalledWith("");
+    expect(screen.getByRole("option", { hidden: true, name: "React" })).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+
+    // The point of the change: Escape must not resurrect the label just deleted.
+    await user.keyboard("{Escape}");
+    expect(input).toHaveValue("");
+  });
+
+  it("does not report a value change when an already-empty field is cleared", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <Combobox.Root onValueChange={onValueChange}>
+        <Combobox.Input aria-label="Framework" />
+        <Combobox.Content aria-label="Frameworks">
+          <Combobox.Item value="react">React</Combobox.Item>
+        </Combobox.Content>
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByRole("combobox", { name: "Framework" });
+    // Typing and deleting back to empty never committed anything, so there is no
+    // selection to clear and no reason to tell the consumer otherwise.
+    await user.type(input, "Re");
+    await user.clear(input);
+
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+});

package/src/Combobox/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useComboboxRoot";

package/src/Combobox/hooks/useComboboxRoot.ts

@@ -0,0 +1,2 @@
+/* Combobox root state hook — scaffold only (RED). */
+export {};

package/src/Combobox/index.ts

@@ -0,0 +1,3 @@
+export * from "./Combobox";
+export * from "./ComboboxContext";
+export * from "./types";

package/src/Combobox/types.ts

@@ -0,0 +1,133 @@
+import type { ComponentProps, KeyboardEvent } from "react";
+
+/** What a mounted `Combobox.Item` registers with the root. */
+export interface ComboboxItemMeta {
+  /**
+   * The rendered element, used to scroll the cursor into view. Non-nullable:
+   * registration happens in the item's own effect, so the ref has always been
+   * attached by then — an item is never in the registry without its element.
+   */
+  element: HTMLElement;
+  /** The label to show in the input once this item is committed. */
+  label: string;
+}
+
+/** The value carried from `Combobox.Root` to its parts. */
+export interface ComboboxContextValue {
+  /** Whether the popup listbox is open. */
+  open: boolean;
+  /** DOM id of the popup listbox, wired to the input's `aria-controls`. */
+  listboxId: string;
+  /** The text currently in the input — the live query while open. */
+  query: string;
+  /** Sets the query, opening the popup, as the user types. */
+  setQuery: (query: string) => void;
+  /** The selected value, or `""` when nothing is selected. */
+  value: string;
+  /** Commits a selection: sets the value, closes, and resets the input text. */
+  select: (value: string, label: string) => void;
+  /** The input's whole keydown behaviour: Escape, cursor seeding, arrow keys. */
+  handleInputKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Closes the popup, clears the cursor and resets the input text from the
+   * committed value. Shared by Escape and by the browser's own light-dismiss, so
+   * clicking away and pressing Escape leave the field in the same state.
+   */
+  dismiss: () => void;
+  /** The value the virtual-focus cursor sits on, or `null` for no cursor. */
+  activeValue: string | null;
+  /** Builds the DOM id for an item, so the input can point at it. */
+  getItemId: (value: string) => string;
+  /**
+   * Registers a mounted item so the arrow keys know the order and Enter can
+   * resolve the same label a click would.
+   */
+  registerItem: (value: string, meta: ComboboxItemMeta | null) => void;
+}
+
+/** Props shared by every asChild-capable part. */
+export interface ComboboxSlottableProps {
+  /**
+   * Render the consumer's own element instead of the default one, merging
+   * behaviour onto it.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/** Props for `Combobox.Root` — the wrapper that owns the combobox's state. */
+export interface ComboboxRootProps extends ComponentProps<"div">, ComboboxSlottableProps {
+  /**
+   * Whether the popup is open on first render, for the uncontrolled case.
+   *
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the popup is open, for the controlled case. Pair with
+   * {@link ComboboxRootProps.onOpenChange | `onOpenChange`} or it can never
+   * change.
+   *
+   * @default undefined
+   */
+  open?: boolean;
+  /**
+   * Called when the combobox wants the popup opened or closed. Under a
+   * controlled {@link ComboboxRootProps.open | `open`} the combobox only asks —
+   * the parent decides.
+   *
+   * @default undefined
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The selected value on first render, for the uncontrolled case.
+   *
+   * @default ""
+   */
+  defaultValue?: string;
+  /**
+   * The selected value, for the controlled case. Pair with
+   * {@link ComboboxRootProps.onValueChange | `onValueChange`}.
+   *
+   * @default undefined
+   */
+  value?: string;
+  /**
+   * Called with the input's text on every keystroke. Filtering is
+   * **consumer-owned** — narrow the options you render in response. The
+   * component deliberately ships no `filter` prop.
+   *
+   * @default undefined
+   */
+  onQueryChange?: (query: string) => void;
+  /**
+   * Called with the newly selected value when the user commits a choice,
+   * whether by click or by Enter.
+   *
+   * @default undefined
+   */
+  onValueChange?: (value: string) => void;
+}
+
+/** Props for `Combobox.Input` — the editable text field. */
+export interface ComboboxInputProps extends ComponentProps<"input">, ComboboxSlottableProps {}
+
+/** Props for `Combobox.Content` — the popup listbox. */
+export interface ComboboxContentProps extends ComponentProps<"div">, ComboboxSlottableProps {}
+
+/** Props for `Combobox.Item` — one selectable option in the popup. */
+export interface ComboboxItemProps
+  extends Omit<ComponentProps<"div">, "value">,
+    ComboboxSlottableProps {
+  /**
+   * The value committed when this item is chosen. This narrows the native
+   * `value` attribute, so `value` is `Omit`-ted from the base props above —
+   * without that the two resolve to an intersection artifact that leaks into
+   * consumer types and the generated prop tables.
+   */
+  value: string;
+}
+
+/** Props for `Combobox.Empty` — the no-results message inside the popup. */
+export interface ComboboxEmptyProps extends ComponentProps<"div">, ComboboxSlottableProps {}

package/src/ContextMenu/ContextMenu.tsx

@@ -88,7 +88,7 @@ import { MENUITEM_SELECTOR, TYPEAHEAD_RESET_MS } from "./constants";
  * const [open, setOpen] = useState(false);
  *
  * <ContextMenu.Root open={open} onOpenChange={setOpen}>
- *   …
+ *   ...
  * </ContextMenu.Root>
  * ```
  */
@@ -182,7 +182,7 @@ function useCloseSiblingSub() {
  * @example asChild — attach the gesture to any element
  * ```tsx
  * <ContextMenu.Trigger asChild>
- *   <ImageCard src="…" alt="…" />
+ *   <ImageCard src="..." alt="..." />
  * </ContextMenu.Trigger>
  * ```
  */
@@ -1050,7 +1050,7 @@ ContextMenuSub.displayName = "ContextMenuSub";
  * ```tsx
  * <ContextMenu.Sub>
  *   <ContextMenu.SubTrigger>More tools</ContextMenu.SubTrigger>
- *   <ContextMenu.SubContent>…</ContextMenu.SubContent>
+ *   <ContextMenu.SubContent>...</ContextMenu.SubContent>
  * </ContextMenu.Sub>
  * ```
  */

package/src/ContextMenu/README.md

@@ -60,7 +60,7 @@ canvas, a list row, an image, etc.).
 
 ```tsx
 <ContextMenu.Trigger asChild>
-  <ImageCard src="…" alt="…" />
+  <ImageCard src="..." alt="..." />
 </ContextMenu.Trigger>
 ```
 

package/src/DirectionProvider/DirectionProvider.tsx

@@ -21,9 +21,9 @@ import { DirectionProviderProps } from "./types";
  * ```tsx
  * <DirectionProvider dir="rtl">
  *   {/* inherits rtl *\/}
- *   <Tabs.Root defaultValue="a">…</Tabs.Root>
+ *   <Tabs.Root defaultValue="a">...</Tabs.Root>
  *   {/* explicit ltr overrides the provider *\/}
- *   <Tabs.Root dir="ltr" defaultValue="a">…</Tabs.Root>
+ *   <Tabs.Root dir="ltr" defaultValue="a">...</Tabs.Root>
  * </DirectionProvider>
  * ```
  *
@@ -39,7 +39,7 @@ import { DirectionProviderProps } from "./types";
  * import { DirectionProvider } from "@primitiv-ui/react";
  *
  * <DirectionProvider dir="rtl">
- *   <Tabs.Root defaultValue="overview">…</Tabs.Root>
+ *   <Tabs.Root defaultValue="overview">...</Tabs.Root>
  *   <Slider.Root defaultValue={[50]} aria-label="Volume" />
  * </DirectionProvider>
  * ```
@@ -47,9 +47,9 @@ import { DirectionProviderProps } from "./types";
  * @example Nested providers — inner overrides outer for its subtree
  * ```tsx
  * <DirectionProvider dir="rtl">
- *   <Tabs.Root defaultValue="a">…</Tabs.Root>
+ *   <Tabs.Root defaultValue="a">...</Tabs.Root>
  *   <DirectionProvider dir="ltr">
- *     <Tabs.Root defaultValue="b">…</Tabs.Root>
+ *     <Tabs.Root defaultValue="b">...</Tabs.Root>
  *   </DirectionProvider>
  * </DirectionProvider>
  * ```

package/src/DirectionProvider/README.md

@@ -12,7 +12,7 @@ Renders **no DOM** — only a React context provider.
 import { DirectionProvider } from "@primitiv-ui/react";
 
 <DirectionProvider dir="rtl">
-  <Tabs.Root defaultValue="overview">…</Tabs.Root>
+  <Tabs.Root defaultValue="overview">...</Tabs.Root>
   <Slider.Root defaultValue={[50]} aria-label="Volume" />
 </DirectionProvider>;
 ```
@@ -23,9 +23,9 @@ components fall back to the provider only when `dir` is omitted:
 ```tsx
 <DirectionProvider dir="rtl">
   {/* inherits rtl */}
-  <Tabs.Root defaultValue="a">…</Tabs.Root>
+  <Tabs.Root defaultValue="a">...</Tabs.Root>
   {/* explicit ltr overrides the provider */}
-  <Tabs.Root dir="ltr" defaultValue="a">…</Tabs.Root>
+  <Tabs.Root dir="ltr" defaultValue="a">...</Tabs.Root>
 </DirectionProvider>;
 ```
 
@@ -48,7 +48,7 @@ import { useDirection } from "@primitiv-ui/react";
 
 function MyControl({ dir }: { dir?: "ltr" | "rtl" }) {
   const resolvedDir = dir ?? useDirection();
-  // …
+  // ...
 }
 ```
 

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

@@ -12,7 +12,7 @@ import { Divider } from "../Divider";
  * and asserted against the rendered headless component* so it can never drift
  * from what the component actually emits. Divider has **no** data-* surface — it
  * styles off `aria-orientation` — so the guard also pins that hook: the registry
- * stylesheet's `[aria-orientation="…"]` selectors depend on it.
+ * stylesheet's `[aria-orientation="..."]` selectors depend on it.
  */
 const contractPath = resolve(
   dirname(fileURLToPath(import.meta.url)),