@primitiv-ui/react 0.1.29 → 0.1.30

package/src/MillerColumns/utils.ts

@@ -23,11 +23,77 @@ export function selectAtDepth(
 }
 
 /**
- * Whether `node` is a `MillerColumns.Column` element — the identity
- * check used to separate an Item's cell content from its child column.
+ * Splits a props bag into its `aria-*` entries and everything else.
+ *
+ * `Root` renders two elements — a plain strip container and the inner
+ * `role="tree"` widget — so one props bag has two possible homes. ARIA
+ * belongs on the widget (an `aria-label` must name the tree, not its
+ * scroll container); `className`, `id`, `style` and the rest belong on
+ * the container the consumer actually lays out.
+ */
+export function partitionAriaProps(props: Record<string, unknown>): {
+  aria: Record<string, unknown>;
+  rest: Record<string, unknown>;
+} {
+  const aria: Record<string, unknown> = {};
+  const rest: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("aria-")) {
+      aria[key] = value;
+    } else {
+      rest[key] = value;
+    }
+  }
+
+  return { aria, rest };
+}
+
+/**
+ * Marker a styling layer sets on a component that renders a `MillerColumns`
+ * part, so this module recognises the wrapper as that part.
+ *
+ * `Item` inspects its children **before** rendering them, so it sees the
+ * wrapper component rather than the `MillerColumns.Column` the wrapper
+ * returns. Without a marker a wrapped child column is mis-read as cell
+ * content: the item stops being a branch (no `aria-expanded`, no chevron, no
+ * ArrowRight) and — worse — the column projects into whatever depth slot
+ * happens to be open, so selecting *one* branch reveals *every* sibling's
+ * children at once.
+ *
+ * ```tsx
+ * function StyledColumn(props: MillerColumnsColumnProps) {
+ *   return <MillerColumns.Column {...props} className="column" />;
+ * }
+ * StyledColumn[MILLER_COLUMNS_PART] = "column";
+ * ```
+ */
+export const MILLER_COLUMNS_PART: "__primitivMillerColumnsPart" =
+  "__primitivMillerColumnsPart";
+
+/** The part names {@link MILLER_COLUMNS_PART} accepts. */
+export type MillerColumnsPartName = "column";
+
+/** Read a component's {@link MILLER_COLUMNS_PART} marker, if it declares one. */
+function millerColumnsPartOf(
+  type: unknown,
+): MillerColumnsPartName | undefined {
+  return (type as Record<string, MillerColumnsPartName | undefined> | null)?.[
+    MILLER_COLUMNS_PART
+  ];
+}
+
+/**
+ * Whether `node` is a `MillerColumns.Column` element — either the part itself,
+ * or a component that marks itself as standing in for it (see
+ * {@link MILLER_COLUMNS_PART}).
  */
 export function isColumnElement(node: ReactNode): node is ReactElement {
-  return isValidElement(node) && node.type === MillerColumnsColumn;
+  return (
+    isValidElement(node) &&
+    (node.type === MillerColumnsColumn ||
+      millerColumnsPartOf(node.type) === "column")
+  );
 }
 
 /**

package/src/Modal/Modal.tsx

@@ -51,7 +51,7 @@ import {
  * @example Uncontrolled
  * ```tsx
  * <Modal.Root defaultOpen>
- *   <Modal.Content>…</Modal.Content>
+ *   <Modal.Content>...</Modal.Content>
  * </Modal.Root>
  * ```
  *
@@ -63,7 +63,7 @@ import {
  *   <Modal.Trigger>Open</Modal.Trigger>
  *   <Modal.Portal>
  *     <Modal.Overlay />
- *     <Modal.Content>…</Modal.Content>
+ *     <Modal.Content>...</Modal.Content>
  *   </Modal.Portal>
  * </Modal.Root>
  * ```
@@ -140,7 +140,7 @@ ModalTrigger.displayName = "ModalTrigger";
  * ```tsx
  * <Modal.Portal container={document.getElementById("modal-root")!}>
  *   <Modal.Overlay />
- *   <Modal.Content>…</Modal.Content>
+ *   <Modal.Content>...</Modal.Content>
  * </Modal.Portal>
  * ```
  */
@@ -267,7 +267,7 @@ ModalOverlay.displayName = "ModalOverlay";
  *     if (hasUnsavedChanges) event.preventDefault();
  *   }}
  * >
- *   …
+ *   ...
  * </Modal.Content>
  * ```
  */

package/src/Modal/README.md

@@ -90,12 +90,12 @@ rejects mixing them.
 
 ```tsx
 // Uncontrolled
