@primitiv-ui/react 0.1.29 → 0.1.30

package/README.md

@@ -28,6 +28,7 @@ import { Tabs } from "@primitiv-ui/react";
 | [Checkbox](src/Checkbox/README.md)       | A real, visually-hidden native `<input type="checkbox">` in a `<label>` box, so it participates in forms; the platform tri-state (`indeterminate` → `aria-checked="mixed"`, `:indeterminate`), controlled/uncontrolled state, `Indicator` mark, and `asChild` on the indicator                                                                                   |
 | [CheckboxCard](src/CheckboxCard/README.md) | WAI-ARIA Checkbox pattern in a card/tile layout — the entire card surface is the interactive element, with tri-state support, controlled/uncontrolled state, `Indicator` slot, `disabled` with `data-disabled` styling hook, and `asChild` composition                                |
 | [Collapsible](src/Collapsible/README.md) | Single-panel show/hide — boolean controlled/uncontrolled state, `disabled`, `asChild` composition with explicit Enter/Space handling, `forceMount` for CSS-Grid-driven animation, and `TriggerIcon` slot                                                                                |
+| [Combobox](src/Combobox/README.md)       | WAI-ARIA APG Combobox pattern — an editable text field with a filtered popup listbox, using the same **virtual-focus** cursor as `Listbox` (`aria-activedescendant` on the input, `data-highlighted` on the item) so DOM focus never leaves the field; filtering is deliberately **consumer-owned** (no `filter` prop — `onQueryChange` reports keystrokes and you render the matches), the input holds the live query while open and resets from the committed value on Enter, Escape **or a click outside** — the panel is a `popover="auto"`, so the browser supplies both the top layer and light dismiss rather than a hand-rolled outside-click listener, and all three gestures land in the same state; **emptying the field clears the value too** (`onValueChange("")`), so a reset can never resurrect a label the user just deleted; arrow keys seed the cursor on the first/last item, an `Empty` part keeps the panel's height while nothing matches, controlled/uncontrolled `open` and `value`, and `asChild` on every part |
 | [ContextMenu](src/ContextMenu/README.md) | WAI-ARIA Menu pattern for right-click / long-press / context-key menus — native HTML `popover` compound component positioned at the cursor, with nested submenus, checkbox and radio items, `ItemIndicator` icon slot, groups and labels, keyboard navigation, typeahead, disabled-item skipping, `onSelect` escape hatch, and `asChild` composition |
 | [DirectionProvider](src/DirectionProvider/README.md) | Reading-direction context — broadcasts `ltr`/`rtl` to descendants and exposes the `useDirection` hook so direction-aware components inherit `dir` instead of each being passed it explicitly; renders no DOM |
 | [Divider](src/Divider/README.md)         | WAI-ARIA separator role — horizontal or vertical content separator, with semantic and decorative use                                                                                                                                                                                    |
