@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/theme-family-switch/theme-family-switch.stories.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import {
+  ThemeFamilySwitch,
+  type ThemeFamilySwitchFamily,
+  type ThemeFamilySwitchMode,
+  type ThemeFamilySwitchProps,
+} from "./theme-family-switch";
+
+/** Sample chips painted from tokens; a real host passes each family's resolved colours. */
+const families: ThemeFamilySwitchFamily[] = [
+  {
+    id: "default",
+    label: "Default",
+    swatch: { background: "var(--background)", primary: "var(--primary)" },
+  },
+  {
+    id: "ocean",
+    label: "Ocean",
+    swatch: { background: "var(--muted)", primary: "var(--chart-1)" },
+  },
+  {
+    id: "graphite",
+    label: "Graphite",
+    swatch: { background: "var(--card)", primary: "var(--chart-2)" },
+  },
+  {
+    id: "qlik",
+    label: "Qlik",
+    swatch: { background: "var(--background)", primary: "var(--chart-3)" },
+  },
+  { id: "heap", label: "Heap", swatch: { background: "var(--muted)", primary: "var(--chart-4)" } },
+];
+
+function Controlled(props: Partial<ThemeFamilySwitchProps>) {
+  const [value, setValue] = useState(props.value ?? "default");
+  const [mode, setMode] = useState<ThemeFamilySwitchMode>(props.mode ?? "light");
+  return (
+    <ThemeFamilySwitch
+      families={families}
+      {...props}
+      value={value}
+      onChange={(id) => {
+        setValue(id);
+        props.onChange?.(id);
+      }}
+      mode={mode}
+      onModeChange={(next) => {
+        setMode(next);
+        props.onModeChange?.(next);
+      }}
+    />
+  );
+}
+
+const meta = {
+  title: "Core/ThemeFamilySwitch",
+  component: ThemeFamilySwitch,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  args: { families, value: "default", onChange: fn(), mode: "light", onModeChange: fn() },
+  render: (args) => <Controlled {...args} />,
+} satisfies Meta<typeof ThemeFamilySwitch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Small: Story = { args: { size: "sm" } };
+
+export const Large: Story = { args: { size: "lg" } };
+
+/** Without `onModeChange` the switch shows the family row only. */
+export const FamiliesOnly: Story = {
+  args: { onModeChange: undefined, mode: undefined },
+  render: (args) => <ThemeFamilySwitch {...args} />,
+};
+
+/** Tab enters the row on the selected chip, arrows move focus without applying, Enter applies. */
+export const KeyboardInteraction: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.tab();
+    const current = canvas.getByRole("radio", { name: "Default" });
+    await expect(current).toHaveFocus();
+    await userEvent.keyboard("{ArrowRight}");
+    const ocean = canvas.getByRole("radio", { name: "Ocean" });
+    await expect(ocean).toHaveFocus();
+    await expect(args.onChange).not.toHaveBeenCalled();
+    await userEvent.keyboard("{Enter}");
+    await expect(args.onChange).toHaveBeenCalledWith("ocean");
+    await expect(ocean).toHaveAttribute("aria-checked", "true");
+    await userEvent.keyboard("{ArrowRight}{ }");
+    await expect(args.onChange).toHaveBeenLastCalledWith("graphite");
+  },
+};

package/src/components/theme-family-switch/theme-family-switch.test.tsx

