@elabs-ai/components-ui 4.1.0 → 5.0.0

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type CSSProperties } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, waitFor } from "storybook/test";
 import { Button } from "../button";
@@ -265,3 +265,97 @@ export const ProgrammaticActivation: Story = {
     await expect(window.scrollY).toBe(0);
   },
 };
+
+/**
+ * `variant="underline"` — line tabs: a transparent row over a 1px rule, the
+ * active tab marked by a 2px `--primary` underline and foreground ink. Label
+ * weight follows the theme's `--control-weight`. Keyboard behaviour is Radix's,
+ * identical to the segmented default.
+ */
+export const Underline: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[28rem]">
+      <TabsList variant="underline">
+        <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>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const overview = canvas.getByRole("tab", { name: "Overview" });
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+
+    // The underline is a 2px border on every trigger (transparent at rest), so
+    // activating a tab never changes its box.
+    await expect(getComputedStyle(activity).borderBottomWidth).toBe("2px");
+    await expect(getComputedStyle(overview).borderBottomColor).not.toBe(
+      getComputedStyle(activity).borderBottomColor,
+    );
+    const restingHeight = activity.getBoundingClientRect().height;
+
+    await userEvent.click(overview);
+    await userEvent.keyboard("{ArrowRight}");
+    await expect(activity).toHaveFocus();
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    await expect(activity.getBoundingClientRect().height).toBe(restingHeight);
+    // 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());
+  },
+};
+
+/**
+ * Token-driven default (#392): NO `variant` prop on `TabsList` — an ancestor
+ * setting `--tabs-variant: underline` renders the exact same look as the
+ * explicit `Underline` story above, entirely via CSS (a theme could set this
+ * token instead of a region wrapper). Neither the list nor its triggers
+ * carry a `data-variant` attribute here.
+ */
+export const TokenDrivenUnderline: Story = {
+  render: () => (
+    <div className="w-[28rem]" style={{ "--tabs-variant": "underline" } as CSSProperties}>
+      <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, userEvent }) => {
+    const list = canvas.getByRole("tablist");
+    const overview = canvas.getByRole("tab", { name: "Overview" });
+    await expect(list).not.toHaveAttribute("data-variant");
+    await expect(overview).not.toHaveAttribute("data-variant");
+
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+    await expect(getComputedStyle(activity).borderBottomWidth).toBe("2px");
+
+    await userEvent.click(overview);
+    await userEvent.keyboard("{ArrowRight}");
+    await expect(activity).toHaveFocus();
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    const panel = await canvas.findByText("Activity panel.");
+    await waitFor(() => expect(panel).toBeVisible());
+  },
+};

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

