@getmicdrop/svelte-components 5.17.1 → 5.17.4

package/dist/patterns/chat/ChatContainer.spec.js

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatContainer from './ChatContainer.svelte';
+
+describe('ChatContainer', () => {
+  test('renders without crashing', () => {
+    const { container } = render(ChatContainer);
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+
+  test('has flex column layout', () => {
+    const { container } = render(ChatContainer);
+    expect(container.querySelector('.flex-col, .flex')).toBeInTheDocument();
+  });
+
+  test('has scrollable content area', () => {
+    const { container } = render(ChatContainer);
+    expect(container.querySelector('.overflow-y-auto, [class*="overflow"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatContainer, { props: { className: 'my-container' } });
+    expect(container.querySelector('.my-container')).toBeInTheDocument();
+  });
+
+  test('has white background', () => {
+    const { container } = render(ChatContainer);
+    expect(container.querySelector('[class*="bg-white"]')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatDateDivider.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatDateDivider.spec.d.ts.map

package/dist/patterns/chat/ChatDateDivider.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatDateDivider.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatDateDivider.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatDateDivider.spec.js

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatDateDivider from './ChatDateDivider.svelte';
+
+describe('ChatDateDivider', () => {
+  test('renders the label', () => {
+    render(ChatDateDivider, { props: { label: 'Today' } });
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+
+  test('renders long date label', () => {
+    render(ChatDateDivider, { props: { label: 'Monday, Jan 15, 2024' } });
+    expect(screen.getByText('Monday, Jan 15, 2024')).toBeInTheDocument();
+  });
+
+  test('has centered text', () => {
+    const { container } = render(ChatDateDivider, { props: { label: 'Today' } });
+    expect(container.querySelector('.text-center')).toBeInTheDocument();
+  });
+
+  test('has pill styling on label', () => {
+    const { container } = render(ChatDateDivider, { props: { label: 'Today' } });
+    expect(container.querySelector('.rounded-full, [class*="rounded"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatDateDivider, { props: { label: 'Today', className: 'my-divider' } });
+    expect(container.querySelector('.my-divider')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatInvitationBubble.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatInvitationBubble.spec.d.ts.map

package/dist/patterns/chat/ChatInvitationBubble.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInvitationBubble.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatInvitationBubble.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatInvitationBubble.spec.js

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatInvitationBubble from './ChatInvitationBubble.svelte';
+
+describe('ChatInvitationBubble', () => {
+  test('renders performer name', () => {
+    render(ChatInvitationBubble, { props: { performerName: 'Alice' } });
+    expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
+  });
+
+  test('has blue background', () => {
+    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Bob' } });
+    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
+  });
+
+  test('renders invitation icon', () => {
+    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Test' } });
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('outbound true applies rounded-br-sm', () => {
+    const { container } = render(ChatInvitationBubble, {
+      props: { performerName: 'Test', outbound: true }
+    });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('outbound false applies rounded-bl-sm', () => {
+    const { container } = render(ChatInvitationBubble, {
+      props: { performerName: 'Test', outbound: false }
+    });
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('default outbound is true', () => {
+    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Test' } });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatInvitationBubble, {
+      props: { performerName: 'Test', className: 'my-invite' }
+    });
+    expect(container.querySelector('.my-invite')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatInvitationNotice.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatInvitationNotice.spec.d.ts.map

package/dist/patterns/chat/ChatInvitationNotice.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInvitationNotice.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatInvitationNotice.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatInvitationNotice.spec.js

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatInvitationNotice from './ChatInvitationNotice.svelte';
+
+describe('ChatInvitationNotice', () => {
+  test('renders performer name', () => {
+    render(ChatInvitationNotice, { props: { performerName: 'Alice' } });
+    expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
+  });
+
+  test('has blue text color', () => {
+    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Bob' } });
+    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
+  });
+
+  test('renders icon', () => {
+    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Test' } });
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('has inline flex layout', () => {
+    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Test' } });
+    expect(container.querySelector('.inline-flex, .flex')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatInvitationNotice, {
+      props: { performerName: 'Test', className: 'my-notice' }
+    });
+    expect(container.querySelector('.my-notice')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatMessageGroup.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatMessageGroup.spec.d.ts.map

package/dist/patterns/chat/ChatMessageGroup.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageGroup.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatMessageGroup.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatMessageGroup.spec.js

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatMessageGroup from './ChatMessageGroup.svelte';
+
+describe('ChatMessageGroup', () => {
+  test('renders with default inbound direction', () => {
+    const { container } = render(ChatMessageGroup);
+    const el = container.querySelector('.items-start');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('outbound uses flex-row-reverse', () => {
+    const { container } = render(ChatMessageGroup, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.flex-row-reverse')).toBeInTheDocument();
+  });
+
+  test('outbound uses items-end', () => {
+    const { container } = render(ChatMessageGroup, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.items-end')).toBeInTheDocument();
+  });
+
+  test('shows sender name for inbound', () => {
+    render(ChatMessageGroup, { props: { direction: 'inbound', senderName: 'Bob' } });
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+
+  test('hides sender name for outbound even when provided', () => {
+    const { container } = render(ChatMessageGroup, {
+      props: { direction: 'outbound', senderName: 'Bob' }
+    });
+    // senderName should not appear as standalone element for outbound
+    // but may appear in timestamp area
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+
+  test('shows timestamp', () => {
+    render(ChatMessageGroup, { props: { timestamp: '3:45 PM' } });
+    expect(screen.getByText(/3:45 PM/)).toBeInTheDocument();
+  });
+
+  test('outbound timestamp includes sender name', () => {
+    const { container } = render(ChatMessageGroup, {
+      props: { direction: 'outbound', senderName: 'Alice', timestamp: '3:45 PM' }
+    });
+    expect(container.textContent).toContain('Alice');
+    expect(container.textContent).toContain('3:45 PM');
+  });
+
+  test('hides timestamp when not provided', () => {
+    const { container } = render(ChatMessageGroup, { props: { direction: 'inbound' } });
+    expect(container.textContent.trim()).toBe('');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatMessageGroup, { props: { className: 'my-group' } });
+    expect(container.querySelector('.my-group')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatSlotUpdate.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatSlotUpdate.spec.d.ts.map

package/dist/patterns/chat/ChatSlotUpdate.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSlotUpdate.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatSlotUpdate.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatSlotUpdate.spec.js

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatSlotUpdate from './ChatSlotUpdate.svelte';
+
+describe('ChatSlotUpdate', () => {
+  test('renders fromValue and toValue', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: '8:00 PM', toValue: '9:00 PM' }
+    });
+    expect(container.textContent).toContain('8:00 PM');
+    expect(container.textContent).toContain('9:00 PM');
+  });
+
+  test('renders arrow between values', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'Slot A', toValue: 'Slot B' }
+    });
+    expect(container.textContent).toContain('→');
+  });
+
+  test('bubble variant has rounded styling', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'bubble' }
+    });
+    const el = container.querySelector('[class*="rounded"]');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('bubble variant inbound has rounded-bl-sm', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'bubble', outbound: false }
+    });
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('bubble variant outbound has rounded-br-sm', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'bubble', outbound: true }
+    });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('inline variant has smaller styling', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'inline' }
+    });
+    const el = container.querySelector('.text-xs');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('default variant is bubble', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B' }
+    });
+    const el = container.querySelector('[class*="rounded"]');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', className: 'custom-slot' }
+    });
+    expect(container.querySelector('.custom-slot')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatStatusBadge.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatStatusBadge.spec.d.ts.map

package/dist/patterns/chat/ChatStatusBadge.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusBadge.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusBadge.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatStatusBadge.spec.js

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatStatusBadge from './ChatStatusBadge.svelte';
+
+describe('ChatStatusBadge', () => {
+  test('renders confirmed status with green styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed' } });
+    expect(screen.getByText(/confirmed/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="green"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders declined status with red styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'declined' } });
+    expect(screen.getByText(/declined/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="red"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders canceled status with red styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'canceled' } });
+    expect(screen.getByText(/canceled/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="red"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders invited status with blue styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'invited' } });
+    expect(screen.getByText(/invited/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="blue"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders unknown status with gray styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'pending' } });
+    expect(screen.getByText(/pending/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="gray"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('outbound applies rounded-br-sm', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', outbound: true } });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('inbound applies rounded-bl-sm', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', outbound: false } });
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', className: 'my-badge' } });
+    expect(container.querySelector('.my-badge')).toBeInTheDocument();
+  });
+
+  test('renders icon for confirmed status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  test('renders icon for declined status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'declined' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  test('renders icon for invited status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'invited' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  test('no icon for unknown status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'something-else' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeNull();
+  });
+});

package/dist/patterns/chat/ChatStatusTransition.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatStatusTransition.spec.d.ts.map

package/dist/patterns/chat/ChatStatusTransition.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusTransition.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusTransition.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatStatusTransition.spec.js

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatStatusTransition from './ChatStatusTransition.svelte';
+
+describe('ChatStatusTransition', () => {
+  test('renders from and to status text', () => {
+    render(ChatStatusTransition, { props: { fromStatus: 'invited', toStatus: 'confirmed' } });
+    expect(screen.getByText(/invited/i)).toBeInTheDocument();
+    expect(screen.getByText(/confirmed/i)).toBeInTheDocument();
+  });
+
+  test('renders arrow separator', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed' }
+    });
+    expect(container.textContent).toContain('→');
+  });
+
+  test('confirmed status shows icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('declined status shows icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'declined' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('canceled status shows icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'canceled' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('unknown status does not show icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'unknown', toStatus: 'unknown' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBe(0);
+  });
+
+  test('confirmed from shows green color', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'declined' }
+    });
+    const green = container.querySelector('[class*="green"]');
+    expect(green).toBeInTheDocument();
+  });
+
+  test('declined to shows red color', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'declined' }
+    });
+    const red = container.querySelector('[class*="red"]');
+    expect(red).toBeInTheDocument();
+  });
+
+  test('invited status shows blue color', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed' }
+    });
+    const blue = container.querySelector('[class*="blue"]');
+    expect(blue).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed', className: 'my-transition' }
+    });
+    expect(container.querySelector('.my-transition')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatTextBubble.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatTextBubble.spec.d.ts.map

package/dist/patterns/chat/ChatTextBubble.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTextBubble.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatTextBubble.spec.js"],"names":[],"mappings":""}

package/dist/patterns/chat/ChatTextBubble.spec.js

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatTextBubble from './ChatTextBubble.svelte';
+
+describe('ChatTextBubble', () => {
+  test('renders with default inbound styling', () => {
+    const { container } = render(ChatTextBubble);
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('inbound has gray background', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'inbound' } });
+    expect(container.querySelector('[class*="gray"]')).toBeInTheDocument();
+  });
+
+  test('outbound has blue background', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'outbound' } });
+    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
+  });
+
+  test('outbound has rounded-br-sm', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('outbound has white text', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.text-white')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatTextBubble, { props: { className: 'my-text' } });
+    expect(container.querySelector('.my-text')).toBeInTheDocument();
+  });
+});

package/dist/patterns/data/DataTable.spec.js

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, cleanup } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
 import DataTable from './DataTable.svelte';
 
 describe('DataTable Component', () => {
@@ -193,4 +194,64 @@ describe('DataTable Component', () => {
       expect(tbody.className).not.toContain('[&>tr]:hover');
     });
   });
+
+  describe('header snippet', () => {
+    it('does not render thead when header is not provided', () => {
+      const { container } = render(DataTable);
+      const thead = container.querySelector('thead');
+      expect(thead).not.toBeInTheDocument();
+    });
+
+    it('renders thead when header snippet is provided', () => {
+      const header = createRawSnippet(() => ({
+        render: () => `<tr><th>Column</th></tr>`
+      }));
+      const { container } = render(DataTable, { props: { header } });
+      const thead = container.querySelector('thead');
+      expect(thead).toBeInTheDocument();
+      expect(thead).toHaveClass('text-xs', 'uppercase', 'bg-gray-50');
+    });
+
+    it('header receives cellSize as argument', () => {
+      const header = createRawSnippet(() => ({
+        render: () => `<tr><th>Name</th></tr>`
+      }));
+      const { container } = render(DataTable, { props: { header, size: 'lg' } });
+      const thead = container.querySelector('thead');
+      expect(thead).toBeInTheDocument();
+      expect(thead.textContent).toContain('Name');
+    });
+
+    it('thead has dark mode classes', () => {
+      const header = createRawSnippet(() => ({
+        render: () => `<tr><th>Col</th></tr>`
+      }));
+      const { container } = render(DataTable, { props: { header } });
+      const thead = container.querySelector('thead');
+      expect(thead.className).toContain('dark:bg-gray-700');
+    });
+  });
+
+  describe('children snippet', () => {
+    it('renders children content inside tbody', () => {
+      const children = createRawSnippet(() => ({
+        render: () => `<tr><td>Row data</td></tr>`
+      }));
+      const { container } = render(DataTable, { props: { children } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.textContent).toContain('Row data');
+    });
+
+    it('renders both header and children together', () => {
+      const header = createRawSnippet(() => ({
+        render: () => `<tr><th>Header</th></tr>`
+      }));
+      const children = createRawSnippet(() => ({
+        render: () => `<tr><td>Body</td></tr>`
+      }));
+      const { container } = render(DataTable, { props: { header, children } });
+      expect(container.querySelector('thead')).toBeInTheDocument();
+      expect(container.querySelector('tbody').textContent).toContain('Body');
+    });
+  });
 });

package/dist/patterns/forms/FormGrid.spec.js

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
 import { expect, describe, test } from 'vitest';
 import FormGrid from './FormGrid.svelte';
 
@@ -123,3 +124,36 @@ describe('FormGrid Combinations', () => {
     expect(grid).toHaveClass('extra');
   });
 });
+
+describe('FormGrid children snippet', () => {
+  test('renders children content inside grid', () => {
+    const children = createRawSnippet(() => ({
+      render: () => `<div class="field">Field 1</div>`
+    }));
+    const { container } = render(FormGrid, { props: { children } });
+    const grid = container.querySelector('.grid');
+    expect(grid.textContent).toContain('Field 1');
+    expect(grid.querySelector('.field')).toBeInTheDocument();
+  });
+
+  test('renders without children (optional chaining)', () => {
+    const { container } = render(FormGrid);
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeInTheDocument();
+    expect(grid.children.length).toBe(0);
+  });
+});
+
+describe('FormGrid fallback values', () => {
+  test('invalid cols falls back to md:grid-cols-2', () => {
+    const { container } = render(FormGrid, { props: { cols: 99 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('md:grid-cols-2');
+  });
+
+  test('invalid gap falls back to gap-4', () => {
+    const { container } = render(FormGrid, { props: { gap: 99 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-4');
+  });
+});