@elabs-ai/components-ui 4.0.0

package/src/components/switch/switch.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { Switch } from "./switch";
+import { Label } from "../label";
+const meta = {
+  title: "Forms/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  argTypes: {
+    checked: {
+      description: "Controlled checked state.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    defaultChecked: {
+      description: "Uncontrolled initial checked state.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    disabled: {
+      description: "Disables the switch.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    required: {
+      description: "Marks the switch as required in a form context.",
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    onCheckedChange: {
+      description: "Called when the checked state changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Switch id="airplane" defaultChecked />
+      <Label htmlFor="airplane">Airplane mode</Label>
+    </div>
+  ),
+  // Starts on (defaultChecked); clicking toggles the reflected aria-checked state.
+  play: async ({ canvas, userEvent }) => {
+    const sw = canvas.getByRole("switch");
+    await expect(sw).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(sw);
+    await expect(sw).toHaveAttribute("aria-checked", "false");
+  },
+};

package/src/components/switch/switch.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Switch } from "./switch";
+describe("Switch", () => {
+  it("toggles on click", async () => {
+    render(<Switch aria-label="s" />);
+    const sw = screen.getByRole("switch", { name: "s" });
+    await userEvent.click(sw);
+    expect(sw).toBeChecked();
+  });
+});

package/src/components/switch/switch.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../../lib/cn";
+
+export const Switch = forwardRef<
+  ElementRef<typeof SwitchPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(function Switch({ className, ...props }, ref) {
+  return (
+    <SwitchPrimitive.Root
+      ref={ref}
+      className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors duration-fast ease-standard",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          "pointer-events-none block size-4 rounded-full bg-background shadow-xs ring-0 transition-transform duration-fast ease-standard",
+          "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+});

package/src/components/table/index.ts

@@ -0,0 +1,10 @@
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from "./table";

package/src/components/table/table.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+const meta = {
+  title: "Data/Table",
+  component: Table,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Low-level static table primitives (header/body/row/cell styling). For sorting, filtering, " +
+          "pagination, virtualization, row selection and column management, use the TanStack-powered " +
+          "DataTable (see Data/DataTable, @elabs-ai/components-data) instead.",
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      description: "Additional CSS classes applied to the `<table>` element.",
+      control: "text",
+      table: { category: "Styling" },
+    },
+    children: {
+      description: "Table content — compose with TableHeader, TableBody, TableRow, TableCell, etc.",
+      control: false,
+      table: { category: "Content" },
+    },
+  },
+} satisfies Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Service</TableHead>
+          <TableHead>Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>api-gateway</TableCell>
+          <TableCell>healthy</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>billing</TableCell>
+          <TableCell>degraded</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};

package/src/components/table/table.test.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Table, TableBody, TableCell, TableRow } from "./table";
+describe("Table", () => {
+  it("renders cells", () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>Alpha</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+  });
+});

package/src/components/table/table.tsx