@@ -76,6 +76,99 @@ describe("Tabs", () => {
   // 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("creates one shared observer pair per list, not one per trigger (#387)", () => {
+    const originalMutationObserver = globalThis.MutationObserver;
+    const originalResizeObserver = globalThis.ResizeObserver;
+    let mutationObserverCount = 0;
+    let resizeObserverCount = 0;
+
+    class CountingMutationObserver extends originalMutationObserver {
+      constructor(...args: ConstructorParameters<typeof MutationObserver>) {
+        super(...args);
+        mutationObserverCount += 1;
+      }
+    }
+    class CountingResizeObserver extends originalResizeObserver {
+      constructor(...args: ConstructorParameters<typeof ResizeObserver>) {
+        super(...args);
+        resizeObserverCount += 1;
+      }
+    }
+    globalThis.MutationObserver = CountingMutationObserver as typeof MutationObserver;
+    globalThis.ResizeObserver = CountingResizeObserver as typeof ResizeObserver;
+
+    try {
+      render(
+        <Tabs defaultValue="a">
+          <TabsList>
+            <TabsTrigger value="a">A</TabsTrigger>
+            <TabsTrigger value="b">B</TabsTrigger>
+            <TabsTrigger value="c">C</TabsTrigger>
+            <TabsTrigger value="d">D</TabsTrigger>
+          </TabsList>
+          <TabsContent value="a">Panel A</TabsContent>
+        </Tabs>,
+      );
+      // 4 triggers in the strip. Before the fix, each trigger owned its own
+      // MutationObserver AND ResizeObserver (4 of each here — the review's
+      // "20 callbacks per resize" was measured on a 20-tab strip).
+      const fourTriggerMutationCount = mutationObserverCount;
+      const fourTriggerResizeCount = resizeObserverCount;
+      expect(fourTriggerResizeCount).toBeGreaterThan(0);
+
+      mutationObserverCount = 0;
+      resizeObserverCount = 0;
+      render(
+        <Tabs defaultValue="a">
+          <TabsList>
+            <TabsTrigger value="a">A</TabsTrigger>
+            <TabsTrigger value="b">B</TabsTrigger>
+            <TabsTrigger value="c">C</TabsTrigger>
+            <TabsTrigger value="d">D</TabsTrigger>
+            <TabsTrigger value="e">E</TabsTrigger>
+            <TabsTrigger value="f">F</TabsTrigger>
+            <TabsTrigger value="g">G</TabsTrigger>
+            <TabsTrigger value="h">H</TabsTrigger>
+          </TabsList>
+          <TabsContent value="a">Panel A</TabsContent>
+        </Tabs>,
+      );
+      // The list owns a FIXED number of observers regardless of trigger
+      // count — doubling the trigger count must not double it.
+      expect(mutationObserverCount).toBe(fourTriggerMutationCount);
+      expect(resizeObserverCount).toBe(fourTriggerResizeCount);
+    } finally {
+      globalThis.MutationObserver = originalMutationObserver;
+      globalThis.ResizeObserver = originalResizeObserver;
+    }
+  });
+
+  it("renders no data-variant on the list or its triggers when variant is unset (token-driven)", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList data-testid="list">
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+      </Tabs>,
+    );
+    expect(screen.getByTestId("list")).not.toHaveAttribute("data-variant");
+    expect(screen.getByRole("tab", { name: "A" })).not.toHaveAttribute("data-variant");
+  });
+
+  it("keeps data-variant on the list and its triggers when variant is explicit", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList data-testid="list" variant="underline">
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+      </Tabs>,
+    );
+    expect(screen.getByTestId("list")).toHaveAttribute("data-variant", "underline");
+    expect(screen.getByRole("tab", { name: "A" })).toHaveAttribute("data-variant", "underline");
+  });
+
   it("renders TabsList as a bounded scroll container with safe centering", () => {
     render(
       <Tabs defaultValue="a">

package/src/components/tabs/tabs.tsx

@@ -1,5 +1,9 @@
+"use client";
+
 import {
+  createContext,
   forwardRef,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -7,6 +11,7 @@ import {
   type ElementRef,
 } from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, type VariantProps } from "class-variance-authority";
 import { useReducedMotion } from "@elabs-ai/components-tokens";
 import { cn } from "../../lib/cn";
 import { mergeRefs } from "../../lib/merge-refs";
@@ -67,92 +72,225 @@ function scrollTriggerIntoStrip(trigger: HTMLElement, behavior: ScrollBehavior)
  * first tab off the left edge once the set overflows; `safe` falls back to
  * start-alignment on overflow while staying visually identical when the
  * strip fits (see #344).
+ *
+ * Token-driven default (`--tabs-variant`, default `segmented`): when the
+ * caller passes NO `variant`, `TabsList`/`TabsTrigger` render with no
+ * `data-variant` attribute at all — the `segmented` cva branch below, plus
+ * these `tabs-underline:`-prefixed overrides, which the `tabs-underline`
+ * custom variant (`themes.css`) only activates via a container style query
+ * on an ancestor's `--tabs-variant`. An explicit `variant` prop always
+ * renders `data-variant`, which the same custom variant's `:not([data-variant])`
+ * guard excludes — so these overrides are inert on an explicit strip and its
+ * own `underline` branch (below) renders unchanged. Literal strings, not
+ * built via interpolation — see `badge.tsx`'s note on the same rule.
  */
-export const TabsList = forwardRef<
-  ElementRef<typeof TabsPrimitive.List>,
-  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(function TabsList({ className, ...props }, ref) {
-  return (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        "inline-flex h-9 max-w-full items-center justify-center-safe overflow-x-auto rounded-lg bg-muted p-1 text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
+const TABS_UNDERLINE_LIST_OVERRIDE =
+  "tabs-underline:flex tabs-underline:h-auto tabs-underline:w-full tabs-underline:justify-start tabs-underline:rounded-none tabs-underline:bg-transparent tabs-underline:p-0 tabs-underline:border-b tabs-underline:border-rule";
+
+const TABS_UNDERLINE_TRIGGER_OVERRIDE =
+  "tabs-underline:h-12 tabs-underline:rounded-none tabs-underline:border-b-(length:--tabs-indicator-width) tabs-underline:border-transparent tabs-underline:px-4 tabs-underline:py-0 tabs-underline:hover:text-foreground tabs-underline:focus-ring-inset tabs-underline:focus-visible:ring-offset-0 tabs-underline:data-[state=active]:bg-transparent tabs-underline:data-[state=active]:shadow-none tabs-underline:data-[state=active]:border-primary";
+
+export const tabsListVariants = cva(
+  "max-w-full items-center overflow-x-auto text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        // Recessed pill track with a raised active segment. Also the
+        // TOKEN-DRIVEN DEFAULT's base — see `TABS_UNDERLINE_LIST_OVERRIDE`.
+        segmented: cn(
+          "inline-flex h-9 justify-center-safe rounded-lg bg-muted p-1",
+          TABS_UNDERLINE_LIST_OVERRIDE,
+        ),
+        // Line tabs: a transparent start-aligned row over a 1px rule; the active
+        // tab's underline sits on top of it (see `tabsTriggerVariants`).
+        underline: "flex w-full justify-start border-b border-rule",
+      },
+    },
+    defaultVariants: { variant: "segmented" },
+  },
+);
+
+export const tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap text-body font-control transition-colors duration-fast disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        // Also the TOKEN-DRIVEN DEFAULT's base — see `TABS_UNDERLINE_TRIGGER_OVERRIDE`.
+        segmented: cn(
+          "rounded-control px-3 py-1",
+          // `ring-offset-1`, not `-2`: the compound indicator's reach is
+          // `ring-offset` + 2px ring + 1px contour, and `TabsList` is an
+          // `overflow-x-auto` strip with `p-1` (4px). At offset 2 the reach is 5px
+          // and the scroll box clips the contour on three sides (#67 fix round 2,
+          // measured on `patterns-templates-starters-object-detail-hub--default` tab stop
+          // 9); at offset 1 it is exactly 4px and the loop closes.
+          "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "data-[state=active]:bg-surface-elevated data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+          "data-[state=active]:font-tabs-active",
+          TABS_UNDERLINE_TRIGGER_OVERRIDE,
+        ),
+        underline: cn(
+          // The underline is a bottom BORDER inside the fixed height, transparent
+          // at rest, so activation never shifts layout. No negative margin to
+          // overlap the list's rule: the list scrolls (`overflow-x-auto`), which
+          // would clip anything hanging past its padding box. The strip has no
+          // padding for an outer ring either, so the indicator is drawn inset.
+          "h-12 rounded-none border-b-(length:--tabs-indicator-width) border-transparent px-4 hover:text-foreground",
+          "focus-ring-inset",
+          "data-[state=active]:border-primary data-[state=active]:text-foreground",
+          "data-[state=active]:font-tabs-active",
+        ),
+      },
+    },
+    defaultVariants: { variant: "segmented" },
+  },
+);
+
+export type TabsVariant = NonNullable<VariantProps<typeof tabsListVariants>["variant"]>;
+
+/**
+ * The list owns the variant; its triggers read it, so a strip never mixes
+ * two. `undefined` = the caller passed no `variant` on `TabsList` — the
+ * token-driven default (`--tabs-variant`): neither the list nor its triggers
+ * render a `data-variant` attribute, so the `tabs-underline:` custom
+ * variant's container style query decides the look.
+ */
+const TabsVariantContext = createContext<TabsVariant | undefined>(undefined);
+
+export interface TabsListProps
+  extends
+    ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {}
+
+export const TabsList = forwardRef<ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
+  function TabsList({ className, variant, ...props }, ref) {
+    // cva's `VariantProps` types `variant` as possibly `null` (an explicit
+    // opt-out); normalize it to `undefined` so it matches `TabsVariant |
+    // undefined` — same DOM/CSS effect either way (no `data-variant`).
+    const explicitVariant = variant ?? undefined;
+    const resolved = explicitVariant ?? "segmented";
+    const innerRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMemo(() => mergeRefs(ref, innerRef), [ref]);
+    // Honours the in-app tri-state motion preference on `ThemeProvider` as well
+    // as the OS setting, and degrades to OS-only outside a provider.
+    const reducedMotion = useReducedMotion();
+
+    // Keep the tab that BECOMES active inside the strip's visible bounds.
+    //
+    // ONE set of observers per LIST, not one per trigger (#387 perf finding:
+    // N triggers used to mean N independent `MutationObserver`s (each
+    // watching only its own node) plus N independent `ResizeObserver`s (each
+    // ALSO watching this same shared strip) — a resize of a 20-tab strip fired
+    // 20 redundant callbacks. Watching the list's subtree in one callback
+    // gets the same behaviour for the cost of one.
+    //
+    // Watching attributes rather than reacting to a render is still
+    // load-bearing: Radix flips `data-state` on the trigger it renders, and
+    // only ITS OWN context consumer re-renders — this component does not, so
+    // a render-driven effect would never observe an activation at all
+    // (measured: 8 effect runs for 8 triggers at mount, zero on any later
+    // activation). A MutationObserver fires on a genuine inactive → active
+    // TRANSITION and never at mount, which is what stops a freshly-mounted
+    // Tabs from scrolling anything (#344 shipped a version that scrolled the
+    // page 900px on every mount).
+    useEffect(() => {
+      const node = innerRef.current;
+      if (!node) return;
+
+      const scrollActiveIntoView = () => {
+        const active = node.querySelector<HTMLElement>(
+          '[data-slot="tabs-trigger"][data-state="active"]',
+        );
+        if (active) scrollTriggerIntoStrip(active, reducedMotion ? "auto" : "smooth");
+      };
+
+      const activationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          const el = mutation.target as HTMLElement;
+          if (el.getAttribute("data-state") === "active") {
+            scrollTriggerIntoStrip(el, reducedMotion ? "auto" : "smooth");
+            break;
+          }
+        }
+      });
+      activationObserver.observe(node, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["data-state"],
+      });
+
+      // A relayout AFTER the scroll invalidates the target it was computed
+      // from: a webfont swapping in on a cold load (measured — a
+      // mono-everything theme's wider mono face left the last tab 45px
+      // outside the strip), or the strip itself being resized. One
+      // `ResizeObserver` instance covers both — it watches the strip AND
+      // every trigger inside it, not a second instance per trigger.
+      let resizeObserver: ResizeObserver | undefined;
+      if (typeof ResizeObserver === "function") {
+        resizeObserver = new ResizeObserver(scrollActiveIntoView);
+        resizeObserver.observe(node);
+        for (const trigger of node.querySelectorAll<HTMLElement>('[data-slot="tabs-trigger"]')) {
+          resizeObserver.observe(trigger);
+        }
+      }
+
+      // A dynamic tab list can add/remove triggers later — keep the single
+      // `ResizeObserver`'s target set in sync instead of spinning up a new
+      // observer per trigger mount.
+      const childListObserver = new MutationObserver((mutations) => {
+        if (!resizeObserver) return;
+        for (const mutation of mutations) {
+          mutation.addedNodes.forEach((added) => {
+            if (added instanceof HTMLElement && added.matches('[data-slot="tabs-trigger"]')) {
+              resizeObserver!.observe(added);
+            }
+          });
+          mutation.removedNodes.forEach((removed) => {
+            if (removed instanceof HTMLElement && removed.matches('[data-slot="tabs-trigger"]')) {
+              resizeObserver!.unobserve(removed);
+            }
+          });
+        }
+      });
+      childListObserver.observe(node, { childList: true, subtree: true });
+
+      return () => {
+        activationObserver.disconnect();
+        resizeObserver?.disconnect();
+        childListObserver.disconnect();
+      };
+    }, [reducedMotion]);
+
+    return (
+      // The normalized `explicitVariant` (undefined when unset), not
+      // `resolved` — an undefined Provider value is what lets a
+      // variant-less `TabsTrigger` also omit its own `data-variant` below.
+      <TabsVariantContext.Provider value={explicitVariant}>
+        <TabsPrimitive.List
+          ref={mergedRef}
+          data-slot="tabs-list"
+          data-variant={explicitVariant}
+          className={cn(tabsListVariants({ variant: resolved }), className)}
+          {...props}
+        />
+      </TabsVariantContext.Provider>
+    );
+  },
+);
 
 export const TabsTrigger = forwardRef<
   ElementRef<typeof TabsPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(function TabsTrigger({ className, ...props }, ref) {
-  const innerRef = useRef<HTMLButtonElement>(null);
-  const mergedRef = useMemo(() => mergeRefs(ref, innerRef), [ref]);
-  // Honours the in-app tri-state motion preference on `ThemeProvider` as well
-  // as the OS setting, and degrades to OS-only outside a provider.
-  const reducedMotion = useReducedMotion();
-
-  // Keep the tab that BECOMES active inside the strip's visible bounds.
-  //
-  // Watching the attribute rather than reacting to a render is load-bearing on
-  // both counts:
-  //  - Radix flips `data-state` on the trigger it renders INSIDE this wrapper,
-  //    and only its own context consumer re-renders — this component does not.
-  //    A render-driven effect therefore never observes an activation at all
-  //    (measured: 8 effect runs for 8 triggers at mount, zero on any later
-  //    activation), so the scroll only ever ran when the CONSUMER's own state
-  //    changed.
-  //  - A MutationObserver fires on a genuine inactive → active TRANSITION and
-  //    never at mount, which is what stops a freshly-mounted Tabs from
-  //    scrolling anything (#344 shipped a version that scrolled the page 900px
-  //    on every mount).
-  useEffect(() => {
-    const node = innerRef.current;
-    if (!node) return;
-
-    const scrollIfActive = () => {
-      if (node.getAttribute("data-state") !== "active") return;
-      scrollTriggerIntoStrip(node, reducedMotion ? "auto" : "smooth");
-    };
-
-    const observer = new MutationObserver(scrollIfActive);
-    observer.observe(node, { attributes: true, attributeFilter: ["data-state"] });
-
-    // A relayout AFTER the scroll invalidates the target it was computed from:
-    // a webfont swapping in on a cold load (measured — a mono-everything theme's
-    // wider mono face left the last tab 45px outside the strip), or the strip
-    // being resized. Re-measure whenever the tab or the strip changes size;
-    // the delta check makes every unaffected pass a no-op.
-    const resizeObserver =
-      typeof ResizeObserver === "function" ? new ResizeObserver(scrollIfActive) : undefined;
-    resizeObserver?.observe(node);
-    const strip = node.closest<HTMLElement>('[role="tablist"]');
-    if (strip) resizeObserver?.observe(strip);
-
-    return () => {
-      observer.disconnect();
-      resizeObserver?.disconnect();
-    };
-  }, [reducedMotion]);
+  const variant = use(TabsVariantContext);
+  const resolved = variant ?? "segmented";
 
   return (
     <TabsPrimitive.Trigger
-      ref={mergedRef}
-      className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-colors duration-fast",
-        // `ring-offset-1`, not `-2`: the compound indicator's reach is
-        // `ring-offset` + 2px ring + 1px contour, and `TabsList` is an
-        // `overflow-x-auto` strip with `p-1` (4px). At offset 2 the reach is 5px
-        // and the scroll box clips the contour on three sides (#67 fix round 2,
-        // measured on `patterns-templates-object-detail-hub--default` tab stop
-        // 9); at offset 1 it is exactly 4px and the loop closes.
-        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-        "disabled:pointer-events-none disabled:opacity-50",
-        "data-[state=active]:bg-surface-elevated data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-        className,
-      )}
+      ref={ref}
+      data-slot="tabs-trigger"
+      data-variant={variant}
+      className={cn(tabsTriggerVariants({ variant: resolved }), className)}
       {...props}
     />
   );

