@primitiv-ui/react 0.1.28 → 0.1.29

package/src/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,309 @@
+import { useEffect, useMemo, useRef } from "react";
+import type { ReactElement } from "react";
+
+import { useDirection } from "../DirectionProvider/index.ts";
+import { useRovingTabindex } from "../hooks/index.ts";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.ts";
+
+import { SegmentedControlContext } from "./SegmentedControlContext";
+import {
+  useSegmentedControlContext,
+  useSegmentedControlRoot,
+} from "./hooks/index.ts";
+import {
+  SegmentedControlItemProps,
+  SegmentedControlRootProps,
+} from "./types";
+
+/**
+ * The root of a SegmentedControl — a `<div role="radiogroup">` that owns
+ * the selected value and provides {@link SegmentedControlContext} to
+ * descendant {@link SegmentedControlItem | `SegmentedControl.Item`}s. It is
+ * the single-select value picker of the design system (the same WAI-ARIA
+ * radio-group semantics as {@link RadioGroupRoot | `RadioGroup`}), styled as
+ * a linear strip of segments rather than a stack of radios.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link SegmentedControlRootProps.defaultValue | `defaultValue`} (or omit
+ *   for nothing selected on mount). The component owns the value.
+ * - **Controlled** — pass
+ *   {@link SegmentedControlRootProps.value | `value`} *and*
+ *   {@link SegmentedControlRootProps.onValueChange | `onValueChange`}
+ *   together. The parent owns the value; the component defers every change
+ *   back through the callback.
+ *
+ * **ARIA.** `role="radiogroup"` and `aria-orientation` are set
+ * automatically. Provide an accessible name via `aria-label` or
+ * `aria-labelledby`.
+ *
+ * **Orientation.** `"horizontal"` (default) binds the Arrow Left/Right pair;
+ * `"vertical"` binds Arrow Up/Down. Reflected as `data-orientation` on the
+ * root for styling.
+ *
+ * **Disabled.** Pass `disabled` to disable the whole control — every segment
+ * becomes non-interactive and drops out of arrow-key navigation, and
+ * `data-disabled=""` is set on the root.
+ *
+ * **Reading direction.** `dir` (`"ltr"` / `"rtl"`) swaps the horizontal
+ * arrow pair so Arrow Left moves forward in RTL. When omitted, it is
+ * inherited from the nearest {@link DirectionProvider}, falling back to
+ * `"ltr"`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer-supplied element
+ * in place of the native `<div>`, with the control's `role`,
+ * `aria-orientation`, `data-orientation`, `data-disabled`, `dir`, and
+ * remaining props merged in.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <SegmentedControl.Root defaultValue="headless" aria-label="Consumption mode">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="figma">Figma</SegmentedControl.Item>
+ * </SegmentedControl.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState("headless");
+ *
+ * <SegmentedControl.Root value={value} onValueChange={setValue} aria-label="…">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ * </SegmentedControl.Root>
+ * ```
+ */
+export function SegmentedControlRoot({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  orientation = "horizontal",
+  dir,
+  disabled = false,
+  asChild = false,
+  children,
+  ...rest
+}: SegmentedControlRootProps): ReactElement {
+  const resolvedDir = dir ?? useDirection();
+  const { value, select, registerItem, itemValues, disabledValues, focusItem } =
+    useSegmentedControlRoot({
+      defaultValue,
+      value: controlledValue,
+      onValueChange,
+    });
+  const contextValue = useMemo(
+    () => ({
+      value,
+      select,
+      registerItem,
+      itemValues,
+      disabledValues,
+      focusItem,
+      orientation,
+      dir: resolvedDir,
+      disabled,
+    }),
+    [
+      value,
+      select,
+      registerItem,
+      itemValues,
+      disabledValues,
+      focusItem,
+      orientation,
+      resolvedDir,
+      disabled,
+    ],
+  );
+  const rootProps = {
+    role: "radiogroup" as const,
+    "aria-orientation": orientation,
+    "data-orientation": orientation,
+    "data-disabled": disabled ? "" : undefined,
+    dir: resolvedDir,
+    ...rest,
+  };
+  return (
+    <SegmentedControlContext.Provider value={contextValue}>
+      {asChild ? (
+        <Slot {...rootProps}>{children}</Slot>
+      ) : (
+        <div {...rootProps}>{children}</div>
+      )}
+    </SegmentedControlContext.Provider>
+  );
+}
+
+/** @internal */
+// Runtime-dead: the compound alias below (same object via Object.assign)
+// overwrites this to "SegmentedControl" at load, so the value is never
+// observable. The assignment stays because it declares `displayName` on
+// `typeof SegmentedControlRoot`, which TSegmentedControlCompound extends.
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
+SegmentedControlRoot.displayName = "SegmentedControlRoot";
+
+/**
+ * An individual segment inside a SegmentedControl — a native
+ * `<button role="radio">` that reports its state, participates in the
+ * roving tabindex, and handles arrow-key navigation within the control.
+ *
+ * **Selection.** Clicking a segment (or pressing Space / Enter on the
+ * focused segment via native `<button>` behaviour) selects it. The arrow
+ * keys enabled by the control's `orientation` move focus and selection to
+ * the next or previous non-disabled segment, wrapping at the ends.
+ *
+ * **Roving tabindex.** Only one segment per control is in the document tab
+ * sequence at a time: the selected one if any, otherwise the first
+ * non-disabled segment. All others have `tabIndex=-1` so `Tab` escapes the
+ * control in a single keystroke.
+ *
+ * **Disabled.** Passing `disabled` forwards the native attribute and
+ * excludes the segment from arrow-key navigation and the roving-tabindex
+ * home base. The whole control can also be disabled via Root's `disabled`
+ * prop, which disables every segment.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked"` mirrors the
+ * selection state; `data-disabled=""` is set when the segment (or the whole
+ * control) is disabled.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer element in place
+ * of the native `<button>`, with the segment's ARIA, `data-state`,
+ * `data-disabled`, `tabIndex`, `onClick`, `onKeyDown`, `disabled`, and `ref`
+ * merged onto it. A non-focusable child must be made focusable by the
+ * consumer.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @throws if rendered outside a `SegmentedControl.Root`.
+ */
+export function SegmentedControlItem({
+  value,
+  children,
+  onClick,
+  onKeyDown,
+  disabled: itemDisabled,
+  asChild = false,
+  ref,
+  ...rest
+}: SegmentedControlItemProps): ReactElement {
+  const {
+    value: selectedValue,
+    select,
+    registerItem,
+    itemValues,
+    disabledValues,
+    focusItem,
+    orientation,
+    dir,
+    disabled: groupDisabled,
+  } = useSegmentedControlContext();
+  const isChecked = selectedValue === value;
+  const isDisabled = itemDisabled || groupDisabled;
+  // Arrow-key navigation walks only enabled items: the per-item disabled
+  // set is excluded, and when the whole control is disabled the predicate
+  // fails for every item so the navigable list is empty.
+  const enabledValues = useMemo(
+    () => itemValues.filter((v) => !groupDisabled && !disabledValues.has(v)),
+    [groupDisabled, itemValues, disabledValues],
+  );
+  const isTabStop =
+    selectedValue !== undefined ? isChecked : enabledValues[0] === value;
+
+  const localRef = useRef<HTMLButtonElement | null>(null);
+  const setRef = useMemo(() => composeRefs(localRef, ref), [ref]);
+
+  useEffect(() => {
+    registerItem(value, localRef.current, itemDisabled);
+    return () => registerItem(value, null);
+  }, [value, itemDisabled, registerItem]);
+
+  const { handleKeyDown } = useRovingTabindex<string>({
+    orientation,
+    dir,
+    navigable: enabledValues,
+    currentKey: value,
+    onNavigate: (target) => {
+      select(target);
+      focusItem(target);
+    },
+  });
+
+  const itemProps = {
+    ...rest,
+    ref: setRef,
+    role: "radio" as const,
+    "aria-checked": isChecked,
+    "data-state": isChecked ? ("checked" as const) : ("unchecked" as const),
+    "data-disabled": isDisabled ? "" : undefined,
+    tabIndex: isTabStop ? 0 : -1,
+    disabled: isDisabled,
+    onClick: composeEventHandlers(onClick, () => select(value)),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+  };
+
+  return asChild ? (
+    <Slot {...itemProps}>{children}</Slot>
+  ) : (
+    <button type="button" {...itemProps}>
+      {children}
+    </button>
+  );
+}
+
+/** @internal */
+SegmentedControlItem.displayName = "SegmentedControlItem";
+
+/** Type of the {@link SegmentedControl} compound: the root callable plus its attached sub-components. */
+export type TSegmentedControlCompound = typeof SegmentedControlRoot & {
+  Root: typeof SegmentedControlRoot;
+  Item: typeof SegmentedControlItem;
+};
+
+/**
+ * Headless, accessible **SegmentedControl** — a compound component for
+ * picking one option from a small linear set. It implements the
+ * [WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
+ * on native `<button role="radio">` elements: exactly one segment is
+ * selected at a time and the selection can never be cleared to nothing
+ * (unlike a toggle group). Zero styles ship.
+ *
+ * `SegmentedControl` is both callable (an alias of
+ * {@link SegmentedControlRoot | `SegmentedControl.Root`}) and carries its
+ * sub-components as static properties. Prefer the namespaced form in
+ * application code for readability and grep-ability.
+ *
+ * - {@link SegmentedControlRoot | `SegmentedControl.Root`} — state owner,
+ *   context provider, `<div role="radiogroup">` wrapper.
+ * - {@link SegmentedControlItem | `SegmentedControl.Item`} — a selectable
+ *   segment participating in the roving tabindex.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { SegmentedControl } from "@primitiv-ui/react";
+ *
+ * <SegmentedControl.Root defaultValue="headless" aria-label="Consumption mode">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="figma">Figma</SegmentedControl.Item>
+ * </SegmentedControl.Root>;
+ * ```
+ *
+ * @see {@link SegmentedControlRoot} for state modes, orientation, and ARIA.
+ * @see {@link SegmentedControlItem} for selection, roving tabindex, and keyboard navigation.
+ */
+const SegmentedControlCompound: TSegmentedControlCompound = Object.assign(
+  SegmentedControlRoot,
+  {
+    Root: SegmentedControlRoot,
+    Item: SegmentedControlItem,
+  },
+);
+
+/** @internal */
+SegmentedControlCompound.displayName = "SegmentedControl";
+
+export { SegmentedControlCompound as SegmentedControl };

