@object-ui/components 3.1.5 → 3.3.1

package/src/__tests__/__snapshots__/snapshot.test.tsx.snap

@@ -1,327 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Badge snapshots > renders variant="default" 1`] = `
-<div
-  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80"
->
-  Label
-</div>
-`;
-
-exports[`Badge snapshots > renders variant="destructive" 1`] = `
-<div
-  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80"
->
-  Label
-</div>
-`;
-
-exports[`Badge snapshots > renders variant="outline" 1`] = `
-<div
-  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground"
->
-  Label
-</div>
-`;
-
-exports[`Badge snapshots > renders variant="secondary" 1`] = `
-<div
-  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
->
-  Label
-</div>
-`;
-
-exports[`Badge snapshots > renders with custom className 1`] = `
-<div
-  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 custom-class"
->
-  Custom
-</div>
-`;
-
-exports[`Button snapshots > renders disabled state 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
-  disabled=""
->
-  Disabled
-</button>
-`;
-
-exports[`Button snapshots > renders size="icon" 1`] = `
-<button
-  aria-label="Icon button"
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 w-10"
->
-  ★
-</button>
-`;
-
-exports[`Button snapshots > renders size="lg" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md px-8"
->
-  Large
-</button>
-`;
-
-exports[`Button snapshots > renders size="sm" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3"
->
-  Small
-</button>
-`;
-
-exports[`Button snapshots > renders variant="default" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
->
-  Click me
-</button>
-`;
-
-exports[`Button snapshots > renders variant="destructive" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-4 py-2"
->
-  Click me
-</button>
-`;
-
-exports[`Button snapshots > renders variant="ghost" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
->
-  Click me
-</button>
-`;
-
-exports[`Button snapshots > renders variant="link" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-primary underline-offset-4 hover:underline h-10 px-4 py-2"
->
-  Click me
-</button>
-`;
-
-exports[`Button snapshots > renders variant="outline" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
->
-  Click me
-</button>
-`;
-
-exports[`Button snapshots > renders variant="secondary" 1`] = `
-<button
-  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2"
->
-  Click me
-</button>
-`;
-
-exports[`Card snapshots > renders content-only card 1`] = `
-<div
-  class="rounded-lg border bg-card text-card-foreground shadow-sm"
->
-  <div
-    class="p-6 pt-0"
-  >
-    Just content
-  </div>
-</div>
-`;
-
-exports[`Card snapshots > renders header-only card 1`] = `
-<div
-  class="rounded-lg border bg-card text-card-foreground shadow-sm"
->
-  <div
-    class="flex flex-col space-y-1.5 p-6"
-  >
-    <div
-      class="text-2xl font-semibold leading-none tracking-tight"
-    >
-      Minimal Card
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card snapshots > renders with custom className 1`] = `
-<div
-  class="rounded-lg border bg-card text-card-foreground w-96 shadow-lg"
->
-  <div
-    class="p-6 pt-0"
-  >
-    Styled card
-  </div>
-</div>
-`;
-
-exports[`Card snapshots > renders with header, content, and footer 1`] = `
-<div
-  class="rounded-lg border bg-card text-card-foreground shadow-sm"
->
-  <div
-    class="flex flex-col space-y-1.5 p-6"
-  >
-    <div
-      class="text-2xl font-semibold leading-none tracking-tight"
-    >
-      Card Title
-    </div>
-    <div
-      class="text-sm text-muted-foreground"
-    >
-      A brief description
-    </div>
-  </div>
-  <div
-    class="p-6 pt-0"
-  >
-    <p>
-      Card body content
-    </p>
-  </div>
-  <div
-    class="flex items-center p-6 pt-0"
-  >
-    <button
-      class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
-    >
-      Action
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Empty state snapshots > renders empty media with default variant 1`] = `
-<div
-  class="flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent"
-  data-slot="empty-icon"
-  data-variant="default"
->
-  <span>
-    🔍
-  </span>
-</div>
-`;
-
-exports[`Empty state snapshots > renders full empty state with media, title, description, and content 1`] = `
-<div
-  class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12"
-  data-slot="empty"
->
-  <div
-    class="flex max-w-sm flex-col items-center gap-2 text-center"
-    data-slot="empty-header"
-  >
-    <div
-      class="mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
-      data-slot="empty-icon"
-      data-variant="icon"
-    >
-      <span>
-        📭
-      </span>
-    </div>
-    <div
-      class="text-lg font-medium tracking-tight"
-      data-slot="empty-title"
-    >
-      No results found
-    </div>
-    <div
-      class="text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4"
-      data-slot="empty-description"
-    >
-      Try adjusting your search or filter criteria.
-    </div>
-  </div>
-  <div
-    class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance"
-    data-slot="empty-content"
-  >
-    <button
-      class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-    >
-      Clear filters
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Empty state snapshots > renders minimal empty state with title only 1`] = `
-<div
-  class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12"
-  data-slot="empty"
->
-  <div
-    class="flex max-w-sm flex-col items-center gap-2 text-center"
-    data-slot="empty-header"
-  >
-    <div
-      class="text-lg font-medium tracking-tight"
-      data-slot="empty-title"
-    >
-      Nothing here yet
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Spinner snapshots > renders default spinner 1`] = `
-<div
-  aria-label="Loading"
-  class="flex items-center justify-center"
-  role="status"
->
-  <svg
-    aria-hidden="true"
-    class="lucide lucide-loader-circle animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M21 12a9 9 0 1 1-6.219-8.56"
-    />
-  </svg>
-</div>
-`;
-
-exports[`Spinner snapshots > renders with custom className 1`] = `
-<div
-  aria-label="Loading"
-  class="flex items-center justify-center h-8 w-8"
-  role="status"
->
-  <svg
-    aria-hidden="true"
-    class="lucide lucide-loader-circle animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4"
-    fill="none"
-    height="24"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M21 12a9 9 0 1 1-6.219-8.56"
-    />
-  </svg>
-</div>
-`;

package/src/__tests__/accessibility.test.tsx

@@ -1,137 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Axe-core accessibility test suite for ObjectUI Shadcn components.
- *
- * Tests core UI primitives against WCAG 2.1 AA standards using axe-core.
- * Part of Q1 2026 roadmap §1.4 Test Coverage Improvement.
- */
-
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { axe } from 'vitest-axe';
-import React from 'react';
-import {
-  Button,
-  Badge,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  Input,
-  Label,
-  Skeleton,
-} from '@object-ui/components';
-
-/**
- * Helper to assert no axe violations.
- * Works with vitest-axe's AxeResults format.
- */
-async function expectNoViolations(container: HTMLElement) {
-  const results = await axe(container);
-  const violations = results.violations || [];
-  if (violations.length > 0) {
-    const messages = violations.map(
-      (v: any) => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} instance(s))`
-    );
-    throw new Error(`Expected no accessibility violations, but found ${violations.length}:\n${messages.join('\n')}`);
-  }
-}
-
-describe('Accessibility — axe-core (WCAG 2.1 AA)', () => {
-  it('Button should have no a11y violations', async () => {
-    const { container } = render(<Button>Click me</Button>);
-    await expectNoViolations(container);
-  });
-
-  it('Icon-only Button with aria-label should have no violations', async () => {
-    const { container } = render(
-      <Button aria-label="Close" size="icon">
-        ✕
-      </Button>
-    );
-    await expectNoViolations(container);
-  });
-
-  it('Badge should have no a11y violations', async () => {
-    const { container } = render(<Badge>Status</Badge>);
-    await expectNoViolations(container);
-  });
-
-  it('Card with proper heading hierarchy should have no violations', async () => {
-    const { container } = render(
-      <Card>
-        <CardHeader>
-          <CardTitle>Card Title</CardTitle>
-          <CardDescription>Card description text</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>Card content</p>
-        </CardContent>
-      </Card>
-    );
-    await expectNoViolations(container);
-  });
-
-  it('Input with associated Label should have no violations', async () => {
-    const { container } = render(
-      <div>
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" type="email" placeholder="Enter email" />
-      </div>
-    );
-    await expectNoViolations(container);
-  });
-
-  it('Input with aria-label should have no violations', async () => {
-    const { container } = render(
-      <Input aria-label="Search" type="search" placeholder="Search..." />
-    );
-    await expectNoViolations(container);
-  });
-
-  it('Skeleton should have no a11y violations', async () => {
-    const { container } = render(
-      <div role="status" aria-label="Loading">
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-4 w-3/4" />
-      </div>
-    );
-    await expectNoViolations(container);
-  });
-
-  it('Multiple Buttons in a group should have no violations', async () => {
-    const { container } = render(
-      <div role="group" aria-label="Actions">
-        <Button variant="default">Save</Button>
-        <Button variant="outline">Cancel</Button>
-        <Button variant="destructive">Delete</Button>
-      </div>
-    );
-    await expectNoViolations(container);
-  });
-
-  it('Form with proper labels should have no violations', async () => {
-    const { container } = render(
-      <form aria-label="Login form">
-        <div>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" type="text" />
-        </div>
-        <div>
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
-        </div>
-        <Button type="submit">Sign In</Button>
-      </form>
-    );
-    await expectNoViolations(container);
-  });
-});