-<Modal.Root defaultOpen>…</Modal.Root>;
+<Modal.Root defaultOpen>...</Modal.Root>;
 
 // Controlled
 const [open, setOpen] = useState(false);
 <Modal.Root open={open} onOpenChange={setOpen}>
-  …
+  ...
 </Modal.Root>;
 ```
 
@@ -115,7 +115,7 @@ open. `onPointerDownOutside` receives the native `PointerEvent`
     if (isRequiredFlow) event.preventDefault();
   }}
 >
-  …
+  ...
 </Modal.Content>
 ```
 
@@ -126,7 +126,7 @@ import { Modal, type ModalImperativeApi } from "@primitiv-ui/react";
 
 const ref = useRef<ModalImperativeApi>(null);
 
-<Modal.Root ref={ref}>…</Modal.Root>;
+<Modal.Root ref={ref}>...</Modal.Root>;
 
 ref.current?.open();
 ref.current?.close();
@@ -177,7 +177,7 @@ animation can play against the `data-state="closed"` attribute:
 ```tsx
 <Modal.Portal forceMount>
   <Modal.Overlay forceMount />
-  <Modal.Content>…</Modal.Content>
+  <Modal.Content>...</Modal.Content>
 </Modal.Portal>
 ```
 

package/src/Modal/types.ts