package/src/SegmentedControl/SegmentedControlContext.ts

@@ -0,0 +1,28 @@
+import { createStrictContext } from "../utils/index.ts";
+
+import {
+  SegmentedControlOrientation,
+  SegmentedControlReadingDirection,
+} from "./types";
+
+export type SegmentedControlContextValue = {
+  value: string | undefined;
+  select: (value: string) => void;
+  registerItem: (
+    value: string,
+    element: HTMLButtonElement | null,
+    disabled?: boolean,
+  ) => void;
+  itemValues: string[];
+  disabledValues: Set<string>;
+  focusItem: (value: string) => void;
+  orientation: SegmentedControlOrientation;
+  dir: SegmentedControlReadingDirection;
+  /** Whether the whole control is disabled (Root's `disabled` prop). */
+  disabled: boolean;
+};
+
+export const [SegmentedControlContext, useSegmentedControlContext] =
+  createStrictContext<SegmentedControlContextValue>(
+    "SegmentedControl sub-components must be rendered inside a <SegmentedControl.Root>.",
+  );

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

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl asChild composition", () => {
+  it("Root asChild renders the consumer element with radiogroup role preserved", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root asChild aria-label="Mode">
+        <section data-testid="wrap">
+          <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        </section>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    const root = screen.getByTestId("wrap");
+    expect(root.tagName).toBe("SECTION");
+    expect(root).toHaveAttribute("role", "radiogroup");
+    expect(root).toHaveAttribute("aria-label", "Mode");
+    expect(root).toHaveAttribute("data-orientation", "horizontal");
+  });
+
+  it("Item asChild delegates to the child element while keeping ARIA + selection wiring", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <SegmentedControl.Root aria-label="Mode" onValueChange={onValueChange}>
+        <SegmentedControl.Item value="a" asChild>
+          <li>A</li>
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const item = screen.getByRole("radio", { name: "A" });
+
+    // Assert element is the consumer's <li>
+    expect(item.tagName).toBe("LI");
+    expect(item).toHaveAttribute("aria-checked", "false");
+    expect(item).toHaveAttribute("data-state", "unchecked");
+
+    // Act
+    await user.click(item);
+
+    // Assert selection wiring still fires via composed onClick
+    expect(onValueChange).toHaveBeenCalledWith("a");
+    expect(item).toHaveAttribute("aria-checked", "true");
+  });
+});

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

