@elabs-ai/components-ui 4.2.0 → 5.1.0

package/src/components/app-shell/app-shell.test.tsx

@@ -26,6 +26,173 @@ describe("AppShell", () => {
     // establishes the fixed-height viewport, not some inner wrapper.
     expect(ref.current?.className).toContain("h-dvh");
   });
+
+  /**
+   * With none of the new composition props passed, the render is exactly what
+   * it always has been: no header, no brand slot, no secondary panel, and the
+   * `sidebar` wrapper carries no attribute this change did not add before.
+   */
+  it("renders unchanged with none of the new composition props passed", () => {
+    const { container } = render(
+      <AppShell mainId="main" sidebar={<div data-testid="sidebar-marker">Nav</div>}>
+        Content
+      </AppShell>,
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.className).toBe("flex h-dvh w-full overflow-hidden bg-background text-foreground");
+    expect(container.querySelector("header")).toBeNull();
+    expect(container.querySelector('[data-slot="app-shell-brand"]')).toBeNull();
+    expect(container.querySelector('[data-slot="app-shell-secondary-panel"]')).toBeNull();
+    const sidebarWrapper = screen.getByTestId("sidebar-marker").parentElement;
+    expect(sidebarWrapper?.className).toBe("hidden md:flex");
+  });
+});
+
+describe("AppShell — brandPlacement", () => {
+  it('renders no brand slot with brandPlacement left at its default ("sidebar")', () => {
+    render(
+      <AppShell mainId="main" brand={<span>Acme Inc.</span>}>
+        Content
+      </AppShell>,
+    );
+    expect(screen.queryByText("Acme Inc.")).not.toBeInTheDocument();
+  });
+
+  it('composes a TopNav with the brand leading it when brandPlacement="topbar"', () => {
+    const { container } = render(
+      <AppShell mainId="main" brandPlacement="topbar" brand={<span>Acme Inc.</span>}>
+        Content
+      </AppShell>,
+    );
+    const header = container.querySelector("header");
+    expect(header).not.toBeNull();
+    const brand = container.querySelector('[data-slot="app-shell-brand"]');
+    expect(brand).not.toBeNull();
+    expect(brand).toHaveTextContent("Acme Inc.");
+  });
+
+  it("has no effect when a caller-supplied topNav is passed instead of topBar", () => {
+    const { container } = render(
+      <AppShell
+        mainId="main"
+        brandPlacement="topbar"
+        brand={<span>Acme Inc.</span>}
+        topNav={<div data-testid="custom-top-nav">Custom</div>}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.queryByText("Acme Inc.")).not.toBeInTheDocument();
+    expect(screen.getByTestId("custom-top-nav")).toBeInTheDocument();
+    // Only the caller's node rendered — the shell never composes a second bar.
+    expect(container.querySelectorAll("header").length).toBe(0);
+  });
+});
+
+describe("AppShell — topBar slots and topNav precedence", () => {
+  it("composes start/center/end through TopNav's true-centred grid layout", () => {
+    const { container } = render(
+      <AppShell
+        mainId="main"
+        topBar={{
+          start: <span data-testid="tb-start">Start</span>,
+          center: <span data-testid="tb-center">Center</span>,
+          end: <span data-testid="tb-end">End</span>,
+        }}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.getByTestId("tb-start")).toBeInTheDocument();
+    expect(screen.getByTestId("tb-center")).toBeInTheDocument();
+    expect(screen.getByTestId("tb-end")).toBeInTheDocument();
+    // The grid layout that keeps `center` truly centred — not the plain
+    // `flex-1` row TopNav falls back to without a `center` slot. Found via
+    // the center wrapper's OWN slot, never a raw escaped-bracket class
+    // selector, which would silently stop matching if the Tailwind
+    // arbitrary-value syntax it encodes ever changes.
+    const centerSlot = container.querySelector('[data-slot="top-nav-center"]');
+    expect(centerSlot).not.toBeNull();
+    expect(centerSlot?.contains(screen.getByTestId("tb-center"))).toBe(true);
+    const grid = centerSlot?.parentElement;
+    expect(grid?.className).toContain("grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]");
+  });
+
+  it("passing topNav wins over topBar — the shell never merges the two", () => {
+    render(
+      <AppShell
+        mainId="main"
+        topNav={<div data-testid="custom-top-nav">Custom</div>}
+        topBar={{ center: <span data-testid="tb-center">Center</span> }}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.getByTestId("custom-top-nav")).toBeInTheDocument();
+    expect(screen.queryByTestId("tb-center")).not.toBeInTheDocument();
+  });
+});
+
+describe("AppShell — navigation placement", () => {
+  it('renders the sidebar column by default ("sidebar")', () => {
+    render(
+      <AppShell mainId="main" sidebar={<div data-testid="sidebar-marker">Nav</div>}>
+        Content
+      </AppShell>,
+    );
+    expect(screen.getByTestId("sidebar-marker")).toBeInTheDocument();
+  });
+
+  it('renders no sidebar column when navigation="topbar", even with a sidebar node passed', () => {
+    render(
+      <AppShell
+        mainId="main"
+        navigation="topbar"
+        sidebar={<div data-testid="sidebar-marker">Nav</div>}
+        topBar={{ center: <span>Primary nav goes here</span> }}
+      >
+        Content
+      </AppShell>,
+    );
+    expect(screen.queryByTestId("sidebar-marker")).not.toBeInTheDocument();
+  });
+});
+
+describe("AppShell — secondaryPanel", () => {
+  it("renders nothing extra when secondaryPanel is not passed", () => {
+    const { container } = render(<AppShell mainId="main">Content</AppShell>);
+    expect(container.querySelector('[data-slot="app-shell-secondary-panel"]')).toBeNull();
+  });
+
+  it("renders a hidden-below-md column sized from --shell-secondary-width, between sidebar and main", () => {
+    const { container } = render(
+      <AppShell
+        mainId="main"
+        sidebar={<div data-testid="sidebar-marker">Nav</div>}
+        secondaryPanel={<div data-testid="secondary-marker">Resources</div>}
+      >
+        Content
+      </AppShell>,
+    );
+    const panel = container.querySelector('[data-slot="app-shell-secondary-panel"]') as HTMLElement;
+    expect(panel).not.toBeNull();
+    expect(panel.className).toContain("hidden");
+    expect(panel.className).toContain("md:flex");
+    expect(panel.className).toContain("w-(--shell-secondary-width)");
+    expect(screen.getByTestId("secondary-marker")).toBeInTheDocument();
+
+    // Column order: sidebar, then secondaryPanel, then the main content column.
+    const root = container.firstElementChild as HTMLElement;
+    const children = Array.from(root.children);
+    const sidebarIndex = children.findIndex((el) =>
+      el.contains(screen.getByTestId("sidebar-marker")),
+    );
+    const panelIndex = children.indexOf(panel);
+    const mainIndex = children.findIndex((el) => el.querySelector("main"));
+    expect(sidebarIndex).toBeGreaterThanOrEqual(0);
+    expect(sidebarIndex).toBeLessThan(panelIndex);
+    expect(panelIndex).toBeLessThan(mainIndex);
+  });
 });
 
 describe("AppShell — mobile navigation (#review 2.1: sidebar disappears below md)", () => {

package/src/components/app-shell/app-shell.tsx

@@ -1,12 +1,71 @@
 import { forwardRef, type ReactNode } from "react";
 import { cn } from "../../lib/cn";
 import { SkipLink } from "../skip-link";
+import { TopNav } from "../top-nav";
+
+/** `topBar` slots — see `AppShellProps.topBar`. */
+export interface AppShellTopBarSlots {
+  /** Leading content, after the brand (when `brandPlacement="topbar"`). */
+  start?: ReactNode;
+  /** Centred content (e.g. a global search field) — see `TopNav`'s `center`. */
+  center?: ReactNode;
+  /** Trailing content (actions, account menu). */
+  end?: ReactNode;
+}
 
 export interface AppShellProps {
-  /** Persistent left navigation (often a <Sidebar />). */
+  /**
+   * Persistent left navigation (often a <Sidebar />). Not rendered when
+   * `navigation="topbar"` — put the primary navigation in `topBar`/`topNav`
+   * instead.
+   */
   sidebar?: ReactNode;
-  /** Top bar (often a <TopNav />). */
+  /**
+   * Top bar (often a <TopNav />), a fully-formed node the caller already
+   * brought. **Wins over `topBar` when both are passed** — this shell never
+   * merges the two, so pass one or the other, never both. Use `topNav` when
+   * you want to compose `TopNav` (or any other element) yourself; use
+   * `topBar` for the common case where this shell should compose `TopNav`
+   * for you from plain slots.
+   */
   topNav?: ReactNode;
+  /**
+   * Slots this shell composes into a `TopNav` for you — the convenience path
+   * for the common case (see `topNav` for precedence when both are set).
+   * `center` renders through `TopNav`'s own `center` prop: a true 3-column
+   * grid, so centred content (e.g. a global search field) stays centred
+   * regardless of how wide `start`/`end` are.
+   */
+  topBar?: AppShellTopBarSlots;
+  /**
+   * Where the brand mark lives. `"sidebar"` (default) is today's behavior:
+   * this shell renders no brand of its own — the caller's `sidebar` node
+   * (e.g. a `SidebarHeader` / `TeamSwitcher`) owns it. `"topbar"` renders
+   * `brand` as the leading element of the top bar, before `topBar.start`.
+   * Has no effect without a `brand` node, and no effect when `topNav` is
+   * passed instead of `topBar` (bring your own top bar, bring your own
+   * brand placement inside it).
+   * @default "sidebar"
+   */
+  brandPlacement?: "sidebar" | "topbar";
+  /** Brand mark rendered in the top bar when `brandPlacement="topbar"`. */
+  brand?: ReactNode;
+  /**
+   * Where the primary navigation lives. `"sidebar"` (default) renders
+   * `sidebar` in the left column, unchanged. `"topbar"` renders no sidebar
+   * column at all — compose the primary navigation into `topBar`/`topNav`
+   * instead (e.g. a `NavigationMenu` in `topBar.center`).
+   * @default "sidebar"
+   */
+  navigation?: "sidebar" | "topbar";
+  /**
+   * A second column beside the sidebar (e.g. a resource/filter panel) —
+   * `w-(--shell-secondary-width)` (16rem by default, every theme), hidden
+   * below `md` exactly like `sidebar`. Independent of `navigation`/`sidebar`:
+   * renders whenever it is passed. Pure layout, like `sidebar` — bring your
+   * own chrome (background, border) on the node itself.
+   */
+  secondaryPanel?: ReactNode;
   children: ReactNode;
   className?: string;
   /** Class for the scrolling main content region. */
@@ -44,11 +103,58 @@ export interface AppShellProps {
  * AppShell code change is needed to reach navigation below `md`, because
  * `SidebarProvider` is a plain React context and is never blocked by this
  * component's internal wrapper `<div>`.
+ *
+ * `brandPlacement`, `topBar`, `navigation` and `secondaryPanel` are all
+ * optional, off by default: with none of them passed this renders exactly
+ * what it always has (a `sidebar` column, `topNav` verbatim, `<main>`). They
+ * generalise the shape `Layout/App Shell/Flagship` already hand-builds —
+ * brand in the top bar, a centred search field, horizontal primary
+ * navigation, a second resource column — into props any consumer can reach
+ * for without hand-rolling the layout again.
  */
 export const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(
-  { sidebar, topNav, children, className, mainClassName, mainId = "main-content" },
+  {
+    sidebar,
+    topNav,
+    topBar,
+    brandPlacement = "sidebar",
+    brand,
+    navigation = "sidebar",
+    secondaryPanel,
+    children,
+    className,
+    mainClassName,
+    mainId = "main-content",
+  },
   ref,
 ) {
+  const showSidebar = navigation !== "topbar" && !!sidebar;
+  const showBrandInTopBar = brandPlacement === "topbar" && !!brand;
+
+  // `topNav` is a fully-formed node the caller already brought, so it always
+  // wins over `topBar` — the shell's own compose-from-slots convenience path.
+  // See the `topNav`/`topBar` JSDoc for the full precedence note.
+  const composedTopBar =
+    topBar || showBrandInTopBar ? (
+      <TopNav
+        start={
+          showBrandInTopBar ? (
+            <>
+              <div data-slot="app-shell-brand" className="flex items-center">
+                {brand}
+              </div>
+              {topBar?.start}
+            </>
+          ) : (
+            topBar?.start
+          )
+        }
+        center={topBar?.center}
+        end={topBar?.end}
+      />
+    ) : null;
+  const resolvedTopBar = topNav ?? composedTopBar;
+
   return (
     <div
       ref={ref}
@@ -60,9 +166,17 @@ export const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppSh
           beside must not be the exception, and it is the surface with the widest
           reach — it is imported, not copy-owned. */}
       <SkipLink targetId={mainId} />
-      {sidebar ? <div className="hidden md:flex">{sidebar}</div> : null}
+      {showSidebar ? <div className="hidden md:flex">{sidebar}</div> : null}
+      {secondaryPanel ? (
+        <div
+          data-slot="app-shell-secondary-panel"
+          className="hidden w-(--shell-secondary-width) shrink-0 md:flex"
+        >
+          {secondaryPanel}
+        </div>
+      ) : null}
       <div className="flex min-w-0 flex-1 flex-col">
-        {topNav}
+        {resolvedTopBar}
         {/* `<main>` IS the scroll port here (in the blocks the skip target and
             the scroll port are separate elements), so it takes `tabIndex={0}`
             rather than `{-1}`: a region that scrolls has to be keyboard-operable

package/src/components/app-shell/index.ts

@@ -1 +1 @@
-export { AppShell, type AppShellProps } from "./app-shell";
+export { AppShell, type AppShellProps, type AppShellTopBarSlots } from "./app-shell";

package/src/components/attribution-panel/attributions.generated.ts

@@ -2,7 +2,7 @@
 // Run `pnpm gen` after changing a dependency, a vendored font, or
 // scripts/attributions.sources.json. `pnpm gen:check` fails on a stale copy.
 //
-// 116 entries (data: 2, source: 18, font: 2, dependency: 94).
+// 122 entries (data: 4, source: 20, font: 2, dependency: 96).
 
 import type { Attribution } from "./attribution-types";
 
@@ -31,6 +31,30 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: ["@elabs-ai/components-maps"],
     required: true,
   },
+  {
+    version: null,
+    note: "The `countries-110m` TopoJSON build of Natural Earth that `world-fixture.ts` was converted from (once, offline — no TopoJSON decoder ships). ISC requires the copyright notice.",
+    id: "world-atlas",
+    category: "data",
+    name: "world-atlas",
+    license: "ISC",
+    copyright: "Copyright 2013-2024 Michael Bostock",
+    url: "https://github.com/topojson/world-atlas",
+    usedBy: ["@elabs-ai/components-charts"],
+    required: true,
+  },
+  {
+    version: null,
+    note: 'The 1:110m admin-0 country outlines behind `ChoroplethChart`\'s bundled "world" fixture (packages/charts/src/charts/choropleth/world-fixture.ts). Public domain, so the credit is courtesy, not an obligation.',
+    id: "natural-earth",
+    category: "data",
+    name: "Natural Earth",
+    license: "public-domain",
+    copyright: "Public domain (Natural Earth terms of use)",
+    url: "https://www.naturalearthdata.com/about/terms-of-use/",
+    usedBy: ["@elabs-ai/components-charts"],
+    required: false,
+  },
   {
     version: null,
     note: "Vendored into @elabs-ai/components-ai and rewired onto brand-ui primitives and tokens. Apache-2.0, NOT MIT: §4 obliges us to carry the notice and to state that we modified the files.",
@@ -115,6 +139,18 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: ["@elabs-ai/components-viewer"],
     required: false,
   },
+  {
+    version: null,
+    note: "The eXtensible Event Stream interchange format fromXes reads: a <log> of <trace>s of <event>s, each carrying typed key/value attributes, plus <classifier> and lifecycle:transition. Only the format is implemented, by a hand-rolled tokenizer; no text, schema file or code is copied. The license of the specification document itself was not established.",
+    id: "xes-ieee-1849",
+    category: "source",
+    name: "IEEE 1849-2016 (XES)",
+    license: "Published specification (license of the document not established)",
+    copyright: "© IEEE",
+    url: "https://standards.ieee.org/ieee/1849/6811/",
+    usedBy: ["@elabs-ai/components-process"],
+    required: false,
+  },
   {
     version: null,
     note: "The editorial chart gallery behind the 2026-09-04 charts gap analysis: 71 files across the charts and tokens packages cite it as the source of a value, a mark shape or a composition (unit decomposition, hairline furniture, the sequential/diverging ramps, the reveal timing), and three copy-own registry blocks (chart-editorial-hourglass, -patchwork, -almanac) reproduce three of its gallery cards' DATA-SHAPE DESCRIPTIONS from that same analysis' one-line prose. No code was copied verbatim — each was re-expressed onto this repo's tokens and primitives. Its LICENSE is PolyForm Noncommercial 1.0.0, read verbatim from the upstream file; GitHub's own detection reports NOASSERTION, which is why nothing flagged it earlier. The licence's Required Notice slot is left at the template's example value, so upstream states no copyright holder and none is claimed here. Noncommercial-only is unresolved for a repo headed for public release — a licensing decision for the maintainer, not something attribution settles.",
@@ -165,7 +201,19 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
   },
   {
     version: null,
-    note: "Algorithm shape for the framework-free process-mining core: which aggregates a directly-follows graph carries (discoverGraph) and how traces are grouped into variants (extractVariants), with durationStats as their shared summary. Re-typed in TypeScript from the published algorithms, not copied.",
+    note: "The Object-Centric Event Log 2.0 JSON serialization fromOcel reads (objectTypes, objects, events, relationships). Only the format is implemented; no text, schema file or code is copied. The license of the specification document itself was not established.",
+    id: "ocel-2-0",
+    category: "source",
+    name: "OCEL 2.0 specification",
+    license: "Published specification (license of the document not established)",
+    copyright: "© the OCEL 2.0 specification authors",
+    url: "https://doi.org/10.48550/arXiv.2403.01975",
+    usedBy: ["@elabs-ai/components-process"],
+    required: false,
+  },
+  {
+    version: null,
+    note: "Algorithm shape for the framework-free process-mining core: which aggregates a directly-follows graph carries (discoverGraph) and how traces are grouped into variants (extractVariants), with durationStats as their shared summary; and the token-based replay procedure behind tokenReplay (produced/consumed/missing/remaining counting, silent-transition enabling before forcing missing tokens); and the object-centric directly-follows graph (discoverObjectCentricGraph): one directly-follows graph per object type, shared activities merged into one node with per-type counts, edges kept per type. Re-typed in TypeScript from the published algorithms, not copied.",
     id: "pm4js",
     category: "source",
     name: "pm4js",
@@ -292,7 +340,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     license: "MIT",
     copyright: "Claudéric Demers",
     url: "https://www.npmjs.com/package/@dnd-kit/core",
-    usedBy: ["@elabs-ai/components-data"],
+    usedBy: ["@elabs-ai/components-charts", "@elabs-ai/components-data"],
     required: false,
     note: null,
   },
@@ -775,6 +823,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: [
       "@elabs-ai/components-charts",
       "@elabs-ai/components-data",
+      "@elabs-ai/components-process",
       "@elabs-ai/components-ui",
       "@elabs-ai/components-viewer",
     ],
@@ -785,7 +834,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     id: "@visx/brush",
     category: "dependency",
     name: "@visx/brush",
-    version: "3.12.0",
+    version: "4.0.1-alpha.0",
     license: "MIT",
     copyright: "@hshoff",
     url: "https://www.npmjs.com/package/@visx/brush",
@@ -1076,6 +1125,18 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
+  {
+    version: "0.12.0",
+    note: "elkjs adapter — RM-067. The Eclipse Layout Kernel, behind layoutFlowElk. An OPTIONAL peer dependency, so the derived dependency list (plain `dependencies` only) cannot see it; it is credited here instead. Never bundled into the package: loaded with import() from the host's own install, and used under EPL-2.0. The licence text (LICENSE.md) names no holder; the copyright line is read verbatim from the header of elkjs's own lib/elk-api.d.ts.",
+    id: "elkjs",
+    category: "dependency",
+    name: "elkjs",
+    license: "EPL-2.0 OR GPL-3.0-or-later",
+    copyright: "Copyright (c) 2019 TypeFox and others",
+    url: "https://github.com/kieler/elkjs",
+    usedBy: ["@elabs-ai/components-flow"],
+    required: false,
+  },
   {
     id: "embla-carousel-react",
     category: "dependency",
@@ -1423,4 +1484,16 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
+  {
+    id: "zustand",
+    category: "dependency",
+    name: "zustand",
+    version: "5.0.15",
+    license: "MIT",
+    copyright: "Paul Henschel",
+    url: "https://www.npmjs.com/package/zustand",
+    usedBy: ["@elabs-ai/components-charts"],
+    required: false,
+    note: null,
+  },
 ] as const;

package/src/components/badge/badge.stories.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Badge } from "./badge";
 
@@ -21,6 +22,15 @@ const meta = {
       options: ["default", "secondary", "outline", "success", "warning", "destructive", "info"],
       table: { category: "Appearance" },
     },
+    appearance: {
+      description:
+        "Explicit fill/border/ink treatment override. Unset (default) renders no " +
+        "`data-appearance` attribute, so the ancestor `--badge-appearance` token decides " +
+        "(`auto` = today's look). Meaningful only on the colour-bearing variants.",
+      control: { type: "select" },
+      options: [undefined, "tint", "solid", "outline", "neutral"],
+      table: { category: "Appearance" },
+    },
     children: {
       description: "Badge label content.",
       control: "text",
@@ -50,3 +60,55 @@ export const Statuses: Story = {
     </div>
   ),
 };
+
+/**
+ * The four explicit `appearance` overrides (`tint`/`solid`/`outline`/`neutral`)
+ * on every colour-bearing variant — each renders a `data-appearance` attribute
+ * and a fixed fill/border/ink recipe regardless of the ancestor
+ * `--badge-appearance` token. `secondary`/`outline` are already a neutral pill
+ * and an outline respectively, so `appearance` has no additional effect there.
+ */
+export const Appearances: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {(["tint", "solid", "outline", "neutral"] as const).map((appearance) => (
+        <div key={appearance} className="flex flex-wrap items-center gap-2">
+          <span className="w-16 text-caption text-muted-foreground">{appearance}</span>
+          <Badge appearance={appearance}>Default</Badge>
+          <Badge appearance={appearance} variant="success">
+            Success
+          </Badge>
+          <Badge appearance={appearance} variant="warning">
+            Warning
+          </Badge>
+          <Badge appearance={appearance} variant="destructive">
+            Error
+          </Badge>
+          <Badge appearance={appearance} variant="info">
+            Info
+          </Badge>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * With no explicit `appearance` prop, an ancestor's `--badge-appearance`
+ * token (a theme, or a region wrapper) drives the treatment instead — the
+ * badges below carry no `data-appearance` attribute at all.
+ */
+export const TokenDrivenAppearance: Story = {
+  render: () => (
+    <div
+      className="flex flex-wrap gap-2"
+      style={{ "--badge-appearance": "solid" } as CSSProperties}
+    >
+      <Badge>Default</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="destructive">Error</Badge>
+      <Badge variant="info">Info</Badge>
+    </div>
+  ),
+};

package/src/components/badge/badge.test.tsx

@@ -15,4 +15,25 @@ describe("Badge", () => {
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(ref.current).toBe(screen.getByText("New"));
   });
+
+  it("renders no data-appearance attribute when appearance is unset", () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText("New")).not.toHaveAttribute("data-appearance");
+  });
+
+  it("renders data-appearance when an explicit appearance is passed", () => {
+    render(<Badge appearance="solid">New</Badge>);
+    expect(screen.getByText("New")).toHaveAttribute("data-appearance", "solid");
+  });
+
+  it("carries the appearance recipe classes on a colour-bearing variant", () => {
+    render(
+      <Badge appearance="tint" variant="success">
+        New
+      </Badge>,
+    );
+    const badge = screen.getByText("New");
+    expect(badge.classList.contains("badge-tint:bg-(--badge-fill)/10")).toBe(true);
+    expect(badge.classList.contains("[--badge-fill:var(--success)]")).toBe(true);
+  });
 });