@@ -0,0 +1,106 @@
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type TdHTMLAttributes,
+  type ThHTMLAttributes,
+} from "react";
+import { cn } from "../../lib/cn";
+
+export const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(function Table(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-body", className)} {...props} />
+    </div>
+  );
+});
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableHeader({ className, ...props }, ref) {
+  // border-border-strong: the header-row bottom divider is the ONLY structural
+  // cue between the header and the first data row on a shared card/background
+  // surface (TableHeader itself carries no fill). Decision test: "If deleted,
+  // could a sighted user still tell header from body?" No → border-strong.
+  return (
+    <thead
+      ref={ref}
+      className={cn("[&_tr]:border-b [&_tr]:border-border-strong", className)}
+      {...props}
+    />
+  );
+});
+export const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableBody({ className, ...props }, ref) {
+  return <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+});
+export const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableFooter({ className, ...props }, ref) {
+  // border-t stays on plain `border`: the footer's bg-surface-muted/50 fill is
+  // a redundant cue — deleting the border still leaves a visible region change.
+  // Decision test: "If deleted, could a sighted user still tell footer from
+  // body?" Yes (fill differs) → redundant boundary → border.
+  return (
+    <tfoot
+      ref={ref}
+      className={cn("border-t bg-surface-muted/50 font-medium", className)}
+      {...props}
+    />
+  );
+});
+export const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
+  function TableRow({ className, ...props }, ref) {
+    return (
+      <tr
+        ref={ref}
+        className={cn(
+          // border-border-strong: each row divider is the ONLY structural cue
+          // between adjacent rows on a shared card/background surface (no fill
+          // alternation on the plain Table primitive). Decision test: "If
+          // deleted, could a sighted user still tell the two rows apart?" No
+          // (no fill change) → load-bearing → border-strong.
+          "border-b border-border-strong transition-colors duration-fast ease-standard hover:bg-surface-muted/50 data-[state=selected]:bg-accent",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+export const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
+  function TableHead({ className, ...props }, ref) {
+    return (
+      <th
+        ref={ref}
+        className={cn(
+          "h-10 px-3 text-start align-middle font-medium text-muted-foreground",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+export const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
+  function TableCell({ className, ...props }, ref) {
+    return <td ref={ref} className={cn("px-3 py-2 align-middle", className)} {...props} />;
+  },
+);
+export const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  HTMLAttributes<HTMLTableCaptionElement>
+>(function TableCaption({ className, ...props }, ref) {
+  return (
+    <caption
+      ref={ref}
+      className={cn("mt-4 text-body text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});

package/src/components/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,267 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import { Button } from "../button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+const meta = {
+  title: "Core/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      description: "Uncontrolled: the tab value active on first render.",
+      control: "text",
+      table: { category: "State" },
+    },
+    value: {
+      description: "Controlled active tab value.",
+      control: "text",
+      table: { category: "State" },
+    },
+    onValueChange: {
+      description: "Callback fired when the active tab changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    orientation: {
+      description: "Layout orientation of the tab list.",
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      table: { category: "Appearance" },
+    },
+    activationMode: {
+      description: "`automatic` activates on focus; `manual` requires an explicit click/Enter.",
+      control: { type: "radio" },
+      options: ["automatic", "manual"],
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-80">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" className="text-body text-muted-foreground">
+        Overview panel.
+      </TabsContent>
+      <TabsContent value="activity" className="text-body text-muted-foreground">
+        Activity panel.
+      </TabsContent>
+      <TabsContent value="settings" className="text-body text-muted-foreground">
+        Settings panel.
+      </TabsContent>
+    </Tabs>
+  ),
+  // Selecting a tab reveals its panel and marks the trigger aria-selected — the
+  // panel content is unmounted until its tab is active, so this proves the
+  // switch actually happened.
+  play: async ({ canvas, userEvent }) => {
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+    await userEvent.click(activity);
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    // The panel mounts on switch and fades in (gated entrance) — wait for it to settle.
+    const panel = await canvas.findByText("Activity panel.");
+    await waitFor(() => expect(panel).toBeVisible());
+  },
+};
+
+const OVERFLOW_TABS = Array.from({ length: 8 }, (_, i) => `tab-${i + 1}`);
+
+/**
+ * An 8-tab strip inside a 320px-wide container (phone-width) — narrower than
+ * the strip's natural width, so it must scroll rather than clip. Confirms
+ * every tab is reachable by keyboard: repeated `ArrowRight` walks focus/
+ * selection all the way to the last tab, and the newly-active tab scrolls
+ * itself into the container's visible bounds (real layout — this assertion
+ * only means anything in a real browser, which is how `test-storybook` /
+ * `run-story-tests` execute it).
+ */
+export const OverflowScrollable: Story = {
+  render: () => (
+    <div className="w-[320px]">
+      <Tabs defaultValue="tab-1">
+        <TabsList>
+          {OVERFLOW_TABS.map((value, i) => (
+            <TabsTrigger key={value} value={value}>
+              Tab {i + 1}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {OVERFLOW_TABS.map((value, i) => (
+          <TabsContent key={value} value={value} className="text-body text-muted-foreground">
+            Panel {i + 1}.
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const tablist = canvas.getByRole("tablist");
+    // The strip is wider than its 320px container — it must scroll, not clip.
+    await expect(tablist.scrollWidth).toBeGreaterThan(tablist.clientWidth);
+
+    const first = canvas.getByRole("tab", { name: "Tab 1" });
+    // `justify-center-safe` (not `justify-center`) — the initially-active
+    // first tab must be fully within the visible scroll area on mount, not
+    // stranded off the left edge by a naive center-alignment of the
+    // overflowing strip.
+    await waitFor(() => {
+      const firstRect = first.getBoundingClientRect();
+      const containerRect = tablist.getBoundingClientRect();
+      expect(firstRect.left).toBeGreaterThanOrEqual(containerRect.left - 1);
+      expect(firstRect.right).toBeLessThanOrEqual(containerRect.right + 1);
+    });
+
+    first.focus();
+    await expect(first).toHaveFocus();
+
+    for (let i = 0; i < OVERFLOW_TABS.length - 1; i++) {
+      await userEvent.keyboard("{ArrowRight}");
+    }
+
+    const last = canvas.getByRole("tab", { name: "Tab 8" });
+    await waitFor(() => expect(last).toHaveFocus());
+    await expect(last).toHaveAttribute("aria-selected", "true");
+
+    // Real-layout assertion: the newly-active tab scrolled itself into the
+    // scroll container's visible bounds (a ±1px tolerance for rounding).
+    await waitFor(
+      () => {
+        const triggerRect = last.getBoundingClientRect();
+        const containerRect = tablist.getBoundingClientRect();
+        expect(triggerRect.left).toBeGreaterThanOrEqual(containerRect.left - 1);
+        expect(triggerRect.right).toBeLessThanOrEqual(containerRect.right + 1);
+      },
+      { timeout: 3000 },
+    );
+  },
+};
+
+/**
+ * Regression guard: a strip that FITS its container renders exactly as
+ * before — `justify-center-safe` behaves identically to `justify-center`
+ * when there's nothing to overflow, so no scrollbar appears — AND mounting it
+ * moves NOTHING.
+ *
+ * The tabs sit below a tall spacer inside a scroll region, out of view. The
+ * first cut of #344 called `Element.scrollIntoView()` on mount, which walks
+ * every scrollable ancestor: it scrolled this region (and the page) to reveal
+ * the tabs nobody had asked for. Asserting "no scrollbar" alone did not catch
+ * that — asserting the scroll POSITION does.
+ */
+export const WideViewportFits: Story = {
+  render: () => (
+    <div data-testid="scroll-region" className="h-[220px] w-[640px] overflow-y-auto">
+      <p className="h-[600px] text-body text-muted-foreground">
+        This scroll region starts at the top, and must stay there. The tabs below are deliberately
+        out of view on mount.
+      </p>
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="activity">Activity</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview" className="text-body text-muted-foreground">
+          Overview panel.
+        </TabsContent>
+        <TabsContent value="activity" className="text-body text-muted-foreground">
+          Activity panel.
+        </TabsContent>
+        <TabsContent value="settings" className="text-body text-muted-foreground">
+          Settings panel.
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const tablist = canvas.getByRole("tablist");
+    await waitFor(() => expect(tablist.scrollWidth).toBeLessThanOrEqual(tablist.clientWidth + 1));
+
+    // A smooth scroll is asynchronous — wait long enough for a stray one to
+    // land before asserting it never happened.
+    const region = canvas.getByTestId("scroll-region");
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    await expect(region.scrollTop).toBe(0);
+    await expect(window.scrollY).toBe(0);
+  },
+};
+
+/**
+ * The scroll-on-activation behaviour proved WITHOUT the browser's own
+ * focus-scrolling doing the work: a button beside the strip sets the value
+ * programmatically, so the newly-active tab is never focused and nothing but
+ * `TabsTrigger`'s own effect can bring it into view.
+ *
+ * The strip starts at scroll 0 (mount is not an activation), then moves — and
+ * only the strip moves.
+ */
+export const ProgrammaticActivation: Story = {
+  render: function ProgrammaticActivationStory() {
+    const [value, setValue] = useState("tab-1");
+    return (
+      <div className="w-[320px]">
+        <Button
+          type="button"
+          size="sm"
+          variant="secondary"
+          className="mb-2"
+          onClick={() => setValue("tab-8")}
+        >
+          Jump to Tab 8
+        </Button>
+        <Tabs value={value} onValueChange={setValue}>
+          <TabsList>
+            {OVERFLOW_TABS.map((tab, i) => (
+              <TabsTrigger key={tab} value={tab}>
+                Tab {i + 1}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {OVERFLOW_TABS.map((tab, i) => (
+            <TabsContent key={tab} value={tab} className="text-body text-muted-foreground">
+              Panel {i + 1}.
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+  play: async ({ canvas, userEvent }) => {
+    const tablist = canvas.getByRole("tablist");
+    // Mount is a state, not an activation: the strip never scrolled itself.
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    await expect(tablist.scrollLeft).toBe(0);
+
+    await userEvent.click(canvas.getByRole("button", { name: "Jump to Tab 8" }));
+
+    const last = canvas.getByRole("tab", { name: "Tab 8" });
+    await expect(last).toHaveAttribute("aria-selected", "true");
+    // The activated tab scrolled itself into the STRIP's visible bounds…
+    await waitFor(
+      () => {
+        const triggerRect = last.getBoundingClientRect();
+        const stripRect = tablist.getBoundingClientRect();
+        expect(triggerRect.left).toBeGreaterThanOrEqual(stripRect.left - 1);
+        expect(triggerRect.right).toBeLessThanOrEqual(stripRect.right + 1);
+      },
+      { timeout: 3000 },
+    );
+    await expect(tablist.scrollLeft).toBeGreaterThan(0);
+    // …and only the strip: the page itself never moved.
+    await expect(window.scrollY).toBe(0);
+  },
+};

package/src/components/tabs/tabs.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("Tabs", () => {
+  // jsdom implements neither `Element.prototype.scrollIntoView` nor a real
+  // layout, so a component that calls a scroll API unconditionally CRASHES
+  // every jsdom consumer of @elabs-ai/components-ui (it did: 8/8
+  // of @elabs-ai/components-editor's CodeWorkspace tests died on
+  // `node.scrollIntoView is not a function`). There is deliberately no stub in
+  // `vitest.setup.ts` — this renders on bare jsdom, which is the assertion.
+  it("mounts under jsdom without calling any scroll API", async () => {
+    const scrollTo = vi.fn();
+    const originalScrollTo = Element.prototype.scrollTo;
+    Element.prototype.scrollTo = scrollTo;
+    try {
+      // No stub in vitest.setup.ts — the guard has to live in the component.
+      expect(Element.prototype.scrollIntoView).toBeUndefined();
+      render(
+        <Tabs defaultValue="a">
+          <TabsList>
+            <TabsTrigger value="a">A</TabsTrigger>
+            <TabsTrigger value="b">B</TabsTrigger>
+          </TabsList>
+          <TabsContent value="a">Panel A</TabsContent>
+        </Tabs>,
+      );
+      // Mount is a state, not an activation transition: nothing scrolls. (The
+      // observers are asynchronous — let a macrotask pass before asserting.)
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(scrollTo).not.toHaveBeenCalled();
+    } finally {
+      Element.prototype.scrollTo = originalScrollTo;
+    }
+  });
+
+  // The activation path itself is layout-dependent (jsdom reports every
+  // scrollWidth/clientWidth as 0, so the overflow gate always short-circuits);
+  // it is measured for real in the `ProgrammaticActivation` /
+  // `OverflowScrollable` Storybook interaction tests.
+  it("does not throw when a tab is activated under jsdom", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+        <TabsContent value="b">Panel B</TabsContent>
+      </Tabs>,
+    );
+    await user.click(screen.getByRole("tab", { name: "B" }));
+    expect(await screen.findByText("Panel B")).toBeInTheDocument();
+  });
+
+  it("switches the active panel", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+        <TabsContent value="b">Panel B</TabsContent>
+      </Tabs>,
+    );
+    expect(screen.getByText("Panel A")).toBeInTheDocument();
+  });
+
+  // Cheap class-level regression guard for #344: TabsList must be a scroll
+  // container (`overflow-x-auto`, bounded by `max-w-full`) with the
+  // overflow-safe centering utility, not the plain `justify-center` that
+  // strands the first tab off-screen once the strip overflows. The real
+  // scroll-into-view/320px-container behavior is layout-dependent and is
+  // covered by the `OverflowScrollable` Storybook interaction test instead
+  // (jsdom doesn't lay out real scroll geometry).
+  it("renders TabsList as a bounded scroll container with safe centering", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList data-testid="list">
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+      </Tabs>,
+    );
+    const list = screen.getByTestId("list");
+    expect(list.className).toContain("overflow-x-auto");
+    expect(list.className).toContain("max-w-full");
+    expect(list.className).toContain("justify-center-safe");
+    expect(list.className).not.toMatch(/(?<!-)justify-center(?!-safe)/);
+  });
+});