package/src/components/tag-input/tag-input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // a2ui.exposed: yes
 import {
   forwardRef,
@@ -229,7 +231,7 @@ export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(function TagIn
           aria-invalid={error ? "true" : undefined}
           data-slot="input-group-control"
           className={cn(
-            "min-w-[6rem] flex-1 bg-transparent text-sm outline-none",
+            "min-w-[6rem] flex-1 bg-transparent text-body outline-none",
             "placeholder:text-muted-foreground",
             "disabled:cursor-not-allowed disabled:opacity-50",
           )}
@@ -241,7 +243,7 @@ export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(function TagIn
       </InputGroup>
       {error && (
         // #124: running text (the validation message) — ink rung.
-        <p role="alert" className="text-xs text-destructive-text">
+        <p role="alert" className="text-meta text-destructive-text">
           {error}
         </p>
       )}

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

@@ -82,9 +82,9 @@ export function TeamSwitcher({ teams, logoClassName, className }: TeamSwitcherPr
               >
                 <Logo className="size-4" />
               </div>
-              <div className="grid flex-1 text-start text-sm leading-tight group-data-[collapsible=icon]:hidden">
+              <div className="grid flex-1 text-start text-body leading-tight group-data-[collapsible=icon]:hidden">
                 <span className="truncate font-semibold">{activeTeam.name}</span>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
+                <span className="truncate text-meta">{activeTeam.plan}</span>
               </div>
               {/* Decorative, so it simply goes. */}
               <ChevronsUpDown className="ms-auto group-data-[collapsible=icon]:hidden" />
@@ -96,7 +96,7 @@ export function TeamSwitcher({ teams, logoClassName, className }: TeamSwitcherPr
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-xs text-muted-foreground">
+            <DropdownMenuLabel className="text-meta text-muted-foreground">
               {t("ui.teamSwitcher.label")}
             </DropdownMenuLabel>
             {teams.map((team, index) => (

package/src/components/textarea/textarea.tsx

@@ -11,9 +11,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
     <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",
+        "flex min-h-20 w-full rounded-control border border-input bg-input-background px-3 py-2 text-body shadow-input transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
         "placeholder:text-muted-foreground",
-        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-border",
         "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive",
         className,

package/src/components/theme-family-switch/index.ts

@@ -0,0 +1,10 @@
+export {
+  DEFAULT_THEME_FAMILY_SWITCH_LABELS,
+  ThemeFamilySwitch,
+  type ThemeFamilySwatch,
+  type ThemeFamilySwitchFamily,
+  type ThemeFamilySwitchLabels,
+  type ThemeFamilySwitchMode,
+  type ThemeFamilySwitchProps,
+  type ThemeFamilySwitchSize,
+} from "./theme-family-switch";