@primitiv-ui/react 0.1.29 → 0.1.31

package/src/Table/types.ts

@@ -1,4 +1,5 @@
 import type {
+  ButtonHTMLAttributes,
   HTMLAttributes,
   ReactNode,
   TableHTMLAttributes,
@@ -88,6 +89,130 @@ export type TableScrollAreaProps = {
   style?: HTMLAttributes<HTMLDivElement>["style"];
 } & Omit<HTMLAttributes<HTMLDivElement>, "style">;
 
+/**
+ * The value shared by {@link TableExpandable | `Table.Expandable`} with its
+ * {@link TableExpandTrigger | `Table.ExpandTrigger`} and
+ * {@link TableDetailRow | `Table.DetailRow`} children.
+ *
+ * @internal
+ */
+export type TableExpandableContextValue = {
+  /** Whether the detail row is currently revealed. */
+  expanded: boolean;
+  /** The id wired to the detail row's `<tr>` and the trigger's `aria-controls`. */
+  detailId: string;
+  /** Flips `expanded` and notifies `onExpandedChange`. */
+  toggle: () => void;
+};
+
+/**
+ * Props for {@link TableExpandable | `Table.Expandable`} — the pairing
+ * provider for one expandable row and its detail row.
+ */
+export type TableExpandableProps = {
+  /** The parent {@link TableRow | `Table.Row`} and its
+   * {@link TableDetailRow | `Table.DetailRow`}, as siblings. */
+  children: ReactNode;
+  /**
+   * Whether the detail row is revealed. Pass this (with
+   * `onExpandedChange`) to drive expansion from outside — which is what an
+   * external table engine such as TanStack Table does.
+   */
+  expanded?: boolean;
+  /**
+   * Initial expanded state when running uncontrolled. Ignored when
+   * `expanded` is supplied.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /** Called with the next expanded state whenever the trigger is activated. */
+  onExpandedChange?: (expanded: boolean) => void;
+};
+
+/**
+ * Props for {@link TableExpandTrigger | `Table.ExpandTrigger`} — all
+ * `ButtonHTMLAttributes` on the native `<button>`.
+ *
+ * `aria-expanded`, `aria-controls` and `type` are owned by the component and
+ * therefore `Omit`-ted: they are derived from the surrounding
+ * {@link TableExpandable | `Table.Expandable`} and must not be overridden, or
+ * the relationship the pair exists to express would break.
+ *
+ * @extends HTMLButtonElement
+ */
+export type TableExpandTriggerProps = {
+  /**
+   * Render a consumer-supplied control instead of the native `<button>`, with
+   * this part's `aria-expanded`, `aria-controls`, `data-state` and click
+   * handling merged onto it via the {@link Slot} pattern.
+   *
+   * This is how a styled layer composes a real Button rather than re-creating
+   * one: the registry `data-table` renders a ghost Button through it, matching
+   * the Figma set, whose Expand Trigger is an Icon Button instance rather than a
+   * drawn glyph. The child must be a single element that accepts a `ref`, and it
+   * should be a `<button>` — the wiring assumes a control.
+   * @default false
+   */
+  asChild?: boolean;
+} & Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "aria-expanded" | "aria-controls" | "type"
+>;
+
+/**
+ * Props for {@link TableDetailRow | `Table.DetailRow`} — a required `colSpan`
+ * plus all `HTMLAttributes` on the native `<tr>`.
+ *
+ * `id` is component-owned (it is the target of the trigger's `aria-controls`)
+ * and so is `Omit`-ted.
+ *
+ * @extends HTMLTableRowElement
+ */
+export type TableDetailRowProps = {
+  /** The detail panel's content. */
+  children?: ReactNode;
+  /**
+   * How many columns the panel spans — **every** column the table renders,
+   * control columns included.
+   *
+   * Deliberately a required prop rather than a value counted from context:
+   * counting would mean the table registering its own columns, and an
+   * external table engine already knows the number (TanStack Table:
+   * `table.getVisibleLeafColumns().length`).
+   */
+  colSpan: number;
+  /**
+   * How many leading columns to leave empty before the panel starts — the
+   * control columns (select, expand) a row renders in front of its data.
+   *
+   * The panel then spans the columns that remain, so `colSpan` keeps its
+   * meaning: the table's full column count, gutter included.
+   *
+   * This is how a panel aligns with the first **data** column instead of the
+   * table's edge (a panel starting under the checkbox reads as a new section of
+   * the table rather than an opened row). Alignment by empty cell rather than by
+   * a CSS indent is deliberate: the browser's own table layout resolves the
+   * width, so it stays exact across every size, density and control-column set
+   * with nothing measured and no arithmetic to drift.
+   * @default 0
+   */
+  gutter?: number;
+  /**
+   * Keep the row mounted while collapsed so a CSS transition can run.
+   *
+   * Off by default, and that default matters more here than it does on a
+   * `<div>`-based disclosure: a mounted row is still a **row**, so assistive
+   * technology counts it, and a table of 24 rows with 24 force-mounted
+   * detail rows announces 48. Opt in only when you are animating, and note
+   * that the collapsed row remains in the accessibility tree while you do.
+   * @default false
+   */
+  forceMount?: boolean;
+  /** Passed through to the `<td>` that spans the row, for styling the cell
+   * itself rather than the row. */
+  cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
+} & Omit<HTMLAttributes<HTMLTableRowElement>, "id" | "children">;
+
 /**
  * Props for {@link TableCaption | `Table.Caption`} — a required `children`,
  * an optional `captionSide`, plus all `HTMLAttributes` on the native

package/src/Tabs/README.md

@@ -11,8 +11,8 @@ import { Tabs } from "@primitiv-ui/react";
     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
     <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
   </Tabs.List>
-  <Tabs.Content value="overview">Dashboard…</Tabs.Content>
-  <Tabs.Content value="settings">Preferences…</Tabs.Content>
+  <Tabs.Content value="overview">Dashboard...</Tabs.Content>
+  <Tabs.Content value="settings">Preferences...</Tabs.Content>
 </Tabs.Root>;
 ```
 
@@ -63,7 +63,7 @@ trigger and panel is always present.
 
 ```tsx
 <Tabs.Root defaultValue="overview" lazyMount>
-  …
+  ...
 </Tabs.Root>
 ```
 
@@ -76,7 +76,7 @@ position must be computed while the panel has real dimensions.
 ```tsx
 const ref = useRef<TabsImperativeApi>(null);
 <Tabs.Root ref={ref} defaultValue="a">
-  …
+  ...
 </Tabs.Root>;
 ref.current?.setActiveTab("b");
 ```

package/src/Tabs/Tabs.tsx

@@ -75,8 +75,8 @@ import type {
  *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
  *     <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
  *   </Tabs.List>
- *   <Tabs.Content value="overview">Dashboard…</Tabs.Content>
- *   <Tabs.Content value="settings">Preferences…</Tabs.Content>
+ *   <Tabs.Content value="overview">Dashboard...</Tabs.Content>
+ *   <Tabs.Content value="settings">Preferences...</Tabs.Content>
  * </Tabs.Root>
  * ```
  *
@@ -89,7 +89,7 @@ import type {
  *   onValueChange={setTab}
  *   onChange={({ name, index }) => track("tab_view", { name, index })}
  * >
- *   …
+ *   ...
  * </Tabs.Root>
  * ```
  *
@@ -98,7 +98,7 @@ import type {
  * const ref = useRef<TabsImperativeApi>(null);
  *
  * <Tabs.Root ref={ref} orientation="vertical" defaultValue="one">
- *   …
+ *   ...
  * </Tabs.Root>
  *
  * <button onClick={() => ref.current?.setActiveTab("two")}>Go to two</button>
@@ -148,6 +148,7 @@ export const TabsRoot: ForwardRefExoticComponent<
   );
 });
 
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
 TabsRoot.displayName = "TabsRoot";
 
 /**

package/src/Tabs/__tests__/Tabs.activation-mode.test.tsx

@@ -28,6 +28,64 @@ describe("Activation mode tests", () => {
     expect(secondTabPanel).not.toHaveAttribute("hidden");
   });
 
+  it("does not activate a tab on arrow navigation in manual mode", async () => {
+    // Directly asserts the manual guard: arrow moves focus without activating,
+    // so Tab 1 stays selected and Tab 2 does not.
+    const user = userEvent.setup();
+    render(
+      <Tabs.Root defaultValue="tab1" activationMode="manual">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+
+    await user.tab();
+    await user.keyboard("{ArrowRight}");
+
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("activates a non-native asChild tab via the roving Enter handler (manual)", async () => {
+    // A plain <div> fires no synthetic click on Enter, so activation can only
+    // come from the roving hook's includeActivate mapping — the guarantee a
+    // native <button> would mask.
+    const user = userEvent.setup();
+    render(
+      <Tabs.Root defaultValue="tab1" activationMode="manual">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger asChild value="tab1">
+            <div>Tab 1</div>
+          </Tabs.Trigger>
+          <Tabs.Trigger asChild value="tab2">
+            <div>Tab 2</div>
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+
+    await user.tab();
+    await user.keyboard("{ArrowRight}");
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
   it("should not activate the second tab when focusing its tab in manual mode", async () => {
     // Arrange
     const user = userEvent.setup();

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

@@ -1,6 +1,21 @@
 import { render, screen } from "@testing-library/react";
 
 import { Tabs, TabsOrientation } from "../index.ts";
+import { TabsContext } from "../TabsContext";
+
+describe("Tabs displayNames", () => {
+  it("sets a displayName on the compound, each sub-component, and the context", () => {
+    // Assert — empty displayNames would render each as anonymous in DevTools.
+    // `Tabs`, `Tabs.Root`, and the underlying component are one object
+    // (Object.assign compound), so the compound's "Tabs" alias is the
+    // observable Root displayName; the sub-components are distinct objects.
+    expect(Tabs.displayName).toBe("Tabs");
+    expect(Tabs.List.displayName).toBe("TabsList");
+    expect(Tabs.Trigger.displayName).toBe("TabsTrigger");
+    expect(Tabs.Content.displayName).toBe("TabsContent");
+    expect(TabsContext.displayName).toBe("TabsContext");
+  });
+});
 
 describe("Tabs basic rendering tests", () => {
   describe("Tabs.Root", () => {

package/src/Tabs/__tests__/Tabs.change-event-callbacks.test.tsx

@@ -110,6 +110,30 @@ describe('Tabs change event callbacks', () => {
       expect(handleChange).not.toHaveBeenCalled();
     });
 
+    it('does not re-fire onChange when re-clicking a tab activated after mount', async () => {
+      // No defaultValue: the guard reads an activeValue that changes after the
+      // first click, so a stale activateTab closure would re-fire on the second.
+      const user = userEvent.setup();
+      const handleChange = vi.fn();
+
+      render(
+        <Tabs.Root onChange={handleChange}>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2);
+      await user.click(tab2);
+
+      expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+
     it('should not call onValueChange if clicking already active tab in controlled mode', async () => {
       const user = userEvent.setup();
       const handleValueChange = vi.fn();

package/src/Tabs/__tests__/Tabs.disabled-tabs.test.tsx

@@ -2,6 +2,42 @@ import { render, screen } from "@testing-library/react";
 import { Tabs } from "../Tabs";
 import userEvent from "@testing-library/user-event";
 
+describe("Tabs disabled re-registration", () => {
+  it("re-registers a trigger's disabled flag when it changes after mount", async () => {
+    // Arrange — automatic mode: arrowing onto a tab activates it unless the
+    // trigger is registered as disabled. Tab 2 starts enabled, then disables.
+    const user = userEvent.setup();
+    function Fixture({ tab2Disabled }: { tab2Disabled: boolean }) {
+      return (
+        <Tabs.Root defaultValue="tab1">
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2" disabled={tab2Disabled}>
+              Tab 2
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>
+      );
+    }
+    const { rerender } = render(<Fixture tab2Disabled={false} />);
+
+    // Act — disable Tab 2 after mount, then arrow onto it.
+    rerender(<Fixture tab2Disabled />);
+    await user.tab();
+    await user.keyboard("{ArrowRight}");
+
+    // Assert — the registrar effect re-ran, so Tab 2 is focused but NOT
+    // activated. A stale registration would treat it as enabled and activate
+    // it on arrow (automatic mode).
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  });
+});
+
 describe("Tabs disabled tabs tests", () => {
   it("should have the aria-disabled attribute set to false by default", () => {
     // Arrange

package/src/Tabs/__tests__/Tabs.lazy-mount.test.tsx

@@ -26,6 +26,23 @@ describe("Tabs lazyMount", () => {
     expect(screen.getByText("Content 3")).toBeInTheDocument();
   });
 
+  it("defaults lazyMount to off when the prop is omitted (eager render)", () => {
+    // Omitting the prop must fall back to eager mounting — a default of `true`
+    // would hide inactive panel children on mount.
+    render(
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+
+    expect(screen.getByText("Content 2")).toBeInTheDocument();
+  });
+
   it("should not render inactive panel children on initial mount when lazyMount is true", () => {
     renderTabs(true);
 

package/src/Tabs/hooks/useTabsContent.ts

@@ -14,6 +14,11 @@ export function useTabsContent({ value }: Pick<TabsContentProps, "value">) {
 
   // Track whether this panel has ever been active. Starts true for the
   // default active panel; flips once on first activation for all others.
+  // The mount effect below sets `activated` for the active panel within the
+  // same commit, so the initialiser's value is only ever observable as a
+  // pre-effect first-paint flash (not reproducible in jsdom); for inactive
+  // panels the initialiser's `false` and a mutated `undefined` are both falsy.
+  // Stryker disable next-line ArrowFunction: equivalent under the test env — see above.
   const [activated, setActivated] = useState(() => isActive);
   useEffect(() => {
     if (isActive) setActivated(true);

package/src/Tabs/hooks/useTabsRoot.ts

@@ -18,15 +18,23 @@ type TriggerMeta = {
 
 export function useTabsRoot(
   {
-    orientation = "horizontal",
-    dir = "ltr",
-    activationMode = "automatic",
+    orientation,
+    dir,
+    activationMode,
     defaultValue,
     value,
     onValueChange,
     onChange,
-    lazyMount = false,
-  }: Omit<TabsRootProps, "className">,
+    lazyMount,
+  }: // `TabsRoot` always resolves these four before calling the hook, so they
+  // are required here (a default would be dead code the tests never reach).
+  Omit<TabsRootProps, "className"> &
+    Required<
+      Pick<
+        TabsRootProps,
+        "orientation" | "dir" | "activationMode" | "lazyMount"
+      >
+    >,
   ref: Ref<TabsImperativeApi>,
 ) {
   const tabsId = useId();
@@ -47,6 +55,10 @@ export function useTabsRoot(
     (
       triggerValue: string,
       element: HTMLButtonElement | null,
+      // The default is only reached by the cleanup call `registerTrigger(value,
+      // null)`, where `element` is null and `disabled` is discarded — so its
+      // value is never observable.
+      // Stryker disable next-line BooleanLiteral
       disabled = false,
     ) => {
       registerTriggerBase(
@@ -54,6 +66,9 @@ export function useTabsRoot(
         element ? { element, disabled } : null,
       );
     },
+    // `registerTriggerBase` is a stable useCollection callback, so emptying this
+    // array yields the identical memoised function.
+    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
     [registerTriggerBase],
   );
 
@@ -71,8 +86,14 @@ export function useTabsRoot(
 
   const focusTrigger = useCallback(
     (triggerValue: string) => {
+      // `triggerValue` is always sourced from the navigable set (registered
+      // triggers), so a value that reaches here has a live entry.
+      // Stryker disable next-line OptionalChaining: unreachable given that invariant.
       triggersRef.current.get(triggerValue)?.element.focus();
     },
+    // `triggersRef` is a stable RefObject, so emptying this array yields the
+    // identical memoised function.
+    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
     [triggersRef],
   );
 
@@ -100,6 +121,9 @@ export function useTabsRoot(
         }
 
         if (isControlled) {
+          // Controlled mode requires `onValueChange` (discriminated-union prop
+          // type), so the optional call can never no-op in valid usage.
+          // Stryker disable next-line OptionalChaining: unreachable — controlled requires onValueChange.
           onValueChange?.(newValue);
         } else {
           setActiveValue(newValue);

package/src/Tabs/hooks/useTabsTrigger.ts

@@ -51,6 +51,9 @@ export function useTabsTrigger({
     (newValue: string, index: number) => {
       if (activeValue === newValue) return;
       if (isControlled) {
+        // Controlled mode requires `onValueChange` (discriminated-union prop
+        // type), so the optional call can never no-op in valid usage.
+        // Stryker disable next-line OptionalChaining: unreachable — controlled requires onValueChange.
         onValueChange?.(newValue);
       } else {
         setActiveValue(newValue);
@@ -87,10 +90,12 @@ export function useTabsTrigger({
     includeActivate: true,
     onNavigate: (targetValue, action) => {
       const isDisabled = disabledTriggerValues.has(targetValue);
+      // Automatic mode activates on any navigation; manual mode activates only
+      // on an explicit activation key (Enter/Space). Since the mode is always
+      // "automatic" or "manual", `automatic || isActivationKey` captures both.
       const shouldActivate =
         !isDisabled &&
-        (activationMode === "automatic" ||
-          (activationMode === "manual" && action === "activate"));
+        (activationMode === "automatic" || action === "activate");
       if (shouldActivate) {
         activateTab(targetValue, triggerValues.indexOf(targetValue));
       }

package/src/ToggleGroup/README.md

@@ -30,13 +30,13 @@ At most one item is pressed at a time. Pressing the active item again
 ```tsx
 // Uncontrolled
 <ToggleGroup.Root type="single" defaultValue="center" aria-label="Alignment">
-  …
+  ...
 </ToggleGroup.Root>
 
 // Controlled — onValueChange receives string | undefined
 const [align, setAlign] = useState<string | undefined>("center");
 <ToggleGroup.Root type="single" value={align} onValueChange={setAlign} aria-label="Alignment">
-  …
+  ...
 </ToggleGroup.Root>
 ```
 
@@ -48,13 +48,13 @@ independently.
 ```tsx
 // Uncontrolled
 <ToggleGroup.Root type="multiple" defaultValue={["bold"]} aria-label="Formatting">
-  …
+  ...
 </ToggleGroup.Root>
 
 // Controlled — onValueChange receives string[]
 const [formats, setFormats] = useState<string[]>([]);
 <ToggleGroup.Root type="multiple" value={formats} onValueChange={setFormats} aria-label="Formatting">
-  …
+  ...
 </ToggleGroup.Root>
 ```
 

package/src/Tooltip/README.md

@@ -60,12 +60,12 @@ The two shapes are statically discriminated at the type level.
 
 ```tsx
 // Uncontrolled
-<Tooltip.Root defaultOpen>…</Tooltip.Root>
+<Tooltip.Root defaultOpen>...</Tooltip.Root>
 
 // Controlled
 const [open, setOpen] = useState(false);
 <Tooltip.Root open={open} onOpenChange={setOpen}>
-  …
+  ...
 </Tooltip.Root>
 ```
 
@@ -82,7 +82,7 @@ before the normal delay resumes.
 
 ```tsx
 <Tooltip.Provider delayDuration={400} skipDelayDuration={150}>
-  …
+  ...
 </Tooltip.Provider>
 ```
 
@@ -95,7 +95,7 @@ when the cursor leaves the trigger:
 
 ```tsx
 <Tooltip.Root disableHoverableContent>
-  …
+  ...
 </Tooltip.Root>
 ```
 
@@ -114,7 +114,7 @@ tooltip open:
     event.preventDefault(); // keep open when clicking outside
   }}
 >
-  …
+  ...
 </Tooltip.Content>
 ```
 
@@ -178,7 +178,7 @@ subtree stays in the DOM while closed so a CSS animation can play on
 
 ```tsx
 <Tooltip.Portal forceMount>
-  <Tooltip.Content forceMount>…</Tooltip.Content>
+  <Tooltip.Content forceMount>...</Tooltip.Content>
 </Tooltip.Portal>
 ```
 
@@ -199,7 +199,7 @@ child element; the child's own handlers run first.
 </Tooltip.Trigger>
 
 <Tooltip.Arrow asChild>
-  <svg viewBox="0 0 10 5">…</svg>
+  <svg viewBox="0 0 10 5">...</svg>
 </Tooltip.Arrow>
 ```
 

package/src/Tooltip/Tooltip.tsx

@@ -120,7 +120,7 @@ export function TooltipRoot({
   return <TooltipProvider value={contextValue}>{children}</TooltipProvider>;
 }
 
-/** @internal */
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
 TooltipRoot.displayName = "TooltipRoot";
 
 /**
@@ -195,7 +195,7 @@ TooltipTrigger.displayName = "TooltipTrigger";
  * @example
  * ```tsx
  * <Tooltip.Portal>
- *   <Tooltip.Content>…</Tooltip.Content>
+ *   <Tooltip.Content>...</Tooltip.Content>
  * </Tooltip.Portal>
  * ```
  */

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

@@ -1,6 +1,24 @@
 import { render, screen } from "@testing-library/react";
 
 import { Tooltip } from "../Tooltip";
+import { TooltipContext, TooltipProviderContext } from "../TooltipContext";
+
+describe("Tooltip displayNames", () => {
+  it("sets a displayName on the compound, each sub-component, and both contexts", () => {
+    // Assert — empty displayNames would render each as anonymous in DevTools.
+    // Tooltip.Root is the same object as the compound (Object.assign), so its
+    // own "TooltipRoot" assignment is overwritten and has no observable
+    // Root displayName; the sub-components are distinct objects.
+    expect(Tooltip.displayName).toBe("Tooltip");
+    expect(Tooltip.Provider.displayName).toBe("TooltipProvider");
+    expect(Tooltip.Trigger.displayName).toBe("TooltipTrigger");
+    expect(Tooltip.Portal.displayName).toBe("TooltipPortal");
+    expect(Tooltip.Content.displayName).toBe("TooltipContent");
+    expect(Tooltip.Arrow.displayName).toBe("TooltipArrow");
+    expect(TooltipProviderContext.displayName).toBe("TooltipProviderContext");
+    expect(TooltipContext.displayName).toBe("TooltipContext");
+  });
+});
 
 describe("Tooltip — basic rendering", () => {
   it("renders Tooltip.Trigger as a button with type='button'", () => {
@@ -135,6 +153,38 @@ describe("Tooltip — basic rendering", () => {
     expect(screen.queryByRole("tooltip")).toBeNull();
   });
 
+  it("Tooltip.Portal does not render arbitrary children when closed, independent of Content's own guard", () => {
+    // Content has its own open guard, so wrapping it can't tell Portal's
+    // guard apart from Content's. Wrap a plain element instead.
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Portal>
+            <div data-testid="portal-child">child</div>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.queryByTestId("portal-child")).toBeNull();
+  });
+
+  it("Tooltip.Portal renders arbitrary children via forceMount even when closed", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Portal forceMount>
+            <div data-testid="portal-child">child</div>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByTestId("portal-child")).toBeInTheDocument();
+  });
+
   it("Tooltip.Arrow renders a span inside the content", () => {
     render(
       <Tooltip.Provider>