@primitiv-ui/react 0.1.28 → 0.1.30

package/src/Table/__tests__/Table.DetailRow.test.tsx

@@ -0,0 +1,83 @@
+import { Table } from "../index.ts";
+import { render, screen } from "@testing-library/react";
+
+describe("Table.DetailRow rendering", () => {
+  it("should render a row whose single cell spans every column", () => {
+    // Arrange
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable expanded>
+            <Table.DetailRow colSpan={4}>Detail panel</Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+    const cell = screen.getByRole("cell");
+
+    // Assert
+    expect(cell).toHaveAttribute("colspan", "4");
+    expect(cell).toHaveTextContent("Detail panel");
+  });
+
+  it("should offset the panel behind an empty gutter cell, still spanning every column between them", () => {
+    // Arrange
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable expanded>
+            <Table.DetailRow colSpan={5} gutter={2}>
+              Detail panel
+            </Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+    const [gutter, panel] = screen.getAllByRole("cell");
+
+    // Assert — the gutter is what aligns the panel with the first DATA column
+    // at every size and density: it spans the control columns, so the browser's
+    // own table layout does the arithmetic and nothing has to be measured.
+    expect(gutter).toBeEmptyDOMElement();
+    expect(gutter).toHaveAttribute("colspan", "2");
+    expect(panel).toHaveAttribute("colspan", "3");
+    expect(panel).toHaveTextContent("Detail panel");
+  });
+
+  it("should hide the row while collapsed so it leaves the row count truthful", () => {
+    // Arrange
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable>
+            <Table.DetailRow colSpan={2}>Detail panel</Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+
+    // Assert
+    expect(screen.queryByRole("row")).not.toBeInTheDocument();
+  });
+
+  it("should stay mounted but aria-hidden while collapsed when forceMount is set", () => {
+    // Arrange
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable>
+            <Table.DetailRow colSpan={2} forceMount>
+              Detail panel
+            </Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+    const row = screen.getByRole("row", { hidden: true });
+
+    // Assert — no `hidden`, so CSS can transition it; `aria-hidden` instead, so
+    // a collapsed panel still does not inflate the table's announced row count.
+    expect(row).not.toHaveAttribute("hidden");
+    expect(row).toHaveAttribute("aria-hidden", "true");
+  });
+});

package/src/Table/__tests__/Table.ExpandTrigger.test.tsx

@@ -0,0 +1,102 @@
+import { Table } from "../index.ts";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+function renderPair(props?: { expanded?: boolean }) {
+  return render(
+    <table>
+      <tbody>
+        <Table.Expandable expanded={props?.expanded}>
+          <Table.Row>
+            <Table.Cell>
+              <Table.ExpandTrigger>Show details for Ada</Table.ExpandTrigger>
+            </Table.Cell>
+          </Table.Row>
+          <Table.DetailRow colSpan={2}>Detail panel</Table.DetailRow>
+        </Table.Expandable>
+      </tbody>
+    </table>,
+  );
+}
+
+describe("Table.ExpandTrigger accessibility", () => {
+  it("should own the expanded state on the button and point aria-controls at the detail row", () => {
+    // Arrange
+    renderPair({ expanded: true });
+    const trigger = screen.getByRole("button", {
+      name: /show details for ada/i,
+    });
+    const detailRow = screen.getAllByRole("row")[1];
+
+    // Assert — the button carries the state, because a button's expanded state
+    // is announced universally while a row's is only reliable in a treegrid.
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(detailRow).toHaveAttribute("id");
+    expect(trigger).toHaveAttribute(
+      "aria-controls",
+      detailRow.getAttribute("id"),
+    );
+  });
+});
+
+describe("Table.ExpandTrigger composition", () => {
+  it("should hand its aria wiring to a consumer's own control when asChild is set", () => {
+    // Arrange — the styled layer composes a real ghost Button here rather than
+    // hand-rolling a bare <button>, which is what the Figma set models.
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable>
+            <Table.Row>
+              <Table.Cell>
+                <Table.ExpandTrigger asChild>
+                  <button type="button" className="my-button">
+                    Details
+                  </button>
+                </Table.ExpandTrigger>
+              </Table.Cell>
+            </Table.Row>
+            <Table.DetailRow colSpan={1}>Panel</Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+    const trigger = screen.getByRole("button", { name: "Details" });
+
+    // Assert — one button, the consumer's, carrying the wiring
+    expect(trigger).toHaveClass("my-button");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).toHaveAttribute("aria-controls");
+    expect(trigger).toHaveAttribute("data-state", "closed");
+    expect(screen.getAllByRole("button")).toHaveLength(1);
+  });
+});
+
+describe("Table.ExpandTrigger activation", () => {
+  it("should report the next expanded state and reveal the detail row when uncontrolled", async () => {
+    // Arrange
+    const onExpandedChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable onExpandedChange={onExpandedChange}>
+            <Table.Row>
+              <Table.Cell>
+                <Table.ExpandTrigger>Show details for Ada</Table.ExpandTrigger>
+              </Table.Cell>
+            </Table.Row>
+            <Table.DetailRow colSpan={2}>Detail panel</Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("button"));
+
+    // Assert
+    expect(onExpandedChange).toHaveBeenCalledWith(true);
+    expect(screen.getByText("Detail panel")).toBeVisible();
+  });
+});