@@ -0,0 +1,100 @@
+import { render, screen } from "@testing-library/react";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl basic rendering", () => {
+  it('renders a container with role="radiogroup"', () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radiogroup", { name: "Mode" })).toBeInTheDocument();
+  });
+
+  it('renders each item as a <button role="radio"> with aria-checked="false" by default', () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const headless = screen.getByRole("radio", { name: "Headless" });
+    const styled = screen.getByRole("radio", { name: "Styled" });
+
+    // Assert
+    expect(headless.tagName).toBe("BUTTON");
+    expect(headless).toHaveAttribute("aria-checked", "false");
+    expect(headless).toHaveAttribute("data-state", "unchecked");
+    expect(styled.tagName).toBe("BUTTON");
+    expect(styled).toHaveAttribute("aria-checked", "false");
+  });
+
+  it('defaults type="button" on items so they never submit an enclosing form', () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "Headless" })).toHaveAttribute(
+      "type",
+      "button",
+    );
+  });
+
+  it('defaults to horizontal orientation on the root (aria + data)', () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const root = screen.getByRole("radiogroup", { name: "Mode" });
+
+    // Assert
+    expect(root).toHaveAttribute("aria-orientation", "horizontal");
+    expect(root).toHaveAttribute("data-orientation", "horizontal");
+  });
+
+  it("reflects vertical orientation on the root when requested", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode" orientation="vertical">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const root = screen.getByRole("radiogroup", { name: "Mode" });
+
+    // Assert
+    expect(root).toHaveAttribute("aria-orientation", "vertical");
+    expect(root).toHaveAttribute("data-orientation", "vertical");
+  });
+
+  it("does not set data-disabled on the root by default", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(
+      screen.getByRole("radiogroup", { name: "Mode" }),
+    ).not.toHaveAttribute("data-disabled");
+  });
+
+  it("sets a displayName on the compound and Item", () => {
+    // Assert — empty displayNames would render each as anonymous in DevTools.
+    // Root aliases the compound (Object.assign), so its name is "SegmentedControl".
+    expect(SegmentedControl.displayName).toBe("SegmentedControl");
+    expect(SegmentedControl.Item.displayName).toBe("SegmentedControlItem");
+  });
+});

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

