@polderlabs/bizar 6.3.0 → 7.0.0

package/bizar-dash/tests/ui/layout/Breadcrumbs.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Breadcrumbs } from '../../../src/web/ui/layout/Breadcrumbs';
+
+describe('Breadcrumbs', () => {
+  it('renders all crumb labels', () => {
+    render(
+      <Breadcrumbs
+        items={[
+          { label: 'Home', href: '/' },
+          { label: 'Settings', href: '/settings' },
+          { label: 'Account' },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Account')).toBeInTheDocument();
+  });
+
+  it('renders the last item with aria-current="page"', () => {
+    render(
+      <Breadcrumbs
+        items={[
+          { label: 'Home', href: '/' },
+          { label: 'Current' },
+        ]}
+      />,
+    );
+    const current = screen.getByText('Current');
+    expect(current.closest('[aria-current="page"]')).not.toBeNull();
+  });
+
+  it('renders href items as anchors', () => {
+    render(
+      <Breadcrumbs
+        items={[
+          { label: 'Home', href: '/home' },
+          { label: 'Current' },
+        ]}
+      />,
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toHaveAttribute('href', '/home');
+  });
+
+  it('fires onClick when a non-current crumb is clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Breadcrumbs
+        items={[
+          { label: 'Settings', onClick },
+          { label: 'Account' },
+        ]}
+      />,
+    );
+    await user.click(screen.getByText('Settings'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a custom separator between crumbs', () => {
+    const { container } = render(
+      <Breadcrumbs
+        items={[
+          { label: 'A' },
+          { label: 'B' },
+        ]}
+        separator={<span>/</span>}
+      />,
+    );
+    const seps = container.querySelectorAll('.bizar-breadcrumbs__separator');
+    expect(seps).toHaveLength(1);
+    expect(seps[0].textContent).toBe('/');
+  });
+
+  it('renders nothing when items is empty', () => {
+    const { container } = render(<Breadcrumbs items={[]} />);
+    expect(container.querySelector('.bizar-breadcrumbs')).toBeInTheDocument();
+    expect(
+      container.querySelectorAll('.bizar-breadcrumbs__item').length,
+    ).toBe(0);
+  });
+});

package/bizar-dash/tests/ui/layout/Panel.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Panel } from '../../../src/web/ui/layout/Panel';
+
+describe('Panel', () => {
+  it('renders title and body content', () => {
+    render(<Panel title="Summary">body text</Panel>);
+    expect(screen.getByText('Summary')).toBeInTheDocument();
+    expect(screen.getByText('body text')).toBeInTheDocument();
+  });
+
+  it('renders description when provided', () => {
+    render(
+      <Panel title="Title" description="A short description.">
+        body
+      </Panel>,
+    );
+    expect(screen.getByText('A short description.')).toBeInTheDocument();
+  });
+
+  it('renders actions slot when provided', () => {
+    render(
+      <Panel title="Title" actions={<button>Action</button>}>
+        body
+      </Panel>,
+    );
+    expect(screen.getByText('Action')).toBeInTheDocument();
+  });
+
+  it('does not render a header block when no header fields are set', () => {
+    const { container } = render(<Panel>body</Panel>);
+    expect(container.querySelector('.bizar-panel__header')).not.toBeInTheDocument();
+    expect(container.querySelector('.bizar-panel__body')).toBeInTheDocument();
+  });
+
+  it('applies the filled variant modifier', () => {
+    const { container } = render(<Panel variant="filled">body</Panel>);
+    const panel = container.querySelector('.bizar-panel');
+    expect(panel?.className).toContain('bizar-panel--filled');
+  });
+
+  it('applies the padding modifier on the body', () => {
+    const { container } = render(<Panel padding={2}>body</Panel>);
+    const body = container.querySelector('.bizar-panel__body');
+    expect(body?.className).toContain('bizar-panel__padding--2');
+  });
+
+  it('renders as a <section> element', () => {
+    const { container } = render(<Panel title="t">b</Panel>);
+    expect(container.querySelector('section.bizar-panel')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/layout/PanelHeader.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { PanelHeader } from '../../../src/web/ui/layout/PanelHeader';
+
+describe('PanelHeader', () => {
+  it('renders title and description', () => {
+    render(<PanelHeader title="Title" description="Description" />);
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('renders actions slot', () => {
+    render(
+      <PanelHeader
+        title="Title"
+        actions={<button>Save</button>}
+      />,
+    );
+    expect(screen.getByText('Save')).toBeInTheDocument();
+  });
+
+  it('renders children before the title when provided', () => {
+    const { container } = render(
+      <PanelHeader title="After">
+        <span data-testid="child">Before</span>
+      </PanelHeader>,
+    );
+    expect(container.querySelector('.bizar-panel__header-text')).toBeInTheDocument();
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByText('After')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/layout/Sidebar.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Sidebar } from '../../../src/web/ui/layout/Sidebar';
+
+describe('Sidebar', () => {
+  it('renders group labels and items', () => {
+    render(
+      <Sidebar
+        groups={[
+          {
+            label: 'Main',
+            items: [
+              { id: 'home', label: 'Home' },
+              { id: 'settings', label: 'Settings' },
+            ],
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Main')).toBeInTheDocument();
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('fires onItemSelect when an item is clicked', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <Sidebar
+        groups={[{ items: [{ id: 'home', label: 'Home' }] }]}
+        onItemSelect={onSelect}
+      />,
+    );
+    await user.click(screen.getByText('Home'));
+    expect(onSelect).toHaveBeenCalledWith('home');
+  });
+
+  it('marks the active item with aria-current', () => {
+    render(
+      <Sidebar
+        activeId="settings"
+        groups={[
+          {
+            items: [
+              { id: 'home', label: 'Home' },
+              { id: 'settings', label: 'Settings' },
+            ],
+          },
+        ]}
+      />,
+    );
+    const settingsBtn = screen.getByRole('button', { name: 'Settings' });
+    expect(settingsBtn).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('disables items when disabled prop is set', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <Sidebar
+        groups={[
+          { items: [{ id: 'home', label: 'Home', disabled: true }] },
+        ]}
+        onItemSelect={onSelect}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: 'Home' });
+    expect(btn).toBeDisabled();
+    await user.click(btn);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('renders href items as anchor links', () => {
+    render(
+      <Sidebar
+        groups={[{ items: [{ id: 'docs', label: 'Docs', href: '/docs' }] }]}
+      />,
+    );
+    const link = screen.getByRole('link', { name: 'Docs' });
+    expect(link).toHaveAttribute('href', '/docs');
+  });
+
+  it('renders footer slot at the bottom', () => {
+    const { container } = render(
+      <Sidebar
+        groups={[{ items: [{ id: 'home', label: 'Home' }] }]}
+        footer={<button>Logout</button>}
+      />,
+    );
+    const footer = container.querySelector('.bizar-sidebar__footer');
+    expect(footer).toBeInTheDocument();
+    expect(footer?.contains(screen.getByText('Logout'))).toBe(true);
+  });
+});

package/bizar-dash/tests/ui/layout/Tabs.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Tabs } from '../../../src/web/ui/layout/Tabs';
+
+const TABS = [
+  { id: 'one', label: 'One' },
+  { id: 'two', label: 'Two' },
+  { id: 'three', label: 'Three', disabled: true },
+  { id: 'four', label: 'Four' },
+];
+
+describe('Tabs', () => {
+  it('renders all tabs as a tablist', () => {
+    render(<Tabs tabs={TABS} activeId="one" onChange={() => {}} />);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+    expect(screen.getAllByRole('tab')).toHaveLength(4);
+  });
+
+  it('marks the active tab with aria-selected=true', () => {
+    render(<Tabs tabs={TABS} activeId="two" onChange={() => {}} />);
+    const active = screen.getByRole('tab', { name: 'Two' });
+    expect(active).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('fires onChange when a tab is clicked', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Tabs tabs={TABS} activeId="one" onChange={onChange} />);
+    await user.click(screen.getByRole('tab', { name: 'Two' }));
+    expect(onChange).toHaveBeenCalledWith('two');
+  });
+
+  it('skips disabled tabs on click', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Tabs tabs={TABS} activeId="one" onChange={onChange} />);
+    const disabled = screen.getByRole('tab', { name: 'Three' });
+    expect(disabled).toBeDisabled();
+    await user.click(disabled);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('moves active id right on ArrowRight (skipping disabled)', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Tabs tabs={TABS} activeId="one" onChange={onChange} />);
+    const active = screen.getByRole('tab', { name: 'One' });
+    active.focus();
+    await user.keyboard('{ArrowRight}');
+    expect(onChange).toHaveBeenCalledWith('two');
+  });
+
+  it('moves active id left on ArrowLeft', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Tabs tabs={TABS} activeId="two" onChange={onChange} />);
+    const active = screen.getByRole('tab', { name: 'Two' });
+    active.focus();
+    await user.keyboard('{ArrowLeft}');
+    expect(onChange).toHaveBeenCalledWith('one');
+  });
+
+  it('wraps around from the last enabled tab to the first', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Tabs tabs={TABS} activeId="four" onChange={onChange} />);
+    const active = screen.getByRole('tab', { name: 'Four' });
+    active.focus();
+    await user.keyboard('{ArrowRight}');
+    expect(onChange).toHaveBeenCalledWith('one');
+  });
+
+  it('applies the pill variant class', () => {
+    const { container } = render(
+      <Tabs tabs={TABS} activeId="one" onChange={() => {}} variant="pill" />,
+    );
+    expect(container.querySelector('.bizar-tabs--pill')).toBeInTheDocument();
+  });
+
+  it('applies the underline variant class by default', () => {
+    const { container } = render(
+      <Tabs tabs={TABS} activeId="one" onChange={() => {}} />,
+    );
+    expect(container.querySelector('.bizar-tabs--underline')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/layout/Topbar.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Topbar } from '../../../src/web/ui/layout/Topbar';
+
+describe('Topbar', () => {
+  it('renders brand, center, and right slots', () => {
+    render(
+      <Topbar
+        brand={<span>Bizar</span>}
+        center={<input placeholder="Search" />}
+        right={<button>Account</button>}
+      />,
+    );
+    expect(screen.getByText('Bizar')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+    expect(screen.getByText('Account')).toBeInTheDocument();
+  });
+
+  it('applies sticky modifier by default', () => {
+    const { container } = render(<Topbar brand={<span>B</span>} />);
+    const topbar = container.querySelector('.bizar-topbar');
+    expect(topbar?.className).toContain('bizar-topbar--sticky');
+  });
+
+  it('removes sticky class when sticky=false', () => {
+    const { container } = render(<Topbar brand={<span>B</span>} sticky={false} />);
+    const topbar = container.querySelector('.bizar-topbar');
+    expect(topbar?.className).not.toContain('bizar-topbar--sticky');
+  });
+
+  it('applies a custom height via inline style', () => {
+    const { container } = render(<Topbar brand={<span>B</span>} height={64} />);
+    const topbar = container.querySelector('.bizar-topbar') as HTMLElement;
+    expect(topbar.style.height).toBe('64px');
+  });
+
+  it('renders with role="banner"', () => {
+    render(<Topbar brand={<span>B</span>} />);
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/navigation/CommandPalette.test.tsx

@@ -0,0 +1,105 @@
+// tests/ui/navigation/CommandPalette.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { CommandPalette } from '../../../src/web/ui/navigation/CommandPalette';
+
+const ITEMS = [
+  {
+    id: 'a1',
+    type: 'agent' as const,
+    label: 'Odin Agent',
+    description: 'Mid-tier orchestrator',
+    onSelect: vi.fn(),
+  },
+  {
+    id: 't1',
+    type: 'task' as const,
+    label: 'Build dashboard',
+    onSelect: vi.fn(),
+  },
+  {
+    id: 'm1',
+    type: 'mod' as const,
+    label: 'Headroom',
+    onSelect: vi.fn(),
+  },
+];
+
+describe('CommandPalette', () => {
+  it('does not render when open is false', () => {
+    const { container } = render(
+      <CommandPalette open={false} onClose={() => {}} items={ITEMS} />,
+    );
+    expect(container.querySelector('.bd-cmdk')).toBeNull();
+  });
+
+  it('renders when open is true', () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('shows all items initially grouped by type', () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    expect(screen.getByText('Odin Agent')).toBeInTheDocument();
+    expect(screen.getByText('Build dashboard')).toBeInTheDocument();
+    expect(screen.getByText('Headroom')).toBeInTheDocument();
+    expect(screen.getByText('Agents')).toBeInTheDocument();
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Mods')).toBeInTheDocument();
+  });
+
+  it('filters items by fuzzy match on label/description', async () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    await userEvent.type(
+      screen.getByPlaceholderText('Search anything…'),
+      'orchestrator',
+    );
+    // Only "Odin Agent" (description contains "orchestrator") survives.
+    expect(screen.getByText('Odin Agent')).toBeInTheDocument();
+    expect(screen.queryByText('Build dashboard')).toBeNull();
+    expect(screen.queryByText('Headroom')).toBeNull();
+  });
+
+  it('shows "No results" when no items match', async () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    await userEvent.type(
+      screen.getByPlaceholderText('Search anything…'),
+      'zzzzzzz',
+    );
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+
+  it('arrow keys cycle through visible items', async () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    await userEvent.type(screen.getByPlaceholderText('Search anything…'), 'a');
+    // After filtering 'a' we may still see multiple results — just check
+    // that pressing ArrowDown moves activeIndex.
+    const before = document.querySelector('.bd-cmdk__item--active');
+    await userEvent.keyboard('{ArrowDown}');
+    const after = document.querySelector('.bd-cmdk__item--active');
+    // Active highlight class moved from one item to the next.
+    expect(before).not.toBe(after);
+  });
+
+  it('clicking an item triggers onSelect and closes the palette', async () => {
+    const onClose = vi.fn();
+    render(
+      <CommandPalette open={true} onClose={onClose} items={ITEMS} />,
+    );
+    await userEvent.click(screen.getByText('Headroom'));
+    expect(ITEMS[2].onSelect).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('Escape closes the palette', async () => {
+    const onClose = vi.fn();
+    render(<CommandPalette open={true} onClose={onClose} items={ITEMS} />);
+    const dialog = screen.getByRole('dialog');
+    dialog.focus();
+    // The keydown handler is on the .bd-cmdk wrapper; dispatch from there.
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/bizar-dash/tests/ui/navigation/NavGroup.test.tsx

@@ -0,0 +1,55 @@
+// tests/ui/navigation/NavGroup.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { Folder, Settings } from 'lucide-react';
+import { NavGroup } from '../../../src/web/ui/navigation/NavGroup';
+
+const ITEMS = [
+  { label: 'First', icon: Settings, href: '/first' },
+  { label: 'Second', icon: Settings, href: '/second' },
+];
+
+describe('NavGroup', () => {
+  it('renders the group label', () => {
+    render(<NavGroup label="Workspace" items={ITEMS} />);
+    expect(screen.getByText('Workspace')).toBeInTheDocument();
+  });
+
+  it('projects each item through NavLink', () => {
+    render(<NavGroup label="W" items={ITEMS} />);
+    expect(screen.getByRole('link', { name: /first/i })).toHaveAttribute(
+      'href',
+      '/first',
+    );
+    expect(screen.getByRole('link', { name: /second/i })).toHaveAttribute(
+      'href',
+      '/second',
+    );
+  });
+
+  it('toggles open/closed on header click', async () => {
+    const { container } = render(
+      <NavGroup label="W" items={ITEMS} defaultOpen={true} />,
+    );
+    // Start open
+    expect(container.querySelector('.bd-nav-group--open')).toBeInTheDocument();
+    // Click to close
+    await userEvent.click(screen.getByText('W'));
+    expect(container.querySelector('.bd-nav-group--open')).toBeNull();
+    // Click to open
+    await userEvent.click(screen.getByText('W'));
+    expect(container.querySelector('.bd-nav-group--open')).toBeInTheDocument();
+  });
+
+  it('does not toggle when collapsible is false', async () => {
+    const { container } = render(
+      <NavGroup label="W" items={ITEMS} collapsible={false} />,
+    );
+    expect(container.querySelector('.bd-nav-group--non-collapsible')).toBeInTheDocument();
+    await userEvent.click(screen.getByText('W'));
+    // Header click is a no-op when not collapsible.
+    expect(container.querySelector('.bd-nav-group--non-collapsible')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/navigation/NavLink.test.tsx

@@ -0,0 +1,61 @@
+// tests/ui/navigation/NavLink.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Home } from 'lucide-react';
+import { NavLink } from '../../../src/web/ui/navigation/NavLink';
+
+describe('NavLink', () => {
+  it('renders an <a> when href is provided', () => {
+    render(<NavLink icon={Home} label="Home" href="/home" />);
+    const anchor = screen.getByRole('link', { name: /home/i });
+    expect(anchor.tagName).toBe('A');
+    expect(anchor).toHaveAttribute('href', '/home');
+  });
+
+  it('renders a <button> when only onClick is provided', () => {
+    const onClick = vi.fn();
+    render(<NavLink icon={Home} label="Trigger" onClick={onClick} />);
+    const btn = screen.getByRole('button', { name: /trigger/i });
+    expect(btn.tagName).toBe('BUTTON');
+  });
+
+  it('fires onClick when the button is clicked', async () => {
+    const onClick = vi.fn();
+    render(<NavLink icon={Home} label="X" onClick={onClick} />);
+    await userEvent.click(screen.getByRole('button', { name: /x/i }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a <div> when neither href nor onClick is provided', () => {
+    const { container } = render(<NavLink icon={Home} label="Plain" />);
+    const link = container.querySelector('.bd-nav-link');
+    expect(link).toBeInTheDocument();
+    expect(link?.tagName).toBe('DIV');
+  });
+
+  it('applies active state styling', () => {
+    const { container } = render(
+      <NavLink icon={Home} label="Active" href="/x" active />,
+    );
+    expect(container.querySelector('.bd-nav-link--active')).toBeInTheDocument();
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders a badge when supplied', () => {
+    render(<NavLink icon={Home} label="Tasks" href="/t" badge={7} />);
+    expect(screen.getByText('7')).toBeInTheDocument();
+  });
+
+  it('applies disabled state and blocks navigation', () => {
+    const { container } = render(
+      <NavLink icon={Home} label="Locked" href="/locked" disabled />,
+    );
+    const anchor = container.querySelector('a')!;
+    expect(anchor).toHaveAttribute('aria-disabled', 'true');
+    expect(anchor.getAttribute('href')).toBeNull();
+    expect(anchor).toHaveClass('bd-nav-link--disabled');
+  });
+});

package/bizar-dash/tests/ui/primitives/Box.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Box } from '../../../src/web/ui/primitives/Box';
+
+describe('Box', () => {
+  it('renders a div by default', () => {
+    const { container } = render(<Box>hello</Box>);
+    const el = container.firstChild as HTMLElement;
+    expect(el.tagName).toBe('DIV');
+    expect(el).toHaveClass('box');
+  });
+
+  it('renders the requested semantic tag', () => {
+    const { container } = render(<Box as="section">x</Box>);
+    expect(container.firstChild?.nodeName).toBe('SECTION');
+  });
+
+  it('composes padding/margin/bg/border classes from props', () => {
+    const { container } = render(
+      <Box p={3} m={2} bg="1" border="subtle" rounded="md" data-testid="b" />,
+    );
+    const el = screen.getByTestId('b');
+    expect(el).toHaveClass('box-p-3', 'box-m-2', 'box-bg-1', 'box-border-subtle', 'box-rounded-md');
+  });
+
+  it('renders zero values without falsy-skip', () => {
+    const { container } = render(<Box p={0} m={0} data-testid="b" />);
+    const el = screen.getByTestId('b');
+    expect(el).toHaveClass('box-p-0', 'box-m-0');
+  });
+
+  it('composes display and position classes', () => {
+    const { container } = render(
+      <Box display="flex" position="relative" data-testid="b" />,
+    );
+    const el = screen.getByTestId('b');
+    expect(el).toHaveClass('box-d-flex', 'box-pos-relative');
+  });
+
+  it('passes through arbitrary HTML attributes', () => {
+    const { container } = render(
+      <Box id="x" aria-label="region" data-foo="bar" />,
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el.id).toBe('x');
+    expect(el.getAttribute('aria-label')).toBe('region');
+    expect(el.getAttribute('data-foo')).toBe('bar');
+  });
+});