package/src/Table/__tests__/Table.Expandable.test.tsx

@@ -0,0 +1,121 @@
+import { Table } from "../index.ts";
+import { render, screen } from "@testing-library/react";
+
+describe("Table displayNames", () => {
+  it("sets a displayName on the compound and each sub-component", () => {
+    // Assert — empty displayNames would render each as anonymous in DevTools.
+    // `Table`, `Table.Root` and the underlying function are one object
+    // (Object.assign compound), so the compound's "Table" alias is the
+    // observable Root displayName; the sub-components are distinct objects.
+    expect(Table.displayName).toBe("Table");
+    expect(Table.Head.displayName).toBe("TableHead");
+    expect(Table.Body.displayName).toBe("TableBody");
+    expect(Table.Footer.displayName).toBe("TableFooter");
+    expect(Table.Row.displayName).toBe("TableRow");
+    expect(Table.Header.displayName).toBe("TableHeader");
+    expect(Table.Cell.displayName).toBe("TableCell");
+    expect(Table.ScrollArea.displayName).toBe("TableScrollArea");
+    expect(Table.Caption.displayName).toBe("TableCaption");
+    expect(Table.Expandable.displayName).toBe("TableExpandable");
+    expect(Table.ExpandTrigger.displayName).toBe("TableExpandTrigger");
+    expect(Table.DetailRow.displayName).toBe("TableDetailRow");
+  });
+});
+
+describe("Table.Expandable contract", () => {
+  it("should require its parts to be rendered inside a provider", () => {
+    // Assert — the strict context is what stops a trigger being wired to
+    // nothing. React logs the throw, so silence the expected console noise.
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => undefined);
+
+    expect(() =>
+      render(
+        <table>
+          <tbody>
+            <Table.DetailRow colSpan={2}>Orphan</Table.DetailRow>
+          </tbody>
+        </table>,
+      ),
+    ).toThrow(
+      "Table.ExpandTrigger and Table.DetailRow must be rendered inside a <Table.Expandable>.",
+    );
+
+    consoleError.mockRestore();
+  });
+
+  it("should apply the hidden attribute — not merely leave the row unannounced — while collapsed", () => {
+    // Arrange
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable>
+            <Table.DetailRow colSpan={2}>Detail panel</Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+
+    // Assert — pins the `forceMount` default. Without `hidden` the row is only
+    // missing from the accessibility tree, which an aria-hidden row would be too.
+    expect(screen.getByText("Detail panel").closest("tr")).toHaveAttribute(
+      "hidden",
+    );
+  });
+
+  it.each([
+    { expanded: true, state: "open" },
+    { expanded: false, state: "closed" },
+  ])(
+    "should publish data-state=$state on both parts for the styling layer",
+    ({ expanded, state }) => {
+      // Arrange
+      render(
+        <table>
+          <tbody>
+            <Table.Expandable expanded={expanded}>
+              <Table.Row>
+                <Table.Cell>
+                  <Table.ExpandTrigger>Toggle</Table.ExpandTrigger>
+                </Table.Cell>
+              </Table.Row>
+              <Table.DetailRow colSpan={2} forceMount>
+                Detail panel
+              </Table.DetailRow>
+            </Table.Expandable>
+          </tbody>
+        </table>,
+      );
+
+      // Assert — the registry stylesheet animates the panel off this attribute,
+      // because a CSS transition needs a selector, not an unmount.
+      expect(screen.getByRole("button", { name: "Toggle" })).toHaveAttribute(
+        "data-state",
+        state,
+      );
+      expect(
+        screen.getByText("Detail panel").closest("tr"),
+      ).toHaveAttribute("data-state", state);
+    },
+  );
+
+  it("should not aria-hide a force-mounted row once it is expanded", () => {
+    // Arrange
+    render(
+      <table>
+        <tbody>
+          <Table.Expandable expanded>
+            <Table.DetailRow colSpan={2} forceMount>
+              Detail panel
+            </Table.DetailRow>
+          </Table.Expandable>
+        </tbody>
+      </table>,
+    );
+
+    // Assert — aria-hidden belongs to "force-mounted AND collapsed" only; an
+    // expanded panel that is not announced would be invisible to a screen reader.
+    expect(screen.getByRole("row")).not.toHaveAttribute("aria-hidden");
+  });
+});