@@ -120,7 +120,7 @@ export type ControlledModalRootProps = {
  * TypeScript accepts only one shape at a time.
  */
 export type ModalRootProps = {
-  /** The modal's sub-components (Trigger, Portal, Overlay, Content, …). */
+  /** The modal's sub-components (Trigger, Portal, Overlay, Content, ...). */
   children?: ReactNode;
 } & (UncontrolledModalRootProps | ControlledModalRootProps) & {
     /** Ref receiving the imperative {@link ModalImperativeApi | open/close handle}. */

package/src/NavigationMenu/NavigationMenu.tsx

@@ -115,14 +115,14 @@ import type {
  * useEffect(() => setOpen(""), [pathname]);
  *
  * <NavigationMenu.Root value={open} onValueChange={setOpen}>
- *   …
+ *   ...
  * </NavigationMenu.Root>
  * ```
  *
  * @example Click-only, for a nav that also has to work under touch
  * ```tsx
  * <NavigationMenu.Root openOnHover={false} aria-label="Docs">
- *   …
+ *   ...
  * </NavigationMenu.Root>
  * ```
  */
@@ -230,7 +230,7 @@ NavigationMenuRoot.displayName = "NavigationMenuRoot";
  * @example
  * ```tsx
  * <NavigationMenu.List>
- *   <NavigationMenu.Item value="concepts">…</NavigationMenu.Item>
+ *   <NavigationMenu.Item value="concepts">...</NavigationMenu.Item>
  * </NavigationMenu.List>
  * ```
  */
@@ -268,7 +268,7 @@ NavigationMenuList.displayName = "NavigationMenuList";
  * ```tsx
  * <NavigationMenu.Item value="concepts">
  *   <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
- *   <NavigationMenu.Content>…</NavigationMenu.Content>
+ *   <NavigationMenu.Content>...</NavigationMenu.Content>
  * </NavigationMenu.Item>
  * ```
  *
@@ -483,7 +483,7 @@ NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
  *
  * @example forceMount, for a CSS-animated panel
  * ```tsx
- * <NavigationMenu.Content forceMount className="panel">…</NavigationMenu.Content>
+ * <NavigationMenu.Content forceMount className="panel">...</NavigationMenu.Content>
  * ```
  * ```css
  * .panel { opacity: 0; transition: opacity 150ms; }
@@ -566,7 +566,7 @@ NavigationMenuContent.displayName = "NavigationMenuContent";
  * @example
  * ```tsx
  * <NavigationMenu.Root>
- *   <NavigationMenu.List>…</NavigationMenu.List>
+ *   <NavigationMenu.List>...</NavigationMenu.List>
  *   <NavigationMenu.Viewport className="viewport" />
  * </NavigationMenu.Root>
  * ```

package/src/NavigationMenu/README.md

@@ -69,7 +69,7 @@ duplicate `id`s in the accessibility tree. See RFC 0019 §3–4a.
 {/* A disclosure — has a panel */}
 <NavigationMenu.Item value="concepts">
   <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
-  <NavigationMenu.Content>…</NavigationMenu.Content>
+  <NavigationMenu.Content>...</NavigationMenu.Content>
 </NavigationMenu.Item>
 
 {/* A plain link — no panel, no value */}
@@ -102,7 +102,7 @@ const [open, setOpen] = useState("");
 const { pathname } = useLocation();
 useEffect(() => setOpen(""), [pathname]);
 
-<NavigationMenu.Root value={open} onValueChange={setOpen}>…</NavigationMenu.Root>;
+<NavigationMenu.Root value={open} onValueChange={setOpen}>...</NavigationMenu.Root>;
 ```
 
 ## Hover intent
@@ -167,7 +167,7 @@ animates between panels instead of each entry expanding separately:
 
 ```tsx
 <NavigationMenu.Root>
-  <NavigationMenu.List>…</NavigationMenu.List>
+  <NavigationMenu.List>...</NavigationMenu.List>
   <NavigationMenu.Viewport className="viewport" />
 </NavigationMenu.Root>
 ```

package/src/NavigationMenu/hooks/useNavigationMenuRoot.ts

@@ -228,7 +228,7 @@ export function useNavigationMenuRoot({
       cancelOpen();
       cancelClose();
     },
-    // Both are `useCallback(…, [])`, so their identities are fixed for the
+    // Both are `useCallback(..., [])`, so their identities are fixed for the
     // component's lifetime: emptying this array subscribes the cleanup exactly
     // once either way.
     // Stryker disable next-line ArrayDeclaration: equivalent — stable dependencies.

package/src/NavigationMenu/hooks/useNavigationMenuTrigger.ts

@@ -73,7 +73,7 @@ export function useNavigationMenuTrigger({
       openOnPointerEnterRef.current = undefined;
       cancelOpen();
     },
-    // `cancelOpen` is a `useCallback(…, [])` on the Root, so its identity is
+    // `cancelOpen` is a `useCallback(..., [])` on the Root, so its identity is
     // fixed for the nav's lifetime — emptying this array yields the identical
     // memoised function.
     // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.

package/src/Popover/Popover.tsx

@@ -38,7 +38,7 @@ import type {
  * ```tsx
  * <Popover.Root>
  *   <Popover.Trigger>Open</Popover.Trigger>
- *   <Popover.Content>…</Popover.Content>
+ *   <Popover.Content>...</Popover.Content>
  * </Popover.Root>
  * ```
  *
@@ -48,7 +48,7 @@ import type {
  *
  * <Popover.Root open={open} onOpenChange={setOpen}>
  *   <Popover.Trigger>Open</Popover.Trigger>
- *   <Popover.Content>…</Popover.Content>
+ *   <Popover.Content>...</Popover.Content>
  * </Popover.Root>
  * ```
  */

package/src/Popover/README.md

@@ -77,7 +77,7 @@ input group whose trigger is a small button.
       <Popover.Trigger aria-label="Options">▾</Popover.Trigger>
     </div>
   </Popover.Anchor>
-  <Popover.Content /* position-anchor: --popover in CSS */>…</Popover.Content>
+  <Popover.Content /* position-anchor: --popover in CSS */>...</Popover.Content>
 </Popover.Root>;
 ```
 

package/src/Portal/Portal.tsx

@@ -22,7 +22,7 @@ import type { PortalProps } from "./types";
  * ```tsx
  * {isOpen && (
  *   <Portal>
- *     <div role="dialog">…</div>
+ *     <div role="dialog">...</div>
  *   </Portal>
  * )}
  * ```
@@ -32,7 +32,7 @@ import type { PortalProps } from "./types";
  *
  * ```tsx
  * <Portal>
- *   <div data-state={isOpen ? "open" : "closed"}>…</div>
+ *   <div data-state={isOpen ? "open" : "closed"}>...</div>
  * </Portal>
  * ```
  *

package/src/Portal/README.md

@@ -41,7 +41,7 @@ rendering the `Portal` itself, or by wrapping it with open/closed logic:
 ```tsx
 {isOpen && (
   <Portal>
-    <div role="dialog">…</div>
+    <div role="dialog">...</div>
   </Portal>
 )}
 ```
@@ -51,7 +51,7 @@ from a `data-state` attribute:
 
 ```tsx
 <Portal>
-  <div data-state={isOpen ? "open" : "closed"}>…</div>
+  <div data-state={isOpen ? "open" : "closed"}>...</div>
 </Portal>
 ```
 

package/src/Progress/README.md

@@ -99,7 +99,7 @@ Both sub-components accept `asChild`. The library's ARIA attributes and
 
 ```tsx
 <Progress.Root asChild value={50} aria-label="Upload progress">
-  <section>…</section>
+  <section>...</section>
 </Progress.Root>
 ```
 

package/src/Radio/Radio.tsx

@@ -28,7 +28,7 @@ function dataStateOf(checked: boolean) {
  *
  * Props routing: `className` / `style` style the **box** (the `<label>` you
  * see — the input is hidden); every other prop (`name`, `value`, `id`,
- * `aria-*`, `required`, `disabled`, `ref`, …) spreads onto the input, because
+ * `aria-*`, `required`, `disabled`, `ref`, ...) spreads onto the input, because
  * semantically the Root *is* the radio.
  *
  * Supports two state modes, statically discriminated at the type level:

package/src/RadioGroup/README.md

@@ -44,13 +44,13 @@ TypeScript rejects mixing them.
 ```tsx
 // Uncontrolled
 <RadioGroup.Root defaultValue="compact" aria-label="Density">
-  …
+  ...
 </RadioGroup.Root>;
 
 // Controlled
 const [value, setValue] = useState("compact");
 <RadioGroup.Root value={value} onValueChange={setValue} aria-label="Density">
-  …
+  ...
 </RadioGroup.Root>;
 ```
 

package/src/RadioGroup/RadioGroup.tsx

@@ -70,7 +70,7 @@ import {
  * ```tsx
  * const [value, setValue] = useState("comfortable");
  *
- * <RadioGroup.Root value={value} onValueChange={setValue} aria-label="…">
+ * <RadioGroup.Root value={value} onValueChange={setValue} aria-label="...">
  *   <RadioGroup.Item value="compact">Compact</RadioGroup.Item>
  *   <RadioGroup.Item value="comfortable">Comfortable</RadioGroup.Item>
  * </RadioGroup.Root>

package/src/SegmentedControl/README.md

@@ -53,13 +53,13 @@ rejects mixing them.
 ```tsx
 // Uncontrolled
 <SegmentedControl.Root defaultValue="headless" aria-label="Mode">
-  …
+  ...
 </SegmentedControl.Root>;
 
 // Controlled
 const [value, setValue] = useState("headless");
 <SegmentedControl.Root value={value} onValueChange={setValue} aria-label="Mode">
-  …
+  ...
 </SegmentedControl.Root>;
 ```
 

package/src/SegmentedControl/SegmentedControl.tsx

@@ -71,7 +71,7 @@ import {
  * ```tsx
  * const [value, setValue] = useState("headless");
  *
- * <SegmentedControl.Root value={value} onValueChange={setValue} aria-label="…">
+ * <SegmentedControl.Root value={value} onValueChange={setValue} aria-label="...">
  *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
  *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
  * </SegmentedControl.Root>

package/src/SegmentedControl/hooks/useSegmentedControlRoot.ts

@@ -72,6 +72,7 @@ export function useSegmentedControlRoot({
       // Stryker disable next-line OptionalChaining: unreachable given that invariant.
       itemsRef.current.get(itemValue)?.element.focus();
     },
+    // Stryker disable next-line ArrayDeclaration: equivalent — itemsRef is a stable RefObject.
     [itemsRef],
   );
 

package/src/Select/README.md

@@ -20,7 +20,7 @@ import { Select } from "@primitiv-ui/react";
 // Rich (default)
 <Select.Root value={framework} onValueChange={setFramework}>
   <Select.Trigger>
-    <Select.Value placeholder="Pick a framework…" />
+    <Select.Value placeholder="Pick a framework..." />
   </Select.Trigger>
   <Select.Content>
     <Select.Item value="react">
@@ -115,7 +115,7 @@ icon-only item with no text renders an empty, unlabelled `<option>`.
 
 ```tsx
 <Select.Root native defaultValue="apple" aria-label="Pick a fruit">
-  <Select.Placeholder>Choose a fruit…</Select.Placeholder>
+  <Select.Placeholder>Choose a fruit...</Select.Placeholder>
   <Select.Group label="Fruits">
     <Select.Item value="apple">Apple</Select.Item>
     <Select.Item value="banana">Banana</Select.Item>

package/src/Select/Select.tsx

@@ -121,7 +121,7 @@ function hasPlaceholderChild(children: ReactNode): boolean {
  * ```tsx
  * <Select.Root value={framework} onValueChange={setFramework}>
  *   <Select.Trigger>
- *     <Select.Value placeholder="Pick a framework…" />
+ *     <Select.Value placeholder="Pick a framework..." />
  *   </Select.Trigger>
  *   <Select.Content>
  *     <Select.Item value="react">
@@ -141,7 +141,7 @@ function hasPlaceholderChild(children: ReactNode): boolean {
  * @example Native
  * ```tsx
  * <Select.Root native defaultValue="apple" aria-label="Pick a fruit">
- *   <Select.Placeholder>Choose…</Select.Placeholder>
+ *   <Select.Placeholder>Choose...</Select.Placeholder>
  *   <Select.Group label="Fruits">
  *     <Select.Item value="apple">Apple</Select.Item>
  *     <Select.Item value="banana">Banana</Select.Item>
@@ -155,7 +155,7 @@ function hasPlaceholderChild(children: ReactNode): boolean {
  *   <Field.Label>Framework</Field.Label>
  *   <Select.Root name="framework" value={value} onValueChange={onChange}>
  *     <Select.Trigger>
- *       <Select.Value placeholder="Choose…" />
+ *       <Select.Value placeholder="Choose..." />
  *     </Select.Trigger>
  *     <Select.Content>
  *       <Select.Item value="react">React</Select.Item>
@@ -365,7 +365,7 @@ SelectItem.displayName = "SelectItem";
  * @example
  * ```tsx
  * <Select.Trigger>
- *   <Select.Value placeholder="Pick a framework…" />
+ *   <Select.Value placeholder="Pick a framework..." />
  * </Select.Trigger>
  * ```
  */
@@ -415,7 +415,7 @@ SelectTrigger.displayName = "SelectTrigger";
  *
  * @example
  * ```tsx
- * <Select.Value placeholder="Select a framework…" />
+ * <Select.Value placeholder="Select a framework..." />
  * ```
  */
 export function SelectValue({
@@ -639,7 +639,7 @@ SelectSeparator.displayName = "SelectSeparator";
  * @example
  * ```tsx
  * <Select.Root native required aria-label="Pick a fruit">
- *   <Select.Placeholder>Choose a fruit…</Select.Placeholder>
+ *   <Select.Placeholder>Choose a fruit...</Select.Placeholder>
  *   <Select.Item value="apple">Apple</Select.Item>
  *   <Select.Item value="banana">Banana</Select.Item>
  * </Select.Root>
@@ -698,7 +698,7 @@ export type TSelectCompound = typeof SelectRoot & {
  *
  * <Select.Root value={framework} onValueChange={setFramework}>
  *   <Select.Trigger>
- *     <Select.Value placeholder="Pick a framework…" />
+ *     <Select.Value placeholder="Pick a framework..." />
  *   </Select.Trigger>
  *   <Select.Content>
  *     <Select.Item value="react">
@@ -716,7 +716,7 @@ export type TSelectCompound = typeof SelectRoot & {
  * @example Native
  * ```tsx
  * <Select.Root native defaultValue="apple" aria-label="Pick a fruit">
- *   <Select.Placeholder>Choose…</Select.Placeholder>
+ *   <Select.Placeholder>Choose...</Select.Placeholder>
  *   <Select.Group label="Fruits">
  *     <Select.Item value="apple">Apple</Select.Item>
  *     <Select.Item value="banana">Banana</Select.Item>

package/src/Select/__tests__/Select.placeholder.test.tsx

@@ -7,7 +7,7 @@ describe("Select placeholder", () => {
     // Arrange & Act
     const { container } = render(
       <Select.Root native>
-        <Select.Placeholder>Choose a fruit…</Select.Placeholder>
+        <Select.Placeholder>Choose a fruit...</Select.Placeholder>
         <Select.Item value="apple">Apple</Select.Item>
       </Select.Root>,
     );
@@ -22,9 +22,9 @@ describe("Select placeholder", () => {
     expect(placeholder).not.toBeNull();
     expect(placeholder).toBeDisabled();
     expect(placeholder).toHaveAttribute("value", "");
-    expect(placeholder).toHaveTextContent("Choose a fruit…");
+    expect(placeholder).toHaveTextContent("Choose a fruit...");
 
-    // …and is the initial selection because it's the first option with an
+    // ...and is the initial selection because it's the first option with an
     // empty value.
     const select = screen.getByRole("combobox") as HTMLSelectElement;
     expect(select.value).toBe("");

package/src/Select/__tests__/Select.typeahead.test.tsx

@@ -41,11 +41,11 @@ describe("Select typeahead", () => {
     await user.keyboard("a");
     expect(option("Apricot")).toHaveFocus();
 
-    // Repeated same char keeps cycling through the "a" matches…
+    // Repeated same char keeps cycling through the "a" matches...
     await user.keyboard("a");
     expect(option("Avocado")).toHaveFocus();
 
-    // …and wraps back to the first "a" match (past the non-matching Banana).
+    // ...and wraps back to the first "a" match (past the non-matching Banana).
     await user.keyboard("a");
     expect(option("Apple")).toHaveFocus();
   });
@@ -56,7 +56,7 @@ describe("Select typeahead", () => {
     await user.click(screen.getByRole("button")); // Apple focused
 
     // "av" is not a repeat; it searches from the current index without the
-    // single-char skip, so it stays put on the only "av…" match.
+    // single-char skip, so it stays put on the only "av..." match.
     await user.keyboard("av");
     expect(option("Avocado")).toHaveFocus();
   });

package/src/Select/__tests__/Select.value-mirror.test.tsx

@@ -131,7 +131,7 @@ describe("Select.Value mirroring", () => {
     const trigger = screen.getByRole("button");
     expect(trigger).toHaveTextContent("React");
     expect(within(trigger).queryByTestId("mark")).not.toBeInTheDocument();
-    // …while the row's own copy stays mounted.
+    // ...while the row's own copy stays mounted.
     expect(screen.getByTestId("mark")).toBeInTheDocument();
   });
 

package/src/Select/types.ts

@@ -172,7 +172,7 @@ export type SelectPlaceholderProps = Omit<
   "value" | "disabled" | "hidden"
 > & {
   /** The placeholder hint text shown in the closed select before the user
-   * makes a selection (e.g. `"Choose a fruit…"`). */
+   * makes a selection (e.g. `"Choose a fruit..."`). */
   children?: ReactNode;
   /** Forwarded to the underlying `HTMLOptionElement`. */
   ref?: Ref<HTMLOptionElement>;
@@ -204,7 +204,7 @@ export type SelectTriggerProps = ComponentProps<"button"> & {
  * `children`, which the component owns.
  */
 export type SelectValueProps = Omit<ComponentProps<"span">, "children"> & {
-  /** Shown when no value is selected (e.g. `"Select a framework…"`). */
+  /** Shown when no value is selected (e.g. `"Select a framework..."`). */
   placeholder?: ReactNode;
   /** Forwarded to the underlying `HTMLSpanElement`. */
   ref?: Ref<HTMLSpanElement>;

package/src/SkipNav/README.md

@@ -10,9 +10,9 @@ import { SkipNav } from "@primitiv-ui/react";
 
 <>
   <SkipNav.Link>Skip to main content</SkipNav.Link>
-  <header>…site navigation…</header>
+  <header>...site navigation...</header>
   <SkipNav.Content>
-    <main>…</main>
+    <main>...</main>
   </SkipNav.Content>
 </>;
 ```
@@ -60,7 +60,7 @@ custom id, set it on both sides:
 ```tsx
 <SkipNav.Link contentId="main">Skip to main content</SkipNav.Link>
 <SkipNav.Content id="main">
-  <main>…</main>
+  <main>...</main>
 </SkipNav.Content>
 ```
 

package/src/SkipNav/SkipNav.tsx

@@ -80,14 +80,14 @@ SkipNavLink.displayName = "SkipNavLink";
  * @example Default — wraps the main page content
  * ```tsx
  * <SkipNav.Content>
- *   <main>…</main>
+ *   <main>...</main>
  * </SkipNav.Content>
  * ```
  *
  * @example Custom id (must match `contentId` on `SkipNav.Link`)
  * ```tsx
  * <SkipNav.Content id="main">
- *   <main>…</main>
+ *   <main>...</main>
  * </SkipNav.Content>
  * ```
  */
@@ -132,9 +132,9 @@ SkipNavContent.displayName = "SkipNavContent";
  *   return (
  *     <>
  *       <SkipNav.Link>Skip to main content</SkipNav.Link>
- *       <header>…site navigation…</header>
+ *       <header>...site navigation...</header>
  *       <SkipNav.Content>
- *         <main>…</main>
+ *         <main>...</main>
  *       </SkipNav.Content>
  *     </>
  *   );
@@ -145,7 +145,7 @@ SkipNavContent.displayName = "SkipNavContent";
  * ```tsx
  * <SkipNav.Link contentId="main">Skip to main content</SkipNav.Link>
  * <SkipNav.Content id="main">
- *   <main>…</main>
+ *   <main>...</main>
  * </SkipNav.Content>
  * ```
  *