@@ -0,0 +1,85 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { ThemeFamilySwitch, type ThemeFamilySwitchFamily } from "./theme-family-switch";
+
+const families: ThemeFamilySwitchFamily[] = [
+  { id: "default", label: "Default", swatch: { background: "white", primary: "black" } },
+  { id: "ocean", label: "Ocean", swatch: { background: "azure", primary: "navy" } },
+  { id: "qlik", label: "Qlik", swatch: { background: "white", primary: "green" } },
+];
+
+describe("ThemeFamilySwitch", () => {
+  it("names every chip by its family and marks the active one", () => {
+    render(<ThemeFamilySwitch families={families} value="ocean" onChange={() => {}} />);
+    expect(screen.getByRole("group", { name: "Theme family" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "Ocean" })).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("radio", { name: "Qlik" })).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("paints each chip from the host's swatch values", () => {
+    const { container } = render(
+      <ThemeFamilySwitch families={families} value="default" onChange={() => {}} />,
+    );
+    const chips = container.querySelectorAll<HTMLElement>(
+      '[data-slot="theme-family-switch-swatch"]',
+    );
+    expect(chips).toHaveLength(3);
+    expect(chips[1]?.style.background).toContain("navy");
+  });
+
+  it("roves focus with arrow keys without applying", async () => {
+    const onChange = vi.fn();
+    render(<ThemeFamilySwitch families={families} value="default" onChange={onChange} />);
+    const first = screen.getByRole("radio", { name: "Default" });
+    first.focus();
+    fireEvent.keyDown(first, { key: "ArrowRight" });
+    // Radix moves roving focus on the next tick.
+    await waitFor(() => expect(screen.getByRole("radio", { name: "Ocean" })).toHaveFocus());
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("applies a family on activation, and never un-applies the active one", () => {
+    const onChange = vi.fn();
+    render(<ThemeFamilySwitch families={families} value="default" onChange={onChange} />);
+    fireEvent.click(screen.getByRole("radio", { name: "Qlik" }));
+    expect(onChange).toHaveBeenCalledWith("qlik");
+    fireEvent.click(screen.getByRole("radio", { name: "Default" }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the mode toggle only with onModeChange, and reports the new mode", () => {
+    const onModeChange = vi.fn();
+    const { rerender } = render(
+      <ThemeFamilySwitch families={families} value="default" onChange={() => {}} mode="light" />,
+    );
+    expect(screen.queryByRole("group", { name: "Colour mode" })).toBeNull();
+    rerender(
+      <ThemeFamilySwitch
+        families={families}
+        value="default"
+        onChange={() => {}}
+        mode="light"
+        onModeChange={onModeChange}
+        labels={{ dark: "Dunkel" }}
+      />,
+    );
+    fireEvent.click(screen.getByRole("radio", { name: "Dunkel" }));
+    expect(onModeChange).toHaveBeenCalledWith("dark");
+  });
+
+  it("forwards its ref, merges className and exposes data-slot", () => {
+    const ref = createRef<HTMLDivElement>();
+    const { container } = render(
+      <ThemeFamilySwitch
+        ref={ref}
+        className="probe"
+        families={families}
+        value="default"
+        onChange={() => {}}
+      />,
+    );
+    expect(ref.current).toBe(container.querySelector('[data-slot="theme-family-switch"]'));
+    expect(ref.current).toHaveClass("probe");
+  });
+});

package/src/components/theme-family-switch/theme-family-switch.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
+
+export type ThemeFamilySwitchMode = "light" | "dark";
+export type ThemeFamilySwitchSize = "sm" | "md" | "lg";
+
+/** The two colours a family's chip is painted with — any CSS colour, resolved by the host. */
+export interface ThemeFamilySwatch {
+  /** The family's ground (`--background` in the active mode). */
+  background: string;
+  /** The family's accent (`--primary` in the active mode). */
+  primary: string;
+}
+
+export interface ThemeFamilySwitchFamily {
+  /** Family id — what `value` holds and `onChange` reports. */
+  id: string;
+  /** Display name: the swatch's accessible name and its tooltip wordmark. */
+  label: string;
+  /** Chip colours. The switch never imports a theme; the host passes these in. */
+  swatch: ThemeFamilySwatch;
+}
+
+export interface ThemeFamilySwitchLabels {
+  /** Accessible name of the swatch row. */
+  families: string;
+  /** Accessible name of the mode toggle. */
+  mode: string;
+  light: string;
+  dark: string;
+}
+
+export const DEFAULT_THEME_FAMILY_SWITCH_LABELS: ThemeFamilySwitchLabels = {
+  families: "Theme family",
+  mode: "Colour mode",
+  light: "Light",
+  dark: "Dark",
+};
+
+export interface ThemeFamilySwitchProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "defaultValue"
+> {
+  /** Families in display order. */
+  families: readonly ThemeFamilySwitchFamily[];
+  /** Id of the active family. */
+  value: string;
+  /** A family was applied (click, Enter or Space). Arrow keys only move focus. */
+  onChange: (familyId: string) => void;
+  /** Active mode; with `onModeChange`, renders the Light/Dark toggle after the swatches. */
+  mode?: ThemeFamilySwitchMode;
+  onModeChange?: (mode: ThemeFamilySwitchMode) => void;
+  size?: ThemeFamilySwitchSize;
+  /** UI strings, for localisation. */
+  labels?: Partial<ThemeFamilySwitchLabels>;
+}
+
+/** Hit target per size (the chip sits inside it, inset by the selection border). */
+const ITEM_SIZE: Record<ThemeFamilySwitchSize, string> = {
+  sm: "size-7",
+  md: "size-9",
+  lg: "size-11",
+};
+const MODE_SIZE: Record<ThemeFamilySwitchSize, "sm" | "default" | "lg"> = {
+  sm: "sm",
+  md: "default",
+  lg: "lg",
+};
+
+/**
+ * One control that re-skins a page across theme families (concept §5a): a row of two-tone
+ * family chips with roving focus — Tab enters the row, arrow keys move, Enter/Space apply —
+ * plus an optional Light/Dark toggle. The selected chip carries a solid ring (a shape cue,
+ * not colour alone) and `aria-checked`; each chip is named by its family.
+ */
+export const ThemeFamilySwitch = forwardRef<HTMLDivElement, ThemeFamilySwitchProps>(
+  function ThemeFamilySwitch(
+    {
+      families,
+      value,
+      onChange,
+      mode,
+      onModeChange,
+      size = "md",
+      labels: labelsProp,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const labels = { ...DEFAULT_THEME_FAMILY_SWITCH_LABELS, ...labelsProp };
+    return (
+      <TooltipProvider delayDuration={300}>
+        <div
+          ref={ref}
+          data-slot="theme-family-switch"
+          data-size={size}
+          className={cn("inline-flex flex-wrap items-center gap-3", className)}
+          {...props}
+        >
+          <ToggleGroup
+            type="single"
+            value={value}
+            // Radix reports "" when the pressed item is pressed again — a family stays applied.
+            onValueChange={(next) => {
+              if (next && next !== value) onChange(next);
+            }}
+            aria-label={labels.families}
+            data-slot="theme-family-switch-families"
+            className="flex-wrap gap-1"
+          >
+            {families.map((family) => (
+              <Tooltip key={family.id}>
+                <TooltipTrigger asChild>
+                  <ToggleGroupItem
+                    value={family.id}
+                    aria-label={family.label}
+                    data-slot="theme-family-switch-item"
+                    className={cn(
+                      ITEM_SIZE[size],
+                      "min-w-0 rounded-full border-2 border-transparent p-0.5",
+                      "bg-transparent hover:bg-transparent data-[state=on]:bg-transparent aria-checked:bg-transparent",
+                      "data-[state=on]:border-foreground aria-checked:border-foreground",
+                    )}
+                  >
+                    <span
+                      aria-hidden="true"
+                      data-slot="theme-family-switch-swatch"
+                      className="size-full rounded-full shadow-hairline"
+                      style={{
+                        background: `linear-gradient(135deg, ${family.swatch.background} 0 50%, ${family.swatch.primary} 50% 100%)`,
+                      }}
+                    />
+                  </ToggleGroupItem>
+                </TooltipTrigger>
+                <TooltipContent data-slot="theme-family-switch-wordmark">
+                  {family.label}
+                </TooltipContent>
+              </Tooltip>
+            ))}
+          </ToggleGroup>
+          {mode !== undefined && onModeChange ? (
+            <ToggleGroup
+              type="single"
+              variant="segmented"
+              size={MODE_SIZE[size]}
+              value={mode}
+              onValueChange={(next) => {
+                if (next === "light" || next === "dark") onModeChange(next);
+              }}
+              aria-label={labels.mode}
+              data-slot="theme-family-switch-mode"
+            >
+              <ToggleGroupItem value="light">{labels.light}</ToggleGroupItem>
+              <ToggleGroupItem value="dark">{labels.dark}</ToggleGroupItem>
+            </ToggleGroup>
+          ) : null}
+        </div>
+      </TooltipProvider>
+    );
+  },
+);

package/src/components/theme-switcher/theme-switcher.stories.tsx

@@ -144,3 +144,79 @@ export const RestrictedProvider: Story = {
     await waitFor(() => expect(body.queryByRole("menu")).not.toBeInTheDocument());
   },
 };
+
+/**
+ * Theme families (ADR 0036). Once two or more families declare `family`, the
+ * switcher offers a **Theme** group and — for a family with both schemes — a
+ * separate **Mode** group (Light / Dark / System). `ocean-*` are the
+ * downloadable family in repo-root `themes/ocean/`, whose CSS this Storybook
+ * imports.
+ */
+const oceanThemes = [
+  defineTheme({
+    value: "ocean-light",
+    label: "Ocean Light",
+    dark: false,
+    family: "ocean",
+    familyLabel: "Ocean",
+  }),
+  defineTheme({ value: "ocean-dark", label: "Ocean Dark", dark: true, family: "ocean" }),
+];
+const FAMILY_REGISTRY = [...BUILT_IN_THEME_DEFINITIONS, ...oceanThemes];
+
+export const WithThemeFamilies: Story = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider themes={FAMILY_REGISTRY} defaultTheme="light" storageKey={null}>
+        <div className="flex min-h-32 items-center justify-center">
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const root = canvasElement.ownerDocument.documentElement;
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(canvas.getByRole("button", { name: "Theme" }));
+    await userEvent.click(await body.findByRole("menuitemradio", { name: "Ocean" }));
+    await waitFor(() => expect(root).toHaveAttribute("data-theme", "ocean-light"));
+    // The closing menu keeps the canvas aria-hidden until it unmounts; reopen only after.
+    await waitFor(() => expect(body.queryByRole("menu")).not.toBeInTheDocument());
+    await userEvent.click(await canvas.findByRole("button", { name: "Theme" }));
+    await userEvent.click(await body.findByRole("menuitemradio", { name: "Dark" }));
+    await waitFor(() => expect(root).toHaveAttribute("data-theme", "ocean-dark"));
+    await waitFor(() => expect(body.queryByRole("menu")).not.toBeInTheDocument());
+  },
+};
+
+/**
+ * A family that ships only one scheme shows no Mode group. `Dusk` borrows the
+ * reference `dark` block as its only variant.
+ */
+const duskTheme = defineTheme({
+  value: "dark",
+  label: "Dusk",
+  dark: true,
+  family: "dusk",
+  familyLabel: "Dusk (dark only)",
+});
+
+export const SingleModeFamily: Story = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider themes={[...oceanThemes, duskTheme]} defaultTheme="dark" storageKey={null}>
+        <div className="flex min-h-32 items-center justify-center">
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(canvas.getByRole("button", { name: "Theme" }));
+    await expect(await body.findByRole("menuitemradio", { name: /Dusk/ })).toBeChecked();
+    await expect(body.queryByRole("menuitemradio", { name: "Light" })).not.toBeInTheDocument();
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(body.queryByRole("menu")).not.toBeInTheDocument());
+  },
+};

