@primitiv-ui/react 0.1.29 → 0.1.30

package/src/SplitButton/__tests__/SplitButton.disabled.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SplitButton } from "../SplitButton";
+
+describe("SplitButton — disabled", () => {
+  it("disables both halves when the group is disabled", () => {
+    render(
+      <SplitButton disabled>
+        <SplitButton.Action>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu />
+      </SplitButton>,
+    );
+
+    expect(screen.getByRole("group")).toHaveAttribute("data-disabled", "");
+    expect(
+      screen.getByRole("button", { name: "Squash and merge" }),
+    ).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "More merge options" }),
+    ).toBeDisabled();
+  });
+
+  it("disables one half independently, leaving the other interactive", () => {
+    render(
+      <SplitButton>
+        <SplitButton.Action disabled>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu />
+      </SplitButton>,
+    );
+
+    expect(screen.getByRole("group")).not.toHaveAttribute("data-disabled");
+    expect(
+      screen.getByRole("button", { name: "Squash and merge" }),
+    ).toHaveAttribute("data-disabled", "");
+    expect(
+      screen.getByRole("button", { name: "More merge options" }),
+    ).toBeEnabled();
+  });
+
+  it("disables only the menu half when the trigger is disabled", () => {
+    render(
+      <SplitButton>
+        <SplitButton.Action>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger disabled aria-label="More merge options" />
+        <SplitButton.Menu />
+      </SplitButton>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Squash and merge" }),
+    ).toBeEnabled();
+    expect(
+      screen.getByRole("button", { name: "More merge options" }),
+    ).toHaveAttribute("data-disabled", "");
+  });
+
+  it("re-propagates when the group's disabled flips after mount", () => {
+    const markup = (disabled: boolean) => (
+      <SplitButton disabled={disabled}>
+        <SplitButton.Action>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu />
+      </SplitButton>
+    );
+    const { rerender } = render(markup(false));
+
+    rerender(markup(true));
+
+    expect(
+      screen.getByRole("button", { name: "Squash and merge" }),
+    ).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "More merge options" }),
+    ).toBeDisabled();
+  });
+});

package/src/SplitButton/__tests__/SplitButton.error-handling.test.tsx