package/src/Table/types.ts

@@ -1,4 +1,5 @@
 import type {
+  ButtonHTMLAttributes,
   HTMLAttributes,
   ReactNode,
   TableHTMLAttributes,
@@ -6,58 +7,231 @@ import type {
   TdHTMLAttributes,
 } from "react";
 
-/** Props for {@link Table.Root} — all `TableHTMLAttributes` on `<table>`. */
+/**
+ * Props for {@link TableRoot | `Table.Root`} — all `TableHTMLAttributes` on
+ * the native `<table>`. No custom props are added.
+ *
+ * @extends HTMLTableElement
+ */
 export type TableRootProps = TableHTMLAttributes<HTMLTableElement>;
 
-/** Props for {@link Table.Head} — all `HTMLAttributes` on `<thead>`. */
+/**
+ * Props for {@link TableHead | `Table.Head`} — all `HTMLAttributes` on the
+ * native `<thead>`. No custom props are added.
+ *
+ * @extends HTMLTableSectionElement
+ */
 export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
 
-/** Props for {@link Table.Body} — all `HTMLAttributes` on `<tbody>`. */
+/**
+ * Props for {@link TableBody | `Table.Body`} — all `HTMLAttributes` on the
+ * native `<tbody>`. No custom props are added.
+ *
+ * @extends HTMLTableSectionElement
+ */
 export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
 
-/** Props for {@link Table.Footer} — all `HTMLAttributes` on `<tfoot>`. */
+/**
+ * Props for {@link TableFooter | `Table.Footer`} — all `HTMLAttributes` on
+ * the native `<tfoot>`. No custom props are added.
+ *
+ * @extends HTMLTableSectionElement
+ */
 export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
 
-/** Props for {@link Table.Row} — all `HTMLAttributes` on `<tr>`. */
+/**
+ * Props for {@link TableRow | `Table.Row`} — all `HTMLAttributes` on the
+ * native `<tr>`. No custom props are added.
+ *
+ * @extends HTMLTableRowElement
+ */
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
 
 /**
- * Props for {@link Table.Header} — all `ThHTMLAttributes` on `<th>`.
+ * Props for {@link TableHeader | `Table.Header`} — all `ThHTMLAttributes` on
+ * the native `<th>`, including `colSpan`, `rowSpan`, and `abbr`.
  *
  * The most important prop for accessibility is `scope`: set it to `"col"` for
  * column headers and `"row"` for row headers so assistive technology can
- * associate data cells with the correct header.
+ * associate data cells with the correct header. See the scope table on
+ * {@link TableHeader}.
+ *
+ * @extends HTMLTableCellElement
  */
 export type TableHeaderProps = ThHTMLAttributes<HTMLTableCellElement>;
 
 /**
- * Props for {@link Table.Cell} — all `TdHTMLAttributes` on `<td>`.
+ * Props for {@link TableCell | `Table.Cell`} — all `TdHTMLAttributes` on the
+ * native `<td>`.
  *
  * Includes `colSpan` and `rowSpan` for spanning multiple columns or rows.
+ *
+ * @extends HTMLTableCellElement
  */
 export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
 
 /**
- * Props for {@link Table.ScrollArea} — `children` plus all `HTMLAttributes`
- * on the wrapping `<div>`.
+ * Props for {@link TableScrollArea | `Table.ScrollArea`} — a required
+ * `children` plus all `HTMLAttributes` on the wrapping `<div>`.
  *
- * Any `style` properties you pass are merged with (and take priority over) the
- * base scroll styles (`display: block`, `overflow-x: auto`, `max-width: 100%`).
+ * @extends HTMLDivElement
  */
 export type TableScrollAreaProps = {
+  /** The table (typically a single {@link TableRoot | `Table.Root`}) to
+   * wrap in the horizontally-scrolling container. */
+  children: ReactNode;
+  /**
+   * Merged with (and taking priority over) the base scroll styles
+   * (`display: block`, `overflow-x: auto`, `max-width: 100%`), so
+   * additional styles can be layered on without repeating the scroll
+   * declarations. See {@link TableScrollArea}'s custom-styles example.
+   */
+  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;
-} & HTMLAttributes<HTMLDivElement>;
+  /**
+   * 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 Table.Caption} — `children`, an optional
- * `captionSide`, plus all `HTMLAttributes` on `<caption>`.
+ * 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
+ * `<caption>`.
+ *
+ * @extends HTMLTableCaptionElement
  */
 export type TableCaptionProps = {
+  /** The visible, accessible label for the table. Preferred over
+   * `aria-label`/`aria-labelledby` on the table itself — the browser
+   * programmatically associates a `<caption>` with its `<table>`. */
   children: ReactNode;
   /**
-   * Controls the CSS `caption-side` property.
-   * - `"bottom"` (default) — caption appears below the table.
+   * Controls the CSS `caption-side` property, positioning the caption
+   * above or below the table. See {@link TableCaption}'s placement
+   * examples.
+   * - `"bottom"` — caption appears below the table.
    * - `"top"` — caption appears above the table.
+   * @default "bottom"
    */
   captionSide?: "bottom" | "top";
 } & HTMLAttributes<HTMLTableCaptionElement>;

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

@@ -66,6 +66,8 @@ import type {
  * inherited from the nearest {@link DirectionProvider}, falling back to
  * `"ltr"` when there is no provider.
  *
+ * @extends HTMLDivElement
+ *
  * @example Uncontrolled
  * ```tsx
  * <Tabs.Root defaultValue="overview">
@@ -73,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>
  * ```
  *
@@ -87,7 +89,7 @@ import type {
  *   onValueChange={setTab}
  *   onChange={({ name, index }) => track("tab_view", { name, index })}
  * >
- *   …
+ *   ...
  * </Tabs.Root>
  * ```
  *
@@ -96,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>
@@ -146,6 +148,7 @@ export const TabsRoot: ForwardRefExoticComponent<
   );
 });
 
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
 TabsRoot.displayName = "TabsRoot";
 
 /**
@@ -160,6 +163,8 @@ TabsRoot.displayName = "TabsRoot";
  *
  * **Styling hooks.** `data-orientation="horizontal" | "vertical"`.
  *
+ * @extends HTMLDivElement
+ *
  * @example
  * ```tsx
  * <Tabs.List label="Document sections">
@@ -241,6 +246,8 @@ TabsList.displayName = "TabsList";
  * - `data-disabled=""` when disabled (omitted otherwise), so CSS can target
  *   `[data-disabled]` without the `:disabled` pseudo-class.
  *
+ * @extends HTMLButtonElement
+ *
  * @example Basic usage
  * ```tsx
  * <Tabs.Trigger value="account">Account</Tabs.Trigger>
@@ -345,6 +352,8 @@ TabsTrigger.displayName = "TabsTrigger";
  * - `data-state="active" | "inactive"`.
  * - `data-orientation="horizontal" | "vertical"`.
  *
+ * @extends HTMLDivElement
+ *
  * @example
  * ```tsx
  * <Tabs.Content value="account">