package/src/components/theme-switcher/theme-switcher.test.tsx

@@ -7,6 +7,7 @@ import {
   BUILT_IN_THEME_DEFINITIONS,
   defineTheme,
   ThemeProvider,
+  useTheme,
 } from "@elabs-ai/components-tokens";
 
 import { ThemeSwitcher } from "./theme-switcher";
@@ -251,3 +252,184 @@ describe("ThemeSwitcher — consumer themes (ADR 0029)", () => {
     );
   });
 });
+
+describe("ThemeSwitcher — theme families (ADR 0036)", () => {
+  const oceanLight = defineTheme({
+    value: "ocean-light",
+    label: "Ocean light",
+    dark: false,
+    family: "ocean",
+    familyLabel: "Ocean",
+  });
+  const oceanDark = defineTheme({
+    value: "ocean-dark",
+    label: "Ocean dark",
+    dark: true,
+    family: "ocean",
+  });
+  const dusk = defineTheme({
+    value: "dusk",
+    label: "Dusk",
+    dark: true,
+    family: "dusk",
+    familyLabel: "Dusk",
+  });
+  const midnight = defineTheme({ value: "midnight", label: "Midnight", dark: true });
+  const daylight = defineTheme({ value: "daylight", label: "Daylight", dark: false });
+  const REGISTRY = [...BUILT_IN_THEME_DEFINITIONS, oceanLight, oceanDark, dusk];
+
+  async function openMenu() {
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    return screen.findByRole("menu");
+  }
+
+  it("BACKWARD COMPAT: the default provider still renders the cycle toggle", () => {
+    setup(<ThemeSwitcher />);
+    expect(screen.getByRole("button", { name: /theme:/i })).toBeInTheDocument();
+  });
+
+  it("BACKWARD COMPAT: built-ins plus one undeclared theme stays a flat dropdown", async () => {
+    render(
+      <ThemeProvider themes={[...BUILT_IN_THEME_DEFINITIONS, midnight]}>
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    const menu = await openMenu();
+    expect(within(menu).queryAllByRole("menuitemradio")).toHaveLength(0);
+    expect(within(menu).getByText("Midnight")).toBeInTheDocument();
+  });
+
+  it("BACKWARD COMPAT: an undeclared two-theme pair stays a light/dark toggle", () => {
+    render(
+      <ThemeProvider themes={[daylight, midnight]} defaultTheme="daylight">
+        <ThemeSwitcher showSystem={false} />
+      </ThemeProvider>,
+    );
+    expect(screen.getByRole("button", { name: /theme:/i })).toHaveAccessibleName(
+      "Theme: Daylight. Activate to switch to Midnight.",
+    );
+  });
+
+  it("offers families and a separate mode group once two families are declared", async () => {
+    render(
+      <ThemeProvider themes={REGISTRY} defaultTheme="light">
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    const menu = await openMenu();
+    const radios = within(menu).getAllByRole("menuitemradio");
+    expect(radios.map((r) => r.textContent)).toEqual([
+      "Default",
+      "Ocean",
+      "Dusk",
+      "Light",
+      "Dark",
+      "System",
+    ]);
+    expect(within(menu).getByRole("menuitemradio", { name: "Default" })).toBeChecked();
+    expect(within(menu).getByRole("menuitemradio", { name: "Light" })).toBeChecked();
+  });
+
+  it("switching family keeps the chosen mode", async () => {
+    render(
+      <ThemeProvider themes={REGISTRY} defaultTheme="dark">
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    await openMenu();
+    await userEvent.click(screen.getByRole("menuitemradio", { name: "Ocean" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("ocean-dark");
+  });
+
+  it("switching mode stays within the family", async () => {
+    render(
+      <ThemeProvider themes={REGISTRY} defaultTheme="ocean-light">
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    await openMenu();
+    await userEvent.click(screen.getByRole("menuitemradio", { name: "Dark" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("ocean-dark");
+  });
+
+  it("hides the mode group for a single-mode family", async () => {
+    render(
+      <ThemeProvider themes={REGISTRY} defaultTheme="dusk">
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    const menu = await openMenu();
+    expect(within(menu).queryByRole("menuitemradio", { name: "Light" })).not.toBeInTheDocument();
+    expect(within(menu).queryByText("Mode")).not.toBeInTheDocument();
+  });
+
+  it("remembers dark across a light-only family", async () => {
+    const sand = defineTheme({ value: "sand", label: "Sand", dark: false, family: "sand" });
+    render(
+      <ThemeProvider themes={[...REGISTRY, sand]} defaultTheme="dark">
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    await openMenu();
+    await userEvent.click(screen.getByRole("menuitemradio", { name: "sand" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("sand");
+    await openMenu();
+    await userEvent.click(screen.getByRole("menuitemradio", { name: "Ocean" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("ocean-dark");
+  });
+
+  it("checks the right family when a second same-scheme variant is active", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const oceanDeep = defineTheme({
+      value: "ocean-deep",
+      label: "Ocean deep",
+      dark: true,
+      family: "ocean",
+    });
+    render(
+      <ThemeProvider themes={[...REGISTRY, oceanDeep]} defaultTheme="ocean-deep">
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    const menu = await openMenu();
+    expect(within(menu).getByRole("menuitemradio", { name: "Ocean" })).toBeChecked();
+    expect(within(menu).getByRole("menuitemradio", { name: "Default" })).not.toBeChecked();
+    warn.mockRestore();
+  });
+
+  it("forgets a remembered mode once another control changes the theme", async () => {
+    function ExternalLight() {
+      const { setTheme } = useTheme();
+      return (
+        <button type="button" onClick={() => setTheme("light")}>
+          External light
+        </button>
+      );
+    }
+    render(
+      <ThemeProvider themes={REGISTRY} defaultTheme="light">
+        <ThemeSwitcher />
+        <ExternalLight />
+      </ThemeProvider>,
+    );
+    await openMenu();
+    await userEvent.click(screen.getByRole("menuitemradio", { name: "Dark" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+    await userEvent.click(screen.getByRole("button", { name: "External light" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+    await openMenu();
+    await userEvent.click(screen.getByRole("menuitemradio", { name: "Ocean" }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("ocean-light");
+  });
+
+  it("forced dropdown mode keeps the flat list even with families", async () => {
+    render(
+      <ThemeProvider themes={REGISTRY}>
+        <ThemeSwitcher mode="dropdown" />
+      </ThemeProvider>,
+    );
+    const menu = await openMenu();
+    expect(within(menu).queryAllByRole("menuitemradio")).toHaveLength(0);
+    expect(within(menu).getByText("Ocean dark")).toBeInTheDocument();
+  });
+});