@@ -38,6 +39,7 @@ import { Tabs } from "@primitiv-ui/react";
 | [Fieldset](src/Fieldset/README.md)       | Headless form-control grouping — a stateless `<fieldset>` / `<legend>` compound with an implicit `group` role, a legend-supplied accessible name, and `disabled` (cascading to every nested control) with a `data-disabled` styling hook |
 | [Input](src/Input/README.md)             | Headless single-line text input — native `<input>` with `type="text"` default, full attribute pass-through (works directly with `react-hook-form`'s `register` spread), ref forwarding, native constraint validation, `disabled` with `data-disabled` styling hook, and `asChild` composition |
 | [InputGroup](src/InputGroup/README.md)   | Stateless frame for `Input` (or any framed control) with named leading and trailing adornment slots — decorative icons, currency symbols, clear buttons, password-reveal toggles; `data-input-group` / `data-input-group-adornment` styling hooks, CSS-driven disabled / invalid / focus-within state via `:has()`, and `asChild` composition on every part |
+| [Listbox](src/Listbox/README.md)         | WAI-ARIA APG Listbox pattern — a persistently-visible option list using a **virtual-focus** cursor (`aria-activedescendant` on the root, `data-highlighted` on the option) rather than a roving tabstop, so an external input can hold DOM focus and drive the list; single/multiple selection with APG's Shift+Arrow / Ctrl+Shift+Home-End / Ctrl+A range shortcuts, opt-in `selectionFollowsFocus`, prefix typeahead, groups named by prop or visible `GroupLabel`, disabled options, DOM-order navigation that survives in-place reordering, orientation/RTL, and `asChild` composition on every part |
 | [MillerColumns](src/MillerColumns/README.md) | Miller columns / cascading-lists pattern — a horizontal strip of `role="group"` columns of `role="treeitem"` items, authored by recursive composition with portal-projected child columns, controlled/uncontrolled active path, single-tabstop roving keyboard navigation, disabled items, and `asChild` composition |
 | [Modal](src/Modal/README.md)             | WAI-ARIA Modal Dialog pattern — native `<dialog>`-based compound component with Portal, bounding-rect click-outside, controlled/uncontrolled state, escape hatches, imperative API, `asChild`, and `forceMount` animation hooks                                                         |
 | [NavigationMenu](src/NavigationMenu/README.md) | ARIA APG Disclosure Navigation Menu pattern — the desktop dropdown site nav: `<nav>` landmark + `<ul>` of entries, one panel open at a time (`""` means closed), hover-intent open with instant switching and a nav-wide close grace, axis/RTL-aware arrow travel that keeps every entry in the tab order (not a roving tabindex), cross-axis arrow to enter a panel, Escape-to-close with focus return, an optional `Viewport` panels portal into so the open one morphs into the next, an optional `Indicator` publishing the open trigger's measured geometry as custom properties, and a `Link` carrying `aria-current` that the composed mobile nav (`Drawer` + `Collapsible`) reuses |
@@ -51,9 +53,10 @@ import { Tabs } from "@primitiv-ui/react";
 | [Select](src/Select/README.md)           | Headless wrapper over native `<select>` / `<option>` / `<optgroup>` — controlled/uncontrolled state via `onValueChange`, `Select.Placeholder` with auto-`defaultValue` inference, `Select.Group` for optgroup labelling, `data-disabled` styling hook, `asChild` composition, and Field-aware (opts into `FieldContext` for auto-wired `id` / `aria-describedby` / `aria-invalid` / `disabled` / `required`) |
 | [SkipNav](src/SkipNav/README.md)         | WCAG 2.4.1 Bypass Blocks technique — a stateless "skip to main content" link and its `tabIndex=-1` focus target, connected by a shared content id, working with no JavaScript at runtime |
 | [Slider](src/Slider/README.md)           | WAI-ARIA Slider & Multi-Thumb Slider pattern — an array-valued range input with any number of independently focusable thumbs, keyboard and pointer dragging, `min`/`max`/`step`, `minStepsBetweenThumbs`, horizontal/vertical orientation, RTL and `inverted` direction, `onValueCommit`, hidden inputs for form submission, `disabled` with `data-disabled` styling hook, and `asChild` composition                                              |
+| [SplitButton](src/SplitButton/README.md) | One primary action plus a menu of related alternatives, bound into a single `role="group"` widget — a composition over `Dropdown` that adds the coordination Dropdown alone can't provide: the group boundary, the menu trigger's accessible name derived from the primary action (so a chevron-only control is never unlabelled), `disabled` propagating from the group to both halves, and `ArrowDown` on the action opening the menu; both halves stay independently tabbable, and `asChild` composition is available on the group and the action |
 | [Status](src/Status/README.md)           | WAI-ARIA `status` role — a polite live region for low-priority, non-urgent status messages, announced once the user is idle, with `asChild` composition |
 | [Switch](src/Switch/README.md)           | A real, visually-hidden native `<input type="checkbox" role="switch">` in a `<label>` track, so it participates in forms; binary on/off state, always-mounted `Thumb` for CSS-driven sliding (off the input's native `:checked`), controlled/uncontrolled state, `data-disabled` styling hook, and `asChild` on the thumb                                              |
-| [Table](src/Table/README.md)             | WAI-ARIA Table pattern — compound component wrapping standard HTML table elements with accessible headers, captions, and a responsive scroll wrapper                                                                                                                                    |
+| [Table](src/Table/README.md)             | WAI-ARIA Table pattern — compound component wrapping standard HTML table elements with accessible headers, captions, a responsive scroll wrapper, and an opt-in expandable-row disclosure                                                                                                |
 | [Tabs](src/Tabs/README.md)               | WAI-ARIA Tabs pattern — compound component with keyboard navigation, controlled/uncontrolled state, and `asChild` composition                                                                                                                                                           |
 | [Textarea](src/Textarea/README.md)       | Headless multi-line text input — native `<textarea>` with full attribute pass-through, ref forwarding, `disabled` with `data-disabled` styling hook, `asChild` composition for wrapping autosizing implementations, and Field-aware (opts into `FieldContext` for auto-wired `id` / `aria-describedby` / `aria-invalid` / `disabled` / `required`) |
 | [Toggle](src/Toggle/README.md)           | WAI-ARIA Button pattern with `aria-pressed` — single stateful toggle button with controlled/uncontrolled state, `data-state` styling hook, and `asChild` composition                                                                                                                   |
@@ -62,10 +65,20 @@ import { Tabs } from "@primitiv-ui/react";
 | [Tree](src/Tree/README.md)               | WAI-ARIA Tree pattern — hierarchical tree view authored by recursive composition with `Branch`/`BranchControl`/`BranchContent`, controlled/uncontrolled expansion, single or multiple selection with Ctrl/Cmd and Shift+click range, `forceMount` for branch animation, single-tabstop roving keyboard navigation, disabled items, and `asChild` composition |
 | [VisuallyHidden](src/VisuallyHidden/README.md) | Screen-reader-only primitive — visually hides its children with the canonical clip styles while keeping them in the accessibility tree, with consumer `style` merging and `asChild` composition |
 
+## Hooks
+
+| Hook                                                | Description                                                                                                    |
+| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| [useMediaQuery](src/useMediaQuery/README.md)         | Tracks whether a CSS media query currently matches, re-rendering on change — generic, not tied to Primitiv's own breakpoint scale, with a safe `false` default during server rendering |
+| [usePagination](src/usePagination/README.md)         | Page state and arithmetic for any paged data source — clamped current page, prev/next/first/last, half-open `startIndex`/`endIndex` slice bounds for client- or server-side data, and the collapsed page range to render |
+
 ## Internal utilities
 
 **`Slot`** is the `asChild` composition utility used internally by components
-such as `Tabs.Trigger`. It is not a public component API.
+such as `Tabs.Trigger`. It is not a public component API. The `hooks/`
+directory (`useCollection`, `useControllableState`, `useRovingTabindex`) is
+similarly internal — shared implementation details of compound components,
+not part of the public API.
 
 ## Testing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "Headless, accessible React components built on the WAI-ARIA authoring patterns. Zero styles ship with this package — bring your own (CSS, Tailwind, CSS-in-JS, design tokens).",
   "type": "module",
   "main": "./src/index.ts",

package/src/AccessibleIcon/AccessibleIcon.tsx

@@ -28,7 +28,7 @@ type DecorativeIconProps = { "aria-hidden": string; focusable: string };
  * if your icon library returns a fragment.
  *
  * **Renders no host element.** `AccessibleIcon` returns a React fragment
- * (`<>…</>`), so it adds no DOM node of its own. The icon element and the
+ * (`<>...</>`), so it adds no DOM node of its own. The icon element and the
  * {@link VisuallyHidden} span are the only nodes emitted.
  *
  * @example Icon-only button

package/src/Accordion/Accordion.tsx

@@ -57,8 +57,8 @@ import { useAccordionTrigger } from "./hooks/useAccordionTrigger";
  * @example Uncontrolled — single open item
  * ```tsx
  * <Accordion.Root defaultValue="item-1">
- *   <Accordion.Item value="item-1">…</Accordion.Item>
- *   <Accordion.Item value="item-2">…</Accordion.Item>
+ *   <Accordion.Item value="item-1">...</Accordion.Item>
+ *   <Accordion.Item value="item-2">...</Accordion.Item>
  * </Accordion.Root>
  * ```
  *
@@ -67,8 +67,8 @@ import { useAccordionTrigger } from "./hooks/useAccordionTrigger";
  * const [expanded, setExpanded] = useState<string[]>([]);
  *
  * <Accordion.Root multiple value={expanded} onValueChange={setExpanded}>
- *   <Accordion.Item value="shipping">…</Accordion.Item>
- *   <Accordion.Item value="returns">…</Accordion.Item>
+ *   <Accordion.Item value="shipping">...</Accordion.Item>
+ *   <Accordion.Item value="returns">...</Accordion.Item>
  * </Accordion.Root>
  * ```
  */
@@ -277,7 +277,7 @@ AccordionTrigger.displayName = "AccordionTrigger";
 
 /**
  * The panel that is revealed when the associated `Accordion.Trigger` is
- * activated. Renders a `<div role="region" aria-labelledby="…">` whose
+ * activated. Renders a `<div role="region" aria-labelledby="...">` whose
  * visibility is controlled by the `hidden` attribute.
  *
  * **`forceMount` prop.** By default the panel is removed from visibility with
@@ -296,7 +296,7 @@ AccordionTrigger.displayName = "AccordionTrigger";
  * default, creating an ARIA landmark. Accordions with many items can produce
  * landmark overload in screen readers. Opt out by passing `role={undefined}`:
  * ```tsx
- * <Accordion.Content role={undefined}>…</Accordion.Content>
+ * <Accordion.Content role={undefined}>...</Accordion.Content>
  * ```
  *
  * **Styling hooks.**
@@ -378,7 +378,7 @@ AccordionContent.displayName = "AccordionContent";
  * <Accordion.Trigger>
  *   Shipping policy
  *   <Accordion.TriggerIcon>
- *     <svg …><path d="…" /></svg>
+ *     <svg ...><path d="..." /></svg>
  *   </Accordion.TriggerIcon>
  * </Accordion.Trigger>
  * ```

package/src/Accordion/README.md

@@ -61,7 +61,7 @@ simultaneously:
 
 ```tsx
 <Accordion.Root multiple defaultValue="shipping">
-  …
+  ...
 </Accordion.Root>
 ```
 
@@ -168,7 +168,7 @@ to invert the arrow-key direction so `ArrowLeft` moves forward and
 
 ```tsx
 <Accordion.Root orientation="horizontal" dir="rtl">
-  …
+  ...
 </Accordion.Root>
 ```
 

package/src/Avatar/__tests__/Avatar.fallback.test.tsx

@@ -73,14 +73,14 @@ describe("Avatar fallback", () => {
     });
 
     it("resets the timer when delayMs changes", () => {
-      // Arrange — start a 300ms delay…
+      // Arrange — start a 300ms delay...
       const { rerender } = render(
         <Avatar.Root>
           <Avatar.Fallback delayMs={300}>AL</Avatar.Fallback>
         </Avatar.Root>,
       );
 
-      // Act — …then extend it to 1000ms before the first delay elapses. The
+      // Act — ...then extend it to 1000ms before the first delay elapses. The
       // effect must clear the old timer and start a new one; a stale timer (no
       // cleanup) or a frozen dependency ([] deps) would fire at 300ms.
       rerender(
@@ -95,7 +95,7 @@ describe("Avatar fallback", () => {
       // Assert — still withheld at 300ms because the delay was reset to 1000ms
       expect(screen.queryByText("AL")).not.toBeInTheDocument();
 
-      // …and shown once the new delay elapses
+      // ...and shown once the new delay elapses
       act(() => {
         vi.advanceTimersByTime(700);
       });

package/src/Breadcrumb/Breadcrumb.tsx

@@ -32,14 +32,14 @@ import {
  * @example
  * ```tsx
  * <Breadcrumb.Root>
- *   <Breadcrumb.List>…</Breadcrumb.List>
+ *   <Breadcrumb.List>...</Breadcrumb.List>
  * </Breadcrumb.Root>
  * ```
  *
  * @example Custom accessible name
  * ```tsx
  * <Breadcrumb.Root aria-label="You are here">
- *   <Breadcrumb.List>…</Breadcrumb.List>
+ *   <Breadcrumb.List>...</Breadcrumb.List>
  * </Breadcrumb.Root>
  * ```
  */
@@ -77,9 +77,9 @@ BreadcrumbRoot.displayName = "BreadcrumbRoot";
  * @example
  * ```tsx
  * <Breadcrumb.List>
- *   <Breadcrumb.Item>…</Breadcrumb.Item>
+ *   <Breadcrumb.Item>...</Breadcrumb.Item>
  *   <Breadcrumb.Separator />
- *   <Breadcrumb.Item>…</Breadcrumb.Item>
+ *   <Breadcrumb.Item>...</Breadcrumb.Item>
  * </Breadcrumb.List>
  * ```
  */
@@ -132,7 +132,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
  * **`asChild` composition.** Pass `asChild` to render a consumer-supplied
  * element — typically a routing library's `<Link>` — instead of the native
  * `<a>`, with all of `Breadcrumb.Link`'s props (`href`, event handlers,
- * `className`, `ref`, …) merged onto it via the {@link Slot} pattern. The
+ * `className`, `ref`, ...) merged onto it via the {@link Slot} pattern. The
  * child **must** be a single React element that accepts a `ref`; the
  * native `<a>` is dropped entirely rather than wrapping the child.
  *
@@ -254,7 +254,7 @@ BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
  * label) — `aria-hidden="true"` excludes this glyph from accessible-name
  * computation entirely, exactly like {@link BreadcrumbSeparator}.
  *
- * Defaults to a `"…"` glyph; pass `children` to use a custom one (an icon,
+ * Defaults to a `"..."` glyph; pass `children` to use a custom one (an icon,
  * `"···"`, etc.) — whatever is passed replaces the default entirely rather
  * than being appended to it.
  *
@@ -285,7 +285,7 @@ BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
  * ```
  */
 export function BreadcrumbEllipsis({
-  children = "…",
+  children = "...",
   asChild = false,
   ...rest
 }: BreadcrumbEllipsisProps): ReactElement {

package/src/Breadcrumb/README.md

@@ -86,7 +86,7 @@ It defaults to a `"/"` glyph. Pass `children` to use a custom separator:
 which crumbs collapse is a styled-surface concern (see the registry `card`
 composite for the same "no data model in the primitive" philosophy). What
 the headless layer provides is `Breadcrumb.Ellipsis`: a purely decorative
-`"…"` glyph for the trigger's visual content.
+`"..."` glyph for the trigger's visual content.
 
 Compose it with [`Dropdown`](../Dropdown/README.md) to build the actual
 trigger — a real interactive element (a `<button>`, or anything
@@ -118,7 +118,7 @@ import { Breadcrumb, Dropdown, VisuallyHidden } from "@primitiv-ui/react";
 </Breadcrumb.Item>;
 ```
 
-`Breadcrumb.Ellipsis` defaults to a `"…"` glyph; pass `children` to use a
+`Breadcrumb.Ellipsis` defaults to a `"..."` glyph; pass `children` to use a
 custom one:
 
 ```tsx

package/src/Breadcrumb/__tests__/Breadcrumb.ellipsis.test.tsx

@@ -17,7 +17,7 @@ describe("Breadcrumb ellipsis", () => {
     expect(ellipsis.tagName).toBe("SPAN");
     expect(ellipsis).toHaveAttribute("role", "presentation");
     expect(ellipsis).toHaveAttribute("aria-hidden", "true");
-    expect(ellipsis).toHaveTextContent("…");
+    expect(ellipsis).toHaveTextContent("...");
   });
 
   it("lets the consumer override the Ellipsis glyph", () => {

package/src/Breadcrumb/types.ts

@@ -71,7 +71,7 @@ export type BreadcrumbSeparatorProps = ComponentProps<"li">;
  * Props for {@link BreadcrumbEllipsis | `Breadcrumb.Ellipsis`} — all native
  * `<span>` attributes plus the `asChild` escape hatch. `role="presentation"`
  * and `aria-hidden="true"` are fixed by the component; `children` defaults
- * to a `"…"` glyph when omitted (see {@link BreadcrumbEllipsis}'s
+ * to a `"..."` glyph when omitted (see {@link BreadcrumbEllipsis}'s
  * custom-glyph example).
  *
  * @extends HTMLSpanElement

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

@@ -60,7 +60,7 @@ describe("Button styling contract", () => {
     );
 
     render(<Button disabled>Save</Button>);
-    // Present with the documented value when the documented condition holds…
+    // Present with the documented value when the documented condition holds...
     expect(screen.getByRole("button")).toHaveAttribute(entry.name, entry.value);
   });
 

package/src/Carousel/Carousel.tsx

@@ -68,7 +68,7 @@ import type {
  *
  * @example Labelled inline, uncontrolled
  * ```tsx
- * <Carousel.Root ariaLabel="Featured products" defaultPage={0}>…</Carousel.Root>
+ * <Carousel.Root ariaLabel="Featured products" defaultPage={0}>...</Carousel.Root>
  * ```
  *
  * @example Controlled
@@ -80,14 +80,14 @@ import type {
  *   page={page}
  *   onPageChange={setPage}
  * >
- *   …
+ *   ...
  * </Carousel.Root>
  * ```
  *
  * @example Labelled by an existing heading
  * ```tsx
  * <h2 id="promos">Promotions</h2>
- * <Carousel.Root ariaLabelledBy="promos">…</Carousel.Root>
+ * <Carousel.Root ariaLabelledBy="promos">...</Carousel.Root>
  * ```
  */
 export const CarouselRoot: ForwardRefExoticComponent<
@@ -260,7 +260,7 @@ CarouselRoot.displayName = "CarouselRoot";
  * ```tsx
  * <Carousel.Root ariaLabel="Featured products">
  *   <Carousel.Viewport>
- *     <Carousel.Slide>…</Carousel.Slide>
+ *     <Carousel.Slide>...</Carousel.Slide>
  *   </Carousel.Viewport>
  * </Carousel.Root>
  * ```
@@ -399,12 +399,12 @@ CarouselViewport.displayName = "CarouselViewport";
  *
  * @example Override the auto-label
  * ```tsx
- * <Carousel.Slide ariaLabel="Hand-picked for you">…</Carousel.Slide>
+ * <Carousel.Slide ariaLabel="Hand-picked for you">...</Carousel.Slide>
  * ```
  *
  * @example Per-slide snap alignment (overrides the root default)
  * ```tsx
- * <Carousel.Slide snapAlign="end">…</Carousel.Slide>
+ * <Carousel.Slide snapAlign="end">...</Carousel.Slide>
  * ```
  */
 export function CarouselSlide({

package/src/Carousel/README.md

@@ -149,7 +149,7 @@ import { Carousel } from "@primitiv-ui/react";
 
 ```tsx
 <h2 id="promos">Promotions</h2>
-<Carousel.Root ariaLabelledBy="promos">…</Carousel.Root>
+<Carousel.Root ariaLabelledBy="promos">...</Carousel.Root>
 ```
 
 The discriminated union on the props type rejects shapes that supply both
@@ -170,7 +170,7 @@ Slides go inside `Carousel.Viewport`:
 ```
 
 Each `Carousel.Slide` self-registers with the Root, so every slide
-exposes its own `data-index="0"`, `data-index="1"`, … and a live
+exposes its own `data-index="0"`, `data-index="1"`, ... and a live
 `data-total` reflecting the current slide count. Add or remove slides at
 runtime and the indices and totals update automatically.
 
@@ -179,7 +179,7 @@ the WAI-ARIA Carousel APG example uses. To override the auto-label with
 a more meaningful description, pass `ariaLabel`:
 
 ```tsx
-<Carousel.Slide ariaLabel="Hand-picked for you">…</Carousel.Slide>
+<Carousel.Slide ariaLabel="Hand-picked for you">...</Carousel.Slide>
 ```
 
 The override remains stable as siblings mount and unmount around it.
@@ -220,7 +220,7 @@ strip), persisting the active page to a URL, or reacting to deep links.
 const [page, setPage] = useState(0);
 
 <Carousel.Root ariaLabel="Featured products" page={page} onPageChange={setPage}>
-  …
+  ...
 </Carousel.Root>;
 ```
 
@@ -262,7 +262,7 @@ const [open, setOpen] = useState(false);
     slidesPerPage={3}
   >
     <Carousel.Viewport>
-      <Carousel.Slide>…</Carousel.Slide>…
+      <Carousel.Slide>...</Carousel.Slide>...
     </Carousel.Viewport>
   </Carousel.Root>
 
@@ -279,7 +279,7 @@ const [open, setOpen] = useState(false);
           onPlayingChange={() => {}}
         >
           <Carousel.Viewport>
-            <Carousel.Slide>…</Carousel.Slide>…
+            <Carousel.Slide>...</Carousel.Slide>...
           </Carousel.Viewport>
           <Carousel.Indicators label="Choose slide" />
         </Carousel.Root>
@@ -303,7 +303,7 @@ exposes an imperative handle via `ref`:
 const carouselRef = useRef<CarouselImperativeApi>(null);
 
 <Carousel.Root ref={carouselRef} ariaLabel="Featured products">
-  …
+  ...
 </Carousel.Root>;
 
 carouselRef.current?.next();
@@ -410,7 +410,7 @@ browser snap-correcting after the scroll:
 
 ```tsx
 <Carousel.Root ariaLabel="Gallery" snapAlign="start">
-  …
+  ...
 </Carousel.Root>
 ```
 
@@ -455,7 +455,7 @@ ends, rather than always forcing a rest on one:
 
 ```tsx
 <Carousel.Root ariaLabel="Gallery" snapType="proximity">
-  …
+  ...
 </Carousel.Root>
 ```
 
@@ -472,7 +472,7 @@ axis** instead:
 
 ```tsx
 <Carousel.Root ariaLabel="Featured products" orientation="vertical">
-  …
+  ...
 </Carousel.Root>
 ```
 
@@ -621,13 +621,13 @@ pin DOM `id`s on the rendered sub-components via the `ids` bag on
     indicatorGroup: "promo-indicators",
   }}
 >
-  …
+  ...
 </Carousel.Root>
 ```
 
 Any keys you omit leave the corresponding element unidentified. A
 direct `id` prop on a sub-component (e.g.
-`<Carousel.NextTrigger id="…">`) wins over `ids.*` because it spreads
+`<Carousel.NextTrigger id="...">`) wins over `ids.*` because it spreads
 last.
 
 ### Internationalisation
@@ -649,7 +649,7 @@ accessible names (`"Start automatic slide show"` and
     stopSlideshow: "Arrêter le diaporama",
   }}
 >
-  …
+  ...
 </Carousel.Root>
 ```
 
@@ -700,7 +700,7 @@ With `slidesPerPage={3}` and 5 slides:
   active).
 
 The slide-level `aria-label="N of M"` continues to count individual
-slides (so a 5-slide carousel announces "1 of 5", "2 of 5", … even
+slides (so a 5-slide carousel announces "1 of 5", "2 of 5", ... even
 when grouped into 3-per-page).
 
 Pass a numeric `slidesPerMove` to advance the visible window by an
@@ -712,7 +712,7 @@ arbitrary slide count per click instead of a full page:
   slidesPerPage={3}
   slidesPerMove={1}
 >
-  …
+  ...
 </Carousel.Root>
 ```
 
@@ -969,7 +969,7 @@ const carouselRef = useRef<CarouselImperativeApi>(null);
     // type: "dragging.start" | "dragging" | "dragging.end"
   }}
 >
-  …
+  ...
 </Carousel.Root>;
 
 carouselRef.current?.isDragging(); // live snapshot, read on demand
@@ -997,7 +997,7 @@ keyboard, the wheel, or a mouse drag — fires `Carousel.Root`'s
     // source: "keyboard" | "wheel" | "drag"
   }}
 >
-  …
+  ...
 </Carousel.Root>;
 ```
 
@@ -1173,7 +1173,7 @@ timer while `playing` is `true`:
 ```tsx
 // Default 4000ms cadence
 <Carousel.Root ariaLabel="Featured products" autoplay defaultPlaying>
-  …
+  ...
 </Carousel.Root>
 
 // Custom delay
@@ -1182,7 +1182,7 @@ timer while `playing` is `true`:
   autoplay={{ delay: 6000 }}
   defaultPlaying
 >
-  …
+  ...
 </Carousel.Root>
 ```
 
@@ -1241,7 +1241,7 @@ play/pause toggles, but a consumer reacting to the timer itself in JS
     // type: "autoplay.start" | "autoplay" | "autoplay.stop"
   }}
 >
-  …
+  ...
 </Carousel.Root>
 ```
 
@@ -1264,14 +1264,14 @@ anatomy part):
 
 ```tsx
 <Carousel.Root ariaLabel="Featured products">
-  <Carousel.Viewport>…</Carousel.Viewport>
+  <Carousel.Viewport>...</Carousel.Viewport>
   <Carousel.ProgressText />
 </Carousel.Root>
 ```
 
 Renders `"1 of 3"` by default (1-indexed, matching `slideLabel`); pass a
 `progressText` formatter through `translations` (a
-`({ page, totalPages }) => …` function) on the Root to customise the
+`({ page, totalPages }) => ...` function) on the Root to customise the
 format, or `children` on `Carousel.ProgressText`
 itself to render something else entirely (an icon alongside the
 count, say) instead of the computed text. `Carousel.ProgressText`

package/src/Carousel/__tests__/Carousel.infinite.test.tsx

@@ -505,11 +505,11 @@ describe("Carousel infinite — transform engine", () => {
     await user.click(getByRole("button", { name: "Next" }));
 
     // 3 → 0 is +1 forward: offset 300 → 400 (onto the clone of slide 0), a single
-    // step onward, not a rewind. The glide animates to the clone…
+    // step onward, not a rewind. The glide animates to the clone...
     expect(track!.style.transform).toBe("translate(-400px, 0px)");
     expect(track!.style.transition).toContain("transform");
 
-    // …and once it settles the track re-bases by one period to the REAL slide 0
+    // ...and once it settles the track re-bases by one period to the REAL slide 0
     // at the identical pixels (offset 0), instantly and invisibly.
     fireEnd(track!);
     expect(track!.style.transform).toBe("translate(0px, 0px)");
@@ -768,7 +768,7 @@ describe("Carousel infinite — transform engine", () => {
 
     await user.click(getByRole("button", { name: "Next" }));
     // Offset 100 is already within [0, 400): the settle is a no-op, the transform
-    // stays put (and the transition flips to none on the instant no-op repaint…
+    // stays put (and the transition flips to none on the instant no-op repaint...
     // which doesn't run — the guard returns early, so the transition is untouched).
     expect(track!.style.transform).toBe("translate(-100px, 0px)");
     fireEnd(track!);
@@ -848,9 +848,9 @@ describe("Carousel infinite — transform engine", () => {
     await user.click(getByRole("button", { name: "Next" })); // page 2 (offset 400)
     await user.click(getByRole("button", { name: "Previous" })); // back to page 1
 
-    // Page 2 → 1: the track glides back one page (offset 400 → 200)…
+    // Page 2 → 1: the track glides back one page (offset 400 → 200)...
     expect(track!.style.transform).toBe("translate(-200px, 0px)");
-    // …and no real slide carries a transform of its own.
+    // ...and no real slide carries a transform of its own.
     for (const slide of track!.querySelectorAll<HTMLElement>(
       "[data-carousel-slide][data-index]",
     )) {

package/src/Carousel/__tests__/Carousel.intersection-observer.test.tsx

@@ -209,7 +209,7 @@ describe("Carousel IntersectionObserver fallback + isInView", () => {
         ]);
       });
 
-      // The page stays put — scrollsnapchange owns it…
+      // The page stays put — scrollsnapchange owns it...
       expect(screen.getByTestId("slide-0")).toHaveAttribute(
         "data-state",
         "active",
@@ -218,7 +218,7 @@ describe("Carousel IntersectionObserver fallback + isInView", () => {
         "data-state",
         "inactive",
       );
-      // …but isInView still reflects what the observer reported.
+      // ...but isInView still reflects what the observer reported.
       expect(ref.current!.isInView(2)).toBe(true);
     } finally {
       delete (window as unknown as { onscrollsnapchange?: unknown })

package/src/Carousel/__tests__/Carousel.slides-per-move.test.tsx

@@ -272,7 +272,7 @@ describe("Carousel numeric slidesPerMove", () => {
 
     await user.click(screen.getByRole("button", { name: "Next" }));
 
-    // Clamped move=2 → window [2,3], not the [3,…] a move of 3 would give.
+    // Clamped move=2 → window [2,3], not the [3,...] a move of 3 would give.
     expect(screen.getByTestId("slide-2")).toHaveAttribute(
       "data-state",
       "active",

package/src/Carousel/loopEngine.ts

@@ -13,7 +13,7 @@
  */
 export function shortestStep(from: number, to: number, count: number): number {
   if (count <= 0) return 0;
-  const forward = (((to - from) % count) + count) % count; // 0 … count-1
+  const forward = (((to - from) % count) + count) % count; // 0 ... count-1
   return forward * 2 > count ? forward - count : forward;
 }
 

package/src/Carousel/types.ts

@@ -627,7 +627,7 @@ export type CarouselSlideProps = Omit<ComponentProps<"div">, "aria-label"> & {
 /** Props for `Carousel.NextTrigger` — the button that advances one page; native `<button>` props plus `asChild`. */
 export type CarouselNextTriggerProps = ComponentProps<"button"> & {
   /** Render the child element instead of the default `<button>`. All
-   * trigger props (onClick, disabled, ids.nextTrigger, …) are merged
+   * trigger props (onClick, disabled, ids.nextTrigger, ...) are merged
    * onto the child via `Slot`. The child must accept a `ref`. */
   asChild?: boolean;
 };

package/src/Checkbox/Checkbox.tsx

@@ -32,7 +32,7 @@ function dataStateOf(checked: CheckedState) {
  *
  * 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 checkbox.
  *
  * Supports two state modes, statically discriminated at the type level:
@@ -63,7 +63,7 @@ function dataStateOf(checked: CheckedState) {
  * ```tsx
  * const [checked, setChecked] = useState<CheckedState>("indeterminate");
  *
- * <Checkbox.Root checked={checked} onCheckedChange={setChecked} aria-label="…">
+ * <Checkbox.Root checked={checked} onCheckedChange={setChecked} aria-label="...">
  *   <Checkbox.Indicator />
  * </Checkbox.Root>
  * ```

package/src/CheckboxCard/CheckboxCard.tsx

@@ -61,7 +61,7 @@ function dataStateOf(checked: CheckedState) {
  * ```tsx
  * const [enabled, setEnabled] = useState<CheckedState>(false);
  *
- * <CheckboxCard.Root checked={enabled} onCheckedChange={setEnabled} aria-label="…">
+ * <CheckboxCard.Root checked={enabled} onCheckedChange={setEnabled} aria-label="...">
  *   <CheckboxCard.Indicator />
  *   Feature name
  * </CheckboxCard.Root>

package/src/CheckboxCard/README.md

@@ -46,7 +46,7 @@ Pass `checked` and `onCheckedChange` together. The parent owns the value.
 ```tsx
 const [enabled, setEnabled] = useState<CheckedState>(false);
 
-<CheckboxCard.Root checked={enabled} onCheckedChange={setEnabled} aria-label="…">
+<CheckboxCard.Root checked={enabled} onCheckedChange={setEnabled} aria-label="...">
   <CheckboxCard.Indicator />
   Dark mode
 </CheckboxCard.Root>