@@ -0,0 +1,107 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl controlled state", () => {
+  it("reflects the controlled `value` prop", () => {
+    // Arrange & Act
+    const { rerender } = render(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        value="headless"
+        onValueChange={() => {}}
+      >
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    expect(screen.getByRole("radio", { name: "Headless" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+
+    rerender(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        value="styled"
+        onValueChange={() => {}}
+      >
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "Headless" })).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+    expect(screen.getByRole("radio", { name: "Styled" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
+  it("does not update rendered state when the parent refuses to update `value`", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        value="headless"
+        onValueChange={onValueChange}
+      >
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const styled = screen.getByRole("radio", { name: "Styled" });
+
+    // Act
+    await user.click(styled);
+
+    // Assert: callback fires but the pinned `value` keeps state on "headless".
+    expect(onValueChange).toHaveBeenCalledWith("styled");
+    expect(screen.getByRole("radio", { name: "Headless" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(styled).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("lets a parent drive the value end to end", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    function Harness() {
+      const [value, setValue] = useState("styled");
+      return (
+        <SegmentedControl.Root
+          aria-label="Mode"
+          value={value}
+          onValueChange={setValue}
+        >
+          <SegmentedControl.Item value="headless">
+            Headless
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      );
+    }
+    render(<Harness />);
+    const headless = screen.getByRole("radio", { name: "Headless" });
+    const styled = screen.getByRole("radio", { name: "Styled" });
+    expect(styled).toHaveAttribute("aria-checked", "true");
+
+    // Act & Assert
+    await user.click(headless);
+    expect(headless).toHaveAttribute("aria-checked", "true");
+    expect(styled).toHaveAttribute("aria-checked", "false");
+
+    await user.click(styled);
+    expect(styled).toHaveAttribute("aria-checked", "true");
+    expect(headless).toHaveAttribute("aria-checked", "false");
+  });
+});

package/src/SegmentedControl/__tests__/SegmentedControl.disabled-keydown-guards.test.tsx

@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl arrow-key guards for disabled focus", () => {
+  it("does nothing when the focused segment is disabled but others are enabled", () => {
+    // Arrange: `asChild` onto `<li>` so `disabled` doesn't stop the
+    // element receiving the keydown the way a native `<button disabled>` would.
+    const onValueChange = vi.fn();
+    render(
+      <SegmentedControl.Root aria-label="Mode" onValueChange={onValueChange}>
+        <SegmentedControl.Item value="a" disabled asChild>
+          <li>A</li>
+        </SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+
+    // Act: ArrowRight while focus is on a disabled segment
+    fireEvent.keyDown(a, { key: "ArrowRight" });
+
+    // Assert: nothing selected — the handler bailed on the
+    // "focused item not in enabledValues" guard.
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+  });
+
+  it("does nothing when the whole control is disabled (empty navigable set)", () => {
+    // Arrange: group-disabled means no segment is navigable; without the
+    // empty-navigable guard, arrowing would compute an undefined target.
+    const onValueChange = vi.fn();
+    render(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        disabled
+        defaultValue="a"
+        onValueChange={onValueChange}
+      >
+        <SegmentedControl.Item value="a" asChild>
+          <li>A</li>
+        </SegmentedControl.Item>
+        <SegmentedControl.Item value="b" asChild>
+          <li>B</li>
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    expect(a).toHaveAttribute("aria-checked", "true");
+
+    // Act
+    fireEvent.keyDown(a, { key: "ArrowRight" });
+
+    // Assert: the pre-existing selection survives and no callback fires.
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(a).toHaveAttribute("aria-checked", "true");
+  });
+});