package/src/__tests__/action-bar.test.tsx

@@ -1,206 +0,0 @@
-/**
- * Tests for ActionBar (action:bar) renderer
- */
-
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ComponentRegistry } from '@object-ui/core';
-import { renderComponent, validateComponentRegistration } from './test-utils';
-
-// Ensure action renderers are loaded (side-effect imports via vitest.setup.tsx)
-
-describe('ActionBar (action:bar)', () => {
-  describe('registration', () => {
-    it('is registered in ComponentRegistry', () => {
-      const reg = validateComponentRegistration('action:bar');
-      expect(reg.isRegistered).toBe(true);
-      expect(reg.hasRenderer).toBe(true);
-      expect(reg.hasLabel).toBe(true);
-      expect(reg.hasInputs).toBe(true);
-      expect(reg.hasDefaultProps).toBe(true);
-    });
-  });
-
-  describe('rendering', () => {
-    it('renders nothing when actions array is empty', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        actions: [],
-      });
-      expect(container.innerHTML).toBe('');
-    });
-
-    it('renders action buttons for provided actions', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        actions: [
-          { name: 'save', label: 'Save', type: 'script', component: 'action:button' },
-          { name: 'cancel', label: 'Cancel', type: 'script', component: 'action:button' },
-        ],
-      });
-      expect(container.textContent).toContain('Save');
-      expect(container.textContent).toContain('Cancel');
-    });
-
-    it('renders with role="toolbar" and aria-label', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        actions: [
-          { name: 'test', label: 'Test', type: 'script' },
-        ],
-      });
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar).toBeTruthy();
-      expect(toolbar?.getAttribute('aria-label')).toBe('Actions');
-    });
-
-    it('filters actions by location', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        location: 'list_toolbar',
-        actions: [
-          { name: 'toolbar_action', label: 'Toolbar Action', type: 'script', locations: ['list_toolbar'] },
-          { name: 'header_action', label: 'Header Action', type: 'script', locations: ['record_header'] },
-          { name: 'both_action', label: 'Both Action', type: 'script', locations: ['list_toolbar', 'record_header'] },
-        ],
-      });
-      expect(container.textContent).toContain('Toolbar Action');
-      expect(container.textContent).not.toContain('Header Action');
-      expect(container.textContent).toContain('Both Action');
-    });
-
-    it('shows actions without locations when filtering by location', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        location: 'record_header',
-        actions: [
-          { name: 'no_loc', label: 'No Location', type: 'script' },
-          { name: 'has_loc', label: 'Has Location', type: 'script', locations: ['list_toolbar'] },
-        ],
-      });
-      // Action without locations should show in any location
-      expect(container.textContent).toContain('No Location');
-      expect(container.textContent).not.toContain('Has Location');
-    });
-
-    it('renders all actions when no location filter is set', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        actions: [
-          { name: 'a1', label: 'Action 1', type: 'script', locations: ['list_toolbar'] },
-          { name: 'a2', label: 'Action 2', type: 'script', locations: ['record_header'] },
-        ],
-      });
-      expect(container.textContent).toContain('Action 1');
-      expect(container.textContent).toContain('Action 2');
-    });
-
-    it('deduplicates actions by name', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        actions: [
-          { name: 'change_status', label: 'Change Status', type: 'script', component: 'action:button' },
-          { name: 'assign_user', label: 'Assign User', type: 'script', component: 'action:button' },
-          { name: 'change_status', label: 'Change Status', type: 'script', component: 'action:button' },
-        ],
-      });
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar).toBeTruthy();
-      // Should only render 2 actions (duplicates removed)
-      expect(toolbar!.children.length).toBe(2);
-      expect(container.textContent).toContain('Change Status');
-      expect(container.textContent).toContain('Assign User');
-    });
-
-    it('deduplicates actions after location filtering', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        location: 'record_header',
-        actions: [
-          { name: 'change_status', label: 'Change Status', type: 'script', locations: ['record_header'] },
-          { name: 'assign_user', label: 'Assign User', type: 'script', locations: ['record_header'] },
-          { name: 'change_status', label: 'Change Status', type: 'script', locations: ['record_header', 'record_more'] },
-          { name: 'assign_user', label: 'Assign User', type: 'script', locations: ['record_header'] },
-        ],
-      });
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar).toBeTruthy();
-      // Should only render 2 unique actions
-      expect(toolbar!.children.length).toBe(2);
-    });
-  });
-
-  describe('overflow', () => {
-    it('groups excess actions into overflow menu when maxVisible is exceeded', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        maxVisible: 2,
-        actions: [
-          { name: 'a1', label: 'Action 1', type: 'script' },
-          { name: 'a2', label: 'Action 2', type: 'script' },
-          { name: 'a3', label: 'Action 3', type: 'script' },
-          { name: 'a4', label: 'Action 4', type: 'script' },
-        ],
-      });
-      // First 2 should be visible as buttons
-      expect(container.textContent).toContain('Action 1');
-      expect(container.textContent).toContain('Action 2');
-      // Remaining 2 should be in a dropdown (rendered as action:menu trigger)
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar).toBeTruthy();
-      // There should be 3 children: 2 inline buttons + 1 menu trigger
-      const children = toolbar!.children;
-      expect(children.length).toBe(3);
-    });
-
-    it('does not show overflow when actions fit within maxVisible', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        maxVisible: 5,
-        actions: [
-          { name: 'a1', label: 'Action 1', type: 'script' },
-          { name: 'a2', label: 'Action 2', type: 'script' },
-        ],
-      });
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar!.children.length).toBe(2);
-    });
-  });
-
-  describe('styling', () => {
-    it('applies custom className', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        className: 'my-custom-bar',
-        actions: [
-          { name: 'test', label: 'Test', type: 'script' },
-        ],
-      });
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar?.className).toContain('my-custom-bar');
-    });
-
-    it('supports vertical direction', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        direction: 'vertical',
-        actions: [
-          { name: 'test', label: 'Test', type: 'script' },
-        ],
-      });
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar?.className).toContain('flex-col');
-    });
-
-    it('defaults to horizontal direction', () => {
-      const { container } = renderComponent({
-        type: 'action:bar',
-        actions: [
-          { name: 'test', label: 'Test', type: 'script' },
-        ],
-      });
-      const toolbar = container.querySelector('[role="toolbar"]');
-      expect(toolbar?.className).toContain('flex-row');
-    });
-  });
-});