@@ -0,0 +1,29 @@
+import { render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { SplitButton } from "../SplitButton";
+
+const outsideRoot =
+  "SplitButton sub-components must be rendered inside a <SplitButton.Root>.";
+
+describe("SplitButton — error handling", () => {
+  beforeEach(() => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("throws when SplitButton.Action is used outside SplitButton.Root", () => {
+    expect(() =>
+      render(<SplitButton.Action>Orphan</SplitButton.Action>),
+    ).toThrowError(outsideRoot);
+  });
+
+  it("throws when SplitButton.Trigger is used outside SplitButton.Root", () => {
+    expect(() => render(<SplitButton.Trigger aria-label="Orphan" />)).toThrowError(
+      outsideRoot,
+    );
+  });
+});

package/src/SplitButton/__tests__/SplitButton.keyboard-interaction.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { SplitButton } from "../SplitButton";
+
+describe("SplitButton — keyboard interaction", () => {
+  it("opens the menu from the action with ArrowDown and focuses the first item", async () => {
+    const user = userEvent.setup();
+    render(
+      <SplitButton>
+        <SplitButton.Action>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu>
+          <SplitButton.Item>Create a merge commit</SplitButton.Item>
+          <SplitButton.Item>Rebase and merge</SplitButton.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+
+    await user.tab();
+    await user.keyboard("{ArrowDown}");
+
+    expect(
+      screen.getByRole("button", { name: "More merge options" }),
+    ).toHaveAttribute("aria-expanded", "true");
+    expect(
+      screen.getByRole("menuitem", {
+        name: "Create a merge commit",
+        hidden: true,
+      }),
+    ).toHaveFocus();
+  });
+
+  it("leaves the menu closed for other keys, and still runs the action's own handler", async () => {
+    const user = userEvent.setup();
+    const onKeyDown = vi.fn();
+    render(
+      <SplitButton>
+        <SplitButton.Action onKeyDown={onKeyDown}>
+          Squash and merge
+        </SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu>
+          <SplitButton.Item>Create a merge commit</SplitButton.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+
+    await user.tab();
+    await user.keyboard("{ArrowUp}");
+
+    expect(onKeyDown).toHaveBeenCalledOnce();
+    expect(screen.getByRole("group")).toHaveAttribute("data-state", "closed");
+  });
+});

package/src/SplitButton/__tests__/SplitButton.state-modes.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Dropdown } from "../../Dropdown/index.ts";
+import { SplitButton } from "../SplitButton";
+
+describe("SplitButton — state modes", () => {
+  it("starts open in uncontrolled mode when defaultOpen is set", () => {
+    render(
+      <SplitButton defaultOpen>
+        <SplitButton.Action>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu>
+          <SplitButton.Item>Rebase and merge</SplitButton.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+
+    expect(screen.getByRole("group")).toHaveAttribute("data-state", "open");
+  });
+
+  it("defers to the parent in controlled mode", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <SplitButton open={false} onOpenChange={onOpenChange}>
+        <SplitButton.Action>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu>
+          <SplitButton.Item>Rebase and merge</SplitButton.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "More merge options" }));
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(screen.getByRole("group")).toHaveAttribute("data-state", "closed");
+  });
+
+  it("passes the reading direction down to menus composed from Dropdown", async () => {
+    const user = userEvent.setup();
+    render(
+      <SplitButton dir="rtl" defaultOpen>
+        <SplitButton.Action>Squash and merge</SplitButton.Action>
+        <SplitButton.Trigger aria-label="More merge options" />
+        <SplitButton.Menu>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Merge strategies</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <SplitButton.Item>Rebase and merge</SplitButton.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+
+    await user.keyboard("{ArrowLeft}");
+
+    expect(
+      screen.getByRole("menuitem", {
+        name: "Merge strategies",
+        hidden: true,
+      }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+});

package/src/SplitButton/index.ts

@@ -0,0 +1,2 @@
+export { SplitButton } from "./SplitButton";
+export type * from "./types";

package/src/SplitButton/types.ts

@@ -0,0 +1,186 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+
+import type { Direction } from "../DirectionProvider/index.ts";
+import type {
+  DropdownContentProps,
+  DropdownItemProps,
+  DropdownSeparatorProps,
+  DropdownTriggerProps,
+} from "../Dropdown/types";
+
+/**
+ * Shared base for both {@link SplitButtonRootProps} variants — the native
+ * `<div>` attributes (minus the component-owned `role` and the narrowed
+ * `dir`) plus the `asChild` escape hatch, reading direction, and the
+ * group-level `disabled`.
+ */
+export type SplitButtonRootBaseProps = Omit<
+  ComponentProps<"div">,
+  "role" | "dir"
+> & {
+  /**
+   * The widget's parts — typically one
+   * {@link SplitButtonActionProps | `SplitButton.Action`}, one
+   * {@link SplitButtonTriggerProps | `SplitButton.Trigger`}, and one
+   * {@link SplitButtonMenuProps | `SplitButton.Menu`}.
+   */
+  children?: ReactNode;
+  /** Forwarded to the underlying `HTMLDivElement` (or to the `asChild`
+   * element). */
+  ref?: Ref<HTMLDivElement>;
+  /**
+   * When `true`, Root delegates rendering to a single consumer-supplied
+   * element via the {@link Slot} pattern instead of the default `<div>`;
+   * `role="group"`, `data-state`, `data-disabled` and the remaining props are
+   * merged onto it.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Reading direction for the menu. Only affects which arrow key opens or
+   * closes a submenu composed from `Dropdown.Sub` — `ArrowRight` opens in
+   * `"ltr"`, `ArrowLeft` in `"rtl"`. When omitted it is inherited from the
+   * nearest {@link DirectionProvider}, falling back to `"ltr"`.
+   */
+  dir?: Direction;
+  /**
+   * Disables the whole widget — both the primary action and the menu trigger
+   * become non-interactive, and `data-disabled=""` is set on the group. OR-ed
+   * with each half's own `disabled`, so a disabled group can never be
+   * overridden back to enabled by a part.
+   * @default false
+   */
+  disabled?: boolean;
+};
+
+/**
+ * Uncontrolled variant of {@link SplitButtonRootProps}: the component owns the
+ * menu's open state. Pass `defaultOpen` (or omit it); `onOpenChange` is
+ * optional and `open` is forbidden.
+ */
+export type SplitButtonRootUncontrolledProps = SplitButtonRootBaseProps & {
+  /**
+   * Whether the menu is open on first render. Omit to start closed. The
+   * component owns the state thereafter.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /** Forbidden in uncontrolled mode — use `defaultOpen` instead. */
+  open?: never;
+  /**
+   * Called whenever a user-driven transition opens or closes the menu
+   * (trigger click, `ArrowDown` on the action, Escape, outside click,
+   * selection). Optional in uncontrolled mode.
+   */
+  onOpenChange?: (open: boolean) => void;
+};
+
+/**
+ * Controlled variant of {@link SplitButtonRootProps}: the parent owns the
+ * menu's open state. Pass `open` and `onOpenChange` together; `defaultOpen` is
+ * forbidden.
+ */
+export type SplitButtonRootControlledProps = SplitButtonRootBaseProps & {
+  /** Forbidden in controlled mode — use `open` instead. */
+  defaultOpen?: never;
+  /**
+   * Whether the menu is currently open. Must be kept in sync by the parent via
+   * `onOpenChange`; the component never mutates it internally.
+   */
+  open: boolean;
+  /**
+   * Called whenever a user-driven transition would open or close the menu. The
+   * parent is responsible for reflecting the new value back into `open`.
+   * Required in controlled mode.
+   */
+  onOpenChange: (open: boolean) => void;
+};
+
+/**
+ * Props for {@link SplitButtonRoot | `SplitButton.Root`} — the
+ * controlled/uncontrolled discriminated union pairing
+ * {@link SplitButtonRootUncontrolledProps} with
+ * {@link SplitButtonRootControlledProps}, plus the shared group props.
+ */
+export type SplitButtonRootProps =
+  | SplitButtonRootUncontrolledProps
+  | SplitButtonRootControlledProps;
+
+/**
+ * Props for the internal frame component that renders the group element. Root
+ * splits it out so the frame sits *inside* the `Dropdown.Root` it renders and
+ * can therefore read the menu's open state.
+ *
+ * @internal
+ */
+export type SplitButtonFrameProps = Omit<
+  SplitButtonRootBaseProps,
+  "dir" | "disabled"
+> & {
+  /** Already defaulted by Root, so the frame receives a definite boolean. */
+  disabled: boolean;
+};
+
+/**
+ * Value published by `SplitButtonContext` — the derived ids that wire the
+ * trigger's accessible name to the action, plus the group's disabled flag.
+ *
+ * @internal
+ */
+export type SplitButtonContextValue = {
+  /** DOM id applied to {@link SplitButtonActionProps | `SplitButton.Action`};
+   * referenced by the trigger's derived `aria-labelledby`. */
+  actionId: string;
+  /** DOM id applied to {@link SplitButtonTriggerProps | `SplitButton.Trigger`};
+   * the self-reference half of its derived `aria-labelledby`. */
+  triggerId: string;
+  /** Whether the whole widget is disabled (Root's `disabled` prop). */
+  disabled: boolean;
+};
+
+/**
+ * Props for {@link SplitButtonAction | `SplitButton.Action`} — the native
+ * `<button>` attributes minus `id`, which the component owns because the menu
+ * trigger's accessible name references it.
+ */
+export type SplitButtonActionProps = Omit<ComponentProps<"button">, "id"> & {
+  /** The action's visible label. Keep it real text — the menu trigger borrows
+   * it for its own accessible name. */
+  children?: ReactNode;
+  /** Forwarded to the underlying `HTMLButtonElement` (or to the `asChild`
+   * element). */
+  ref?: Ref<HTMLButtonElement>;
+  /**
+   * When `true`, renders the consumer's element instead of `<button>` via the
+   * {@link Slot} pattern. `type="button"` is **not** forwarded in this mode —
+   * the child owns its own type semantics.
+   * @default false
+   */
+  asChild?: boolean;
+};
+
+/**
+ * Props for {@link SplitButtonTrigger | `SplitButton.Trigger`} —
+ * {@link DropdownTriggerProps} minus `id`, which the component owns because
+ * its derived `aria-labelledby` self-references it. Supply `aria-label` or
+ * `aria-labelledby` to opt out of the derived name.
+ */
+export type SplitButtonTriggerProps = Omit<DropdownTriggerProps, "id">;
+
+/**
+ * Props for {@link SplitButtonMenu | `SplitButton.Menu`} — identical to
+ * {@link DropdownContentProps}; the menu *is* a `Dropdown.Content`.
+ */
+export type SplitButtonMenuProps = DropdownContentProps;
+
+/**
+ * Props for {@link SplitButtonItem | `SplitButton.Item`} — identical to
+ * {@link DropdownItemProps}.
+ */
+export type SplitButtonItemProps = DropdownItemProps;
+
+/**
+ * Props for {@link SplitButtonSeparator | `SplitButton.Separator`} — identical
+ * to {@link DropdownSeparatorProps}.
+ */
+export type SplitButtonSeparatorProps = DropdownSeparatorProps;

package/src/Switch/README.md

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

package/src/Switch/Switch.tsx

@@ -25,7 +25,7 @@ function dataStateOf(checked: boolean) {
  *
  * Props routing: `className` / `style` style the **track** (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 switch.
  *
  * Supports two state modes, statically discriminated at the type level:
@@ -59,7 +59,7 @@ function dataStateOf(checked: boolean) {
  * ```tsx
  * const [enabled, setEnabled] = useState(false);
  *
- * <Switch.Root checked={enabled} onCheckedChange={setEnabled} aria-label="…">
+ * <Switch.Root checked={enabled} onCheckedChange={setEnabled} aria-label="...">
  *   <Switch.Thumb />
  * </Switch.Root>
  * ```

package/src/Switch/types.ts

@@ -8,7 +8,7 @@ import { ChangeEventHandler, ComponentProps, ReactNode, Ref } from "react";
  *
  * Prop routing: `className` / `style` style the **track** (the visible
  * `<label>`, since the input is visually hidden); every other prop — `name`,
- * `value`, `id`, `aria-*`, `required`, `disabled`, `ref`, … — spreads onto the
+ * `value`, `id`, `aria-*`, `required`, `disabled`, `ref`, ... — spreads onto the
  * hidden `<input>`, because semantically the Root *is* the switch.
  */
 export type SwitchRootBaseProps = Omit<

package/src/Table/README.md

@@ -51,6 +51,9 @@ import { Table } from "@primitiv-ui/react";
 | `Table.Cell`       | `<td>`      | Data cell. Accepts `colSpan` and `rowSpan`.                                                 |
 | `Table.ScrollArea` | `<div>`     | Horizontal-scroll wrapper — see [Responsive scrolling](#responsive-scrolling).              |
 | `Table.Caption`    | `<caption>` | Visible table label — see [Caption](#caption).                                              |
+| `Table.Expandable` | *nothing*   | Pairs a row with its detail row — see [Expandable rows](#expandable-rows).                   |
+| `Table.ExpandTrigger` | `<button>` | The row's disclosure control; owns `aria-expanded` / `aria-controls`.                     |
+| `Table.DetailRow`  | `<tr>`      | The revealed panel, as a `<td colSpan>`. `gutter` offsets it to the first data column.       |
 
 ## Accessible headers
 
@@ -96,14 +99,14 @@ the table via the CSS `caption-side` property. Defaults to `"bottom"`.
   /* Caption below table (default) */
 }
 <Table.Root>
-  <Table.Caption>Q1 sales by region</Table.Caption>…
+  <Table.Caption>Q1 sales by region</Table.Caption>...
 </Table.Root>;
 
 {
   /* Caption above table */
 }
 <Table.Root>
-  <Table.Caption captionSide="top">Q1 sales by region</Table.Caption>…
+  <Table.Caption captionSide="top">Q1 sales by region</Table.Caption>...
 </Table.Root>;
 ```
 
@@ -111,7 +114,7 @@ When a visible caption is not desirable, use `aria-label` directly on
 `Table.Root` instead:
 
 ```tsx
-<Table.Root aria-label="Q1 sales by region">…</Table.Root>
+<Table.Root aria-label="Q1 sales by region">...</Table.Root>
 ```
 
 ## Responsive scrolling
@@ -124,7 +127,7 @@ narrow viewports instead of overflowing or compressing columns.
 
 ```tsx
 <Table.ScrollArea>
-  <Table.Root>…</Table.Root>
+  <Table.Root>...</Table.Root>
 </Table.ScrollArea>
 ```
 
@@ -133,7 +136,7 @@ base scroll styles, so you can layer additional styles freely:
 
 ```tsx
 <Table.ScrollArea style={{ borderRadius: "8px" }}>
-  <Table.Root>…</Table.Root>
+  <Table.Root>...</Table.Root>
 </Table.ScrollArea>
 ```
 
@@ -144,14 +147,14 @@ separating logical row groups within a single table:
 
 ```tsx
 <Table.Root>
-  <Table.Head>…</Table.Head>
+  <Table.Head>...</Table.Head>
   <Table.Body>
     {/* Group 1 */}
-    <Table.Row>…</Table.Row>
+    <Table.Row>...</Table.Row>
   </Table.Body>
   <Table.Body>
     {/* Group 2 */}
-    <Table.Row>…</Table.Row>
+    <Table.Row>...</Table.Row>
   </Table.Body>
 </Table.Root>
 ```
@@ -203,3 +206,102 @@ caption {
 ---
 
 [Back to @primitiv-ui/react](../../README.md)
+
+## Expandable rows
+
+A row can open onto a detail panel. This is a **disclosure**, not a
+[treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/): expanding into
+hierarchical child *rows* is a different pattern with a full cell-navigation
+keyboard model, and is deliberately out of scope here.
+
+`Table.Expandable` renders no DOM of its own — it is a context provider, so both
+`<tr>`s stay direct children of the `<tbody>` and the table's structure is
+untouched.
+
+```tsx
+<Table.Body>
+  <Table.Expandable expanded={open} onExpandedChange={setOpen}>
+    <Table.Row>
+      <Table.Cell>
+        <Table.ExpandTrigger>
+          <ChevronIcon aria-hidden="true" />
+          <span className="sr-only">Show details for Ada Lovelace</span>
+        </Table.ExpandTrigger>
+      </Table.Cell>
+      <Table.Cell>Ada Lovelace</Table.Cell>
+    </Table.Row>
+
+    <Table.DetailRow colSpan={2}>
+      <ContributorDetail />
+    </Table.DetailRow>
+  </Table.Expandable>
+</Table.Body>
+```
+
+Controlled via `expanded` + `onExpandedChange` (what an external table engine
+drives), or uncontrolled with `defaultExpanded`.
+
+### Why the state is on the button
+
+`role="row"` does list `aria-expanded` among its supported properties, but a
+**button's** expanded state is announced universally while a row's is only
+reliably announced inside a `role="treegrid"`. So the button owns
+`aria-expanded` and `aria-controls`, and the detail row publishes the matching
+`id`.
+
+Give the trigger a name that identifies **its row**. A column of buttons all
+called "Expand" is the same defect as a column of checkboxes all called
+"Select": obvious on screen, useless in a screen reader's element list.
+
+### `colSpan` is required
+
+It must cover every column the table renders, control columns included. It is a
+prop rather than a count taken from context on purpose: counting would mean the
+table registering its own columns, and an external engine already knows the
+number (TanStack Table: `table.getVisibleLeafColumns().length`).
+
+### `gutter` aligns the panel with the first data column
+
+A panel that starts at the table's edge, under the checkbox, reads as a new
+section of the table rather than as an opened row. `gutter` is how many leading
+columns to leave empty — the control columns in front of the data:
+
+```tsx
+{/* select + expand columns, then eight data columns */}
+<Table.DetailRow colSpan={10} gutter={2}>
+```
+
+The panel spans what remains, so `colSpan` keeps its meaning: the table's full
+column count, gutter included.
+
+It renders **one** empty `<td colSpan={gutter}>`, not `gutter` of them — a
+spanning cell takes the full width of the columns it covers, so the alignment is
+identical and the row gains a single blank cell instead of several.
+
+Aligning by empty cell rather than by a CSS indent is the point: the browser's
+own table layout resolves the width, so it stays exact across every size,
+density and control-column set. Indenting instead means summing control widths
+and paddings by hand, which is right at one size and wrong at the other four —
+measured drift of 7-21px across xs...xl before this existed.
+
+### `forceMount` and the row count
+
+By default a collapsed detail row is `hidden`, so it is absent from the
+accessibility tree — which matters more here than on a `<div>`-based disclosure,
+because a mounted `<tr>` is still a **row**: 24 data rows each with a
+force-mounted detail row would announce 48.
+
+Pass `forceMount` to keep it mounted so CSS can transition it. While collapsed it
+then carries `aria-hidden="true"`, so the announced row count stays truthful
+either way.
+
+### Styling hooks
+
+`data-state="open" | "closed"` on both the trigger and the detail row.
+
+Note that the `display: grid` 0fr↔1fr open/close technique used by Accordion and
+Collapsible **cannot** go on the `<tr>` or the `<td>` — `display: grid` on either
+takes it out of the table layout algorithm and column alignment collapses with
+it. Put the animated wrapper inside the cell, and zero the cell's block padding
+so a closed row leaves no padded band. The registry `data-table` component does
+this for you.