@elabs-ai/components-ui 4.0.0

package/src/components/team-switcher/team-switcher.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import * as React from "react";
+import { ChevronsUpDown, Plus } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../sidebar";
+import { cn } from "../../lib/cn";
+
+export type TeamSwitcherTeam = {
+  name: string;
+  logo: React.ElementType;
+  plan: string;
+};
+
+export interface TeamSwitcherProps {
+  teams: TeamSwitcherTeam[];
+  /**
+   * Tailwind class for the active-team logo container background.
+   * @default "bg-sidebar-accent text-sidebar-accent-foreground"
+   */
+  logoClassName?: string;
+  className?: string;
+}
+
+/**
+ * Sidebar team/workspace switcher. Shared primitive reconciled from sidebar-02
+ * and sidebar-05 blocks (issue #99). Copy-owned blocks should import this
+ * instead of maintaining local duplicates.
+ */
+export function TeamSwitcher({ teams, logoClassName, className }: TeamSwitcherProps) {
+  const { isMobile } = useSidebar();
+  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+  if (!activeTeam) return null;
+  const Logo = activeTeam.logo;
+
+  return (
+    <SidebarMenu className={className}>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div
+                className={cn(
+                  "flex aspect-square size-8 items-center justify-center rounded-lg",
+                  logoClassName ?? "bg-sidebar-accent text-sidebar-accent-foreground",
+                )}
+              >
+                <Logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-semibold">{activeTeam.name}</span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ms-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">Teams</DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-md border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from "./textarea";

package/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Textarea } from "./textarea";
+
+const meta = {
+  title: "Core/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+  args: { placeholder: "Write a message…", rows: 4 },
+  argTypes: {
+    placeholder: {
+      description: "Placeholder hint shown when the field is empty.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    rows: {
+      description: "Initial visible row count (the element can still be resized by the user).",
+      control: "number",
+      table: { category: "Appearance" },
+    },
+    disabled: {
+      description: "Disables the textarea — cursor-not-allowed, reduced opacity.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    "aria-invalid": {
+      description: "Marks the field invalid — shows destructive ring / border.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Disabled: Story = { args: { disabled: true, value: "Disabled content" } };
+export const Invalid: Story = { args: { "aria-invalid": true, defaultValue: "Invalid content" } };

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <textarea
+      ref={ref}
+      className={cn(
+        "flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-border",
+        "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/theme-switcher/index.ts

@@ -0,0 +1,2 @@
+export { ThemeSwitcher, type ThemeSwitcherProps, type ThemePreference } from "./theme-switcher";
+export { useThemeTransition, type ThemeTransitionEffect } from "./use-theme-transition";

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

@@ -0,0 +1,146 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import {
+  BUILT_IN_THEMES,
+  BUILT_IN_THEME_DEFINITIONS,
+  defineTheme,
+  ThemeProvider,
+} from "@elabs-ai/components-tokens";
+
+import { ThemeSwitcher, type ThemePreference } from "./theme-switcher";
+
+const meta = {
+  title: "Core/ThemeSwitcher",
+  component: ThemeSwitcher,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <div className="flex min-h-32 items-center justify-center">
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  argTypes: {
+    mode: {
+      description: "Force presentation mode; `auto` picks toggle vs dropdown by theme count.",
+      control: "inline-radio",
+      options: ["auto", "toggle", "dropdown"],
+      table: { category: "Behavior" },
+    },
+    effect: {
+      description: "Whole-screen reveal animation used when switching themes.",
+      control: { type: "select" },
+      options: ["polygon", "circle", "circle-blur", "triangle"],
+      table: { category: "Appearance" },
+    },
+    size: {
+      description: "Button size of the trigger.",
+      control: "inline-radio",
+      options: ["sm", "default", "lg"],
+      table: { category: "Appearance" },
+    },
+    showSystem: {
+      description: 'Whether to offer a "System" option that follows the OS color scheme.',
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    themes: {
+      description: "Theme names to offer. ≤2 → toggle; >2 → dropdown.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+  },
+} satisfies Meta<typeof ThemeSwitcher>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Default: the built-in light/dark pair → a cycling light / dark / system toggle. */
+export const Toggle: Story = {
+  play: async ({ canvas }) => {
+    // The toggle button is present and has an accessible label describing the cycle action.
+    const btn = canvas.getByRole("button", { name: /theme/i });
+    await expect(btn).toBeInTheDocument();
+    await expect(btn).toHaveAttribute("aria-label");
+  },
+};
+
+/** Dropdown mode — the list form. (More than two themes picks this automatically.) */
+export const Dropdown: Story = { args: { mode: "dropdown", themes: [...BUILT_IN_THEMES] } };
+
+/** Toggle without the System option (light / dark only). */
+export const ToggleNoSystem: Story = { args: { showSystem: false } };
+
+/** A custom (non-default) theme pair. ≤2 themes still toggle instead of a dropdown. */
+export const CustomPair: Story = { args: { themes: ["dark", "light"] } };
+
+/**
+ * Controlled mode (#366): the caller owns the preference — including
+ * "system" — via `preference`/`onPreferenceChange` instead of the switcher's
+ * own `localStorage`-backed state, e.g. a settings panel synced to a server.
+ * The label below reflects the plain `useState` living OUTSIDE `ThemeSwitcher`.
+ */
+export const Controlled: Story = {
+  render: function ControlledStory(args) {
+    const [preference, setPreference] = useState<ThemePreference>("system");
+    return (
+      <div className="flex flex-col items-center gap-2">
+        <ThemeSwitcher {...args} preference={preference} onPreferenceChange={setPreference} />
+        <p className="text-caption text-muted-foreground">Preference: {preference}</p>
+      </div>
+    );
+  },
+  args: { themes: ["light", "dark"] },
+  play: async ({ canvas, userEvent }) => {
+    await expect(canvas.getByText("Preference: system")).toBeInTheDocument();
+    const trigger = canvas.getByRole("button", { name: /theme: system/i });
+    await userEvent.click(trigger);
+    // "system" cycles to "light" (light) — the caller's own state updates,
+    // and the switcher renders straight from it (never its own storage key).
+    await expect(canvas.getByText("Preference: light")).toBeInTheDocument();
+  },
+};
+
+/**
+ * When a `ThemeProvider` restricts `allowedThemes` (#355), the switcher
+ * automatically narrows to that subset (#384). The provider below registers a
+ * THIRD theme on top of the two reference ones and then allows only Light and
+ * Dark — so the narrowing is observable: `Drafting` is unreachable via any menu
+ * item, "System", or the OS `prefers-color-scheme` listener. The nested
+ * `ThemeProvider` overrides this file's meta-level (unrestricted) one, since
+ * `useTheme()` always reads the nearest ancestor.
+ */
+const draftingTheme = defineTheme({ value: "drafting", label: "Drafting", dark: false });
+const RESTRICTED_REGISTRY = [...BUILT_IN_THEME_DEFINITIONS, draftingTheme];
+
+export const RestrictedProvider: Story = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider
+        themes={RESTRICTED_REGISTRY}
+        allowedThemes={["light", "dark"]}
+        storageKey={null}
+      >
+        <div className="flex min-h-32 items-center justify-center">
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  args: { mode: "dropdown", themes: RESTRICTED_REGISTRY.map((t) => t.value) },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Theme" });
+    await userEvent.click(trigger);
+    const body = within(canvasElement.ownerDocument.body);
+    const dark = await body.findByRole("menuitem", { name: /dark/i });
+    await waitFor(() => expect(dark).toBeVisible());
+    await expect(body.queryByText(/drafting/i)).not.toBeInTheDocument();
+    // Close the menu so the story doesn't end mid-interaction (portaled content
+    // still open at test-end confuses the a11y pass on the surrounding page).
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(body.queryByRole("menu")).not.toBeInTheDocument());
+  },
+};

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

@@ -0,0 +1,253 @@
+import type { ReactElement } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  BUILT_IN_THEMES,
+  BUILT_IN_THEME_DEFINITIONS,
+  defineTheme,
+  ThemeProvider,
+} from "@elabs-ai/components-tokens";
+
+import { ThemeSwitcher } from "./theme-switcher";
+
+const SYSTEM_STORAGE_KEY = "brand-ui-theme-system";
+
+function setup(ui: ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+beforeEach(() => {
+  window.localStorage.clear();
+  document.documentElement.removeAttribute("data-theme");
+});
+
+describe("ThemeSwitcher", () => {
+  it("renders a toggle button for a 2-theme pair", () => {
+    setup(<ThemeSwitcher themes={["light", "dark"]} />);
+    expect(screen.getByRole("button", { name: /theme:/i })).toBeInTheDocument();
+  });
+
+  it("cycles the theme on click (jsdom has no startViewTransition → instant setTheme)", async () => {
+    setup(<ThemeSwitcher themes={["light", "dark"]} showSystem={false} />);
+    await userEvent.click(screen.getByRole("button", { name: /theme:/i }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+  });
+
+  // The >2-themes AUTO-upgrade can't be exercised while only two themes ship
+  // (the reference registry ships two), so this pins the explicit dropdown mode —
+  // the same render path the auto-upgrade selects.
+  it("renders a dropdown trigger in dropdown mode", () => {
+    setup(<ThemeSwitcher mode="dropdown" themes={[...BUILT_IN_THEMES]} />);
+    expect(screen.getByRole("button", { name: "Theme" })).toBeInTheDocument();
+  });
+});
+
+describe("ThemeSwitcher — controlled preference (#366)", () => {
+  it("renders the current preference from the caller's state and reports every pick, writing no localStorage", async () => {
+    const onPreferenceChange = vi.fn();
+    setup(
+      <ThemeSwitcher
+        themes={["light", "dark"]}
+        showSystem={false}
+        preference="light"
+        onPreferenceChange={onPreferenceChange}
+      />,
+    );
+    const btn = screen.getByRole("button", { name: /theme: light/i });
+    await userEvent.click(btn);
+    expect(onPreferenceChange).toHaveBeenCalledTimes(1);
+    expect(onPreferenceChange).toHaveBeenCalledWith("dark");
+    expect(window.localStorage.getItem(SYSTEM_STORAGE_KEY)).toBeNull();
+  });
+
+  it('picking a theme from a "system" preference reports the resolved ThemeName, not "system"', async () => {
+    const onPreferenceChange = vi.fn();
+    setup(
+      <ThemeSwitcher
+        themes={["light", "dark"]}
+        preference="system"
+        onPreferenceChange={onPreferenceChange}
+      />,
+    );
+    // order is [light, dark, system]; "system" cycles to "light".
+    const btn = screen.getByRole("button", { name: /theme: system/i });
+    await userEvent.click(btn);
+    expect(onPreferenceChange).toHaveBeenCalledTimes(1);
+    expect(onPreferenceChange).toHaveBeenCalledWith("light");
+    expect(window.localStorage.getItem(SYSTEM_STORAGE_KEY)).toBeNull();
+  });
+
+  it("the view-transition setter still fires in controlled mode (the theme visibly applies)", async () => {
+    const onPreferenceChange = vi.fn();
+    setup(
+      <ThemeSwitcher
+        themes={["light", "dark"]}
+        showSystem={false}
+        preference="light"
+        onPreferenceChange={onPreferenceChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: /theme: light/i }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+  });
+
+  it("uncontrolled usage (no preference prop) is unchanged: it still tracks its own localStorage key", async () => {
+    setup(<ThemeSwitcher themes={["light", "dark"]} showSystem={false} />);
+    await userEvent.click(screen.getByRole("button", { name: /theme:/i }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+    expect(window.localStorage.getItem(SYSTEM_STORAGE_KEY)).toBe("0");
+  });
+});
+
+describe("ThemeSwitcher — provider-scoped themes (#384)", () => {
+  // The restriction must be tested against a registry BIGGER than the subset,
+  // or the assertion is vacuous: the two reference themes ARE the allowed list,
+  // so a registry of exactly those two would prove nothing about narrowing.
+  const drafting = defineTheme({ value: "drafting", label: "Drafting", dark: false });
+  const REGISTRY = [...BUILT_IN_THEME_DEFINITIONS, drafting];
+  const ALL_NAMES = REGISTRY.map((t) => t.value);
+
+  it("never renders a theme the provider disallows, even when the themes prop lists it", async () => {
+    render(
+      <ThemeProvider themes={REGISTRY} allowedThemes={["light", "dark"]}>
+        <ThemeSwitcher mode="dropdown" themes={ALL_NAMES} />
+      </ThemeProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    const menu = await screen.findByRole("menu");
+    expect(within(menu).queryByText(/drafting/i)).not.toBeInTheDocument();
+    expect(within(menu).getByText("Light")).toBeInTheDocument();
+    expect(within(menu).getByText("Dark")).toBeInTheDocument();
+  });
+
+  it("no rendered control ever applies the disallowed theme (menu items + System)", async () => {
+    render(
+      <ThemeProvider themes={REGISTRY} allowedThemes={["light", "dark"]}>
+        <ThemeSwitcher mode="dropdown" themes={ALL_NAMES} />
+      </ThemeProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    const darkItem = await screen.findByRole("menuitem", { name: /dark/i });
+    await userEvent.click(darkItem);
+    expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    const systemItem = await screen.findByRole("menuitem", { name: /system/i });
+    await userEvent.click(systemItem);
+    expect(["light", "dark"]).toContain(document.documentElement.getAttribute("data-theme"));
+  });
+
+  it("an empty intersection (themes prop entirely disallowed) falls back to the provider's list, never the disallowed prop", async () => {
+    render(
+      <ThemeProvider allowedThemes={["light"]}>
+        <ThemeSwitcher mode="dropdown" themes={["dark"]} />
+      </ThemeProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    const menu = await screen.findByRole("menu");
+    expect(within(menu).queryByText("Dark")).not.toBeInTheDocument();
+    expect(within(menu).getByText("Light")).toBeInTheDocument();
+  });
+
+  it("BACKWARD COMPAT: a default <ThemeSwitcher /> under a non-restricting provider renders exactly today's toggle, not a dropdown", () => {
+    render(
+      <ThemeProvider>
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    // The default 2-theme toggle presentation — never upgraded to a dropdown by
+    // provider.themes (which is the full built-in registry when no
+    // allowedThemes is set).
+    expect(screen.getByRole("button", { name: /theme:/i })).toBeInTheDocument();
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+  });
+
+  it("BACKWARD COMPAT: an explicit 2-theme pair under a non-restricting provider is unaffected", async () => {
+    render(
+      <ThemeProvider>
+        <ThemeSwitcher themes={["light", "dark"]} showSystem={false} />
+      </ThemeProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: /theme:/i }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+  });
+});
+
+/**
+ * The switcher renders the PROVIDER's registry (ADR 0029). Before this it
+ * defaulted to a hard-coded `["light","dark"]` pair, so an app that registered
+ * its own themes got a switcher that could not reach them — and, worse, a
+ * switcher whose `light`/`dark` fallbacks named themes that app may not ship at
+ * all. These drive consumer theme names end to end: label, iconography, the
+ * auto-upgrade to a dropdown, and what "System" resolves to.
+ */
+describe("ThemeSwitcher — consumer themes (ADR 0029)", () => {
+  const midnight = defineTheme({ value: "midnight", label: "Midnight", dark: true });
+  const parchment = defineTheme({ value: "parchment", label: "Parchment", dark: false });
+
+  it("offers the provider's consumer themes with NO themes prop at all", async () => {
+    render(
+      <ThemeProvider themes={[parchment, midnight]} defaultTheme="parchment">
+        <ThemeSwitcher mode="dropdown" />
+      </ThemeProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    const menu = await screen.findByRole("menu");
+    expect(within(menu).getByText("Parchment")).toBeInTheDocument();
+    expect(within(menu).getByText("Midnight")).toBeInTheDocument();
+    // The old hard-coded default pair is not silently in the list.
+    expect(within(menu).queryByText("Light")).not.toBeInTheDocument();
+  });
+
+  it("applies a consumer theme when picked", async () => {
+    render(
+      <ThemeProvider themes={[parchment, midnight]} defaultTheme="parchment">
+        <ThemeSwitcher mode="dropdown" />
+      </ThemeProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    await userEvent.click(await screen.findByRole("menuitem", { name: /midnight/i }));
+    expect(document.documentElement.getAttribute("data-theme")).toBe("midnight");
+  });
+
+  it("auto-upgrades to a dropdown once the registry passes two themes", async () => {
+    render(
+      <ThemeProvider themes={[...BUILT_IN_THEME_DEFINITIONS, midnight]}>
+        <ThemeSwitcher />
+      </ThemeProvider>,
+    );
+    // Three registered themes → the dropdown trigger, not the cycle toggle.
+    expect(screen.getByRole("button", { name: "Theme" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /theme:/i })).not.toBeInTheDocument();
+  });
+
+  it("announces the consumer theme's OWN label in toggle mode, never a name the app lacks", async () => {
+    render(
+      <ThemeProvider themes={[parchment, midnight]} defaultTheme="parchment">
+        <ThemeSwitcher showSystem={false} />
+      </ThemeProvider>,
+    );
+    // The pre-0029 code labelled the roles ("Theme: light"), naming a theme this
+    // app does not ship.
+    const button = screen.getByRole("button", { name: /theme:/i });
+    expect(button).toHaveAccessibleName(/Theme: Parchment\. Activate to switch to Midnight\./i);
+    await userEvent.click(button);
+    expect(document.documentElement.getAttribute("data-theme")).toBe("midnight");
+  });
+
+  it('resolves "System" to a registered theme of the right darkness, not to "light"/"dark"', async () => {
+    render(
+      <ThemeProvider themes={[parchment, midnight]} defaultTheme="parchment">
+        <ThemeSwitcher mode="dropdown" />
+      </ThemeProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Theme" }));
+    await userEvent.click(await screen.findByRole("menuitem", { name: /system/i }));
+    // jsdom's matchMedia stub reports no dark preference, so the light-side
+    // registry entry wins — the point is that it is a REGISTERED name.
+    expect(["parchment", "midnight"]).toContain(
+      document.documentElement.getAttribute("data-theme"),
+    );
+  });
+});