@getmicdrop/svelte-components 5.5.4 → 5.5.5

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

@@ -0,0 +1,153 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import FormSection from './FormSection.svelte';
+
+describe('FormSection Component', () => {
+  test('renders a section element', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('section')).toBeInTheDocument();
+  });
+
+  test('has space-y-4 class', () => {
+    const { container } = render(FormSection);
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('space-y-4');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(FormSection, { props: { class: 'custom-section' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('custom-section');
+  });
+});
+
+describe('FormSection Title', () => {
+  test('no title renders no h3', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('h3')).not.toBeInTheDocument();
+  });
+
+  test('title prop renders h3', () => {
+    render(FormSection, { props: { title: 'Personal Info' } });
+    expect(screen.getByText('Personal Info')).toBeInTheDocument();
+  });
+
+  test('title is in h3 element', () => {
+    const { container } = render(FormSection, { props: { title: 'Contact' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toBeInTheDocument();
+    expect(h3).toHaveTextContent('Contact');
+  });
+});
+
+describe('FormSection Description', () => {
+  test('no description renders no p', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description prop renders p', () => {
+    render(FormSection, { props: { description: 'Enter your details' } });
+    expect(screen.getByText('Enter your details')).toBeInTheDocument();
+  });
+
+  test('description is in p element', () => {
+    const { container } = render(FormSection, { props: { description: 'Fill the form' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p).toHaveTextContent('Fill the form');
+  });
+});
+
+describe('FormSection Header Area', () => {
+  test('no header when no title or description', () => {
+    const { container } = render(FormSection);
+    const headerDiv = container.querySelector('section > div.space-y-1');
+    expect(headerDiv).not.toBeInTheDocument();
+  });
+
+  test('header appears when title provided', () => {
+    const { container } = render(FormSection, { props: { title: 'Title' } });
+    const headerDiv = container.querySelector('section > div.space-y-1');
+    expect(headerDiv).toBeInTheDocument();
+  });
+
+  test('header appears when description provided', () => {
+    const { container } = render(FormSection, { props: { description: 'Desc' } });
+    const headerDiv = container.querySelector('section > div.space-y-1');
+    expect(headerDiv).toBeInTheDocument();
+  });
+
+  test('header shows both title and description', () => {
+    const { container } = render(FormSection, { props: { title: 'My Title', description: 'My Desc' } });
+    expect(screen.getByText('My Title')).toBeInTheDocument();
+    expect(screen.getByText('My Desc')).toBeInTheDocument();
+  });
+});
+
+describe('FormSection Divider', () => {
+  test('no divider by default', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('hr')).not.toBeInTheDocument();
+  });
+
+  test('divider=true shows hr', () => {
+    const { container } = render(FormSection, { props: { divider: true } });
+    expect(container.querySelector('hr')).toBeInTheDocument();
+  });
+
+  test('divider=false hides hr', () => {
+    const { container } = render(FormSection, { props: { divider: false } });
+    expect(container.querySelector('hr')).not.toBeInTheDocument();
+  });
+
+  test('divider has border-gray-200', () => {
+    const { container } = render(FormSection, { props: { divider: true } });
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('border-gray-200');
+  });
+
+  test('divider has dark mode class', () => {
+    const { container } = render(FormSection, { props: { divider: true } });
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('dark:border-gray-700');
+  });
+});
+
+describe('FormSection Content Area', () => {
+  test('has content div with space-y-4', () => {
+    const { container } = render(FormSection);
+    const contentDiv = container.querySelector('section > div.space-y-4');
+    expect(contentDiv).toBeInTheDocument();
+  });
+});
+
+describe('FormSection Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(FormSection, {
+      props: {
+        title: 'Address',
+        description: 'Your mailing address',
+        divider: true,
+        class: 'mt-6'
+      }
+    });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('mt-6');
+    expect(container.querySelector('hr')).toBeInTheDocument();
+    expect(screen.getByText('Address')).toBeInTheDocument();
+    expect(screen.getByText('Your mailing address')).toBeInTheDocument();
+  });
+
+  test('title only without description', () => {
+    const { container } = render(FormSection, { props: { title: 'Settings' } });
+    expect(container.querySelector('h3')).toBeInTheDocument();
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description only without title', () => {
+    const { container } = render(FormSection, { props: { description: 'Optional info' } });
+    expect(container.querySelector('h3')).not.toBeInTheDocument();
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+});

package/dist/patterns/layout/Sidebar.spec.d.ts

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

package/dist/patterns/layout/Sidebar.spec.d.ts.map

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

package/dist/patterns/layout/Sidebar.spec.js

@@ -0,0 +1,159 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Sidebar from './Sidebar.svelte';
+
+describe('Sidebar Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(Sidebar);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has flex layout', () => {
+    const { container } = render(Sidebar);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('flex');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Sidebar, { props: { class: 'custom-sidebar' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-sidebar');
+  });
+});
+
+describe('Sidebar Position', () => {
+  test('default position is right', () => {
+    const { container } = render(Sidebar);
+    // When position is right, main comes first then aside
+    const children = container.firstElementChild.children;
+    expect(children[0].tagName).toBe('MAIN');
+    expect(children[1].tagName).toBe('ASIDE');
+  });
+
+  test('position left puts sidebar first', () => {
+    const { container } = render(Sidebar, { props: { sidebarPosition: 'left' } });
+    const children = container.firstElementChild.children;
+    expect(children[0].tagName).toBe('ASIDE');
+    expect(children[1].tagName).toBe('MAIN');
+  });
+
+  test('position right puts main first', () => {
+    const { container } = render(Sidebar, { props: { sidebarPosition: 'right' } });
+    const children = container.firstElementChild.children;
+    expect(children[0].tagName).toBe('MAIN');
+    expect(children[1].tagName).toBe('ASIDE');
+  });
+});
+
+describe('Sidebar Width', () => {
+  test('default width is medium', () => {
+    const { container } = render(Sidebar);
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-80');
+  });
+
+  test('narrow width applies lg:w-72', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'narrow' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-72');
+  });
+
+  test('medium width applies lg:w-80', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'medium' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-80');
+  });
+
+  test('wide width applies lg:w-96', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'wide' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-96');
+  });
+});
+
+describe('Sidebar Main Width', () => {
+  test('narrow sidebar gives main lg:w-[calc(100%-18rem)]', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'narrow' } });
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('lg:w-[calc(100%-18rem)]');
+  });
+
+  test('medium sidebar gives main lg:w-[calc(100%-20rem)]', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'medium' } });
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('lg:w-[calc(100%-20rem)]');
+  });
+
+  test('wide sidebar gives main lg:w-[calc(100%-24rem)]', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'wide' } });
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('lg:w-[calc(100%-24rem)]');
+  });
+});
+
+describe('Sidebar Responsive', () => {
+  test('has responsive flex direction', () => {
+    const { container } = render(Sidebar);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('flex-col');
+    expect(wrapper).toHaveClass('lg:flex-row');
+  });
+
+  test('sidebar is full width on mobile', () => {
+    const { container } = render(Sidebar);
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('w-full');
+  });
+
+  test('main is full width on mobile', () => {
+    const { container } = render(Sidebar);
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('w-full');
+  });
+
+  test('has gap between sidebar and main', () => {
+    const { container } = render(Sidebar);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('gap-6');
+  });
+});
+
+describe('Sidebar Combinations', () => {
+  test('all props together - left narrow', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'narrow',
+        sidebarPosition: 'left',
+        class: 'custom-layout'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-layout');
+
+    const children = wrapper.children;
+    expect(children[0].tagName).toBe('ASIDE');
+    expect(children[0]).toHaveClass('lg:w-72');
+
+    expect(children[1].tagName).toBe('MAIN');
+    expect(children[1]).toHaveClass('lg:w-[calc(100%-18rem)]');
+  });
+
+  test('all props together - right wide', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'wide',
+        sidebarPosition: 'right',
+        class: 'another-layout'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('another-layout');
+
+    const children = wrapper.children;
+    expect(children[0].tagName).toBe('MAIN');
+    expect(children[0]).toHaveClass('lg:w-[calc(100%-24rem)]');
+
+    expect(children[1].tagName).toBe('ASIDE');
+    expect(children[1]).toHaveClass('lg:w-96');
+  });
+});

package/dist/patterns/navigation/BottomNav.svelte

@@ -46,18 +46,18 @@
 {#each links as { label, href, icon }}
   <a
     {href}
-    class={`flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
+    class={`bottom-nav-item flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
       ${typography.textMuted} transition-colors duration-150
       hover:text-gray-900 hover:no-underline dark:hover:text-white
       select-none touch-manipulation
-      ${isActive(href, currentPath) ? 'text-blue-700 dark:text-blue-500' : ''}`}
+      ${isActive(href, currentPath) ? 'active text-blue-700 dark:text-blue-500' : ''}`}
     aria-label={label}
     style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
   >
-    <span class="relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
+    <span class="bottom-nav-icon relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
       <Icon name={icon} size="24" />
       {#if label === "Shows" && shows?.invitation?.length > 0}
-        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+        <span class="notification-dot absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
       {/if}
     </span>
   </a>

package/dist/patterns/navigation/Header.spec.js

@@ -56,69 +56,73 @@ describe('Header', () => {
     });
     describe('back button mode', () => {
         it('shows back button when showBackButton is true', () => {
-            const { container } = render(Header, { ...defaultProps, showBackButton: true });
-            const backButton = container.querySelector('.header-back-button');
+            render(Header, { ...defaultProps, showBackButton: true });
+            const backButton = screen.getByText('Back');
             expect(backButton).toBeTruthy();
         });
         it('does not show back button by default', () => {
-            const { container } = render(Header, defaultProps);
-            const backButton = container.querySelector('.header-back-button');
-            expect(backButton).toBeFalsy();
+            render(Header, defaultProps);
+            const backButtons = screen.queryAllByText('Back');
+            expect(backButtons.length).toBe(0);
         });
     });
     describe('avatar buttons', () => {
         it('renders mobile avatar button', () => {
             const { container } = render(Header, defaultProps);
-            const mobileButton = container.querySelector('.avatar-button--mobile');
+            // The mobile button has "block md:hidden" class
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
             expect(mobileButton).toBeTruthy();
         });
         it('renders desktop avatar button', () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            // The desktop button has "hidden md:block" class
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             expect(desktopButton).toBeTruthy();
         });
     });
     describe('desktop dropdown', () => {
         it('shows dropdown when desktop avatar is clicked', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
-            const dropdown = container.querySelector('.desktop-dropdown');
+            // Look for the dropdown by its class - it's an absolute positioned div with specific classes
+            const dropdown = container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]');
             expect(dropdown).toBeTruthy();
         });
         it('displays user name and email in dropdown', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
             expect(screen.getByText('Test Performer')).toBeTruthy();
             expect(screen.getByText('test@example.com')).toBeTruthy();
         });
         it('displays dropdown links', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
             expect(screen.getByText('Account Settings')).toBeTruthy();
             expect(screen.getByText('Payment Settings')).toBeTruthy();
         });
         it('displays sign out button', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
             expect(screen.getByText('Sign out')).toBeTruthy();
         });
         it('closes dropdown when backdrop is clicked', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
-            const backdrop = container.querySelector('.dropdown-backdrop');
+            // The backdrop is the fixed inset-0 div with z-30
+            const backdrop = container.querySelector('div.fixed.inset-0.z-30');
             await fireEvent.click(backdrop);
-            const dropdown = container.querySelector('.desktop-dropdown');
+            const dropdown = container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]');
             expect(dropdown).toBeFalsy();
         });
         it('calls signoutHandler when sign out is clicked', async () => {
             const signoutHandler = vi.fn();
             const { container } = render(Header, { ...defaultProps, signoutHandler });
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
             const signOutButton = screen.getByText('Sign out');
             await fireEvent.click(signOutButton);
@@ -126,34 +130,39 @@ describe('Header', () => {
         });
         it('toggles dropdown on repeated clicks', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
-            expect(container.querySelector('.desktop-dropdown')).toBeTruthy();
+            expect(container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]')).toBeTruthy();
             await fireEvent.click(desktopButton);
-            expect(container.querySelector('.desktop-dropdown')).toBeFalsy();
+            expect(container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]')).toBeFalsy();
         });
     });
     describe('mobile sheet', () => {
         it('triggers mobile sheet state when mobile avatar is clicked', async () => {
             const { container } = render(Header, defaultProps);
-            const mobileButton = container.querySelector('.avatar-button--mobile');
-            // Click should trigger the sheet opening (internal state)
-            await fireEvent.click(mobileButton);
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
             // The mobile button should exist and be clickable
             expect(mobileButton).toBeTruthy();
+            // Click should trigger the sheet opening (internal state)
+            await fireEvent.click(mobileButton);
+            // The mobile sheet uses portal action to render to document.body,
+            // so we need to check in document.body instead of container
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            expect(mobileSheet).toBeTruthy();
         });
     });
     describe('navigation active state', () => {
         it('marks current path as active', () => {
             const { container } = render(Header, defaultProps);
             const showsLink = container.querySelector('a[href="/shows"]');
-            expect(showsLink.classList.contains('active')).toBe(true);
+            // The active link should have 'text-blue-700' class (or dark mode 'dark:text-blue-500')
+            expect(showsLink.classList.contains('text-blue-700')).toBe(true);
         });
     });
     describe('default values', () => {
         it('shows "Performer" when name is empty', async () => {
             const { container } = render(Header, { ...defaultProps, name: '' });
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
             expect(screen.getByText('Performer')).toBeTruthy();
         });

package/dist/patterns/page/PageHeader.spec.d.ts

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

package/dist/patterns/page/PageHeader.spec.d.ts.map

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

package/dist/patterns/page/PageHeader.spec.js

@@ -0,0 +1,167 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import PageHeader from './PageHeader.svelte';
+
+describe('PageHeader Component', () => {
+  test('renders a header element', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('header')).toBeInTheDocument();
+  });
+
+  test('has space-y-4 class', () => {
+    const { container } = render(PageHeader);
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('space-y-4');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(PageHeader, { props: { class: 'custom-header' } });
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('custom-header');
+  });
+});
+
+describe('PageHeader Title', () => {
+  test('no title renders no h1', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('h1')).not.toBeInTheDocument();
+  });
+
+  test('title prop renders h1', () => {
+    render(PageHeader, { props: { title: 'Dashboard' } });
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+  });
+
+  test('title is in h1 element', () => {
+    const { container } = render(PageHeader, { props: { title: 'Settings' } });
+    const h1 = container.querySelector('h1');
+    expect(h1).toBeInTheDocument();
+    expect(h1).toHaveTextContent('Settings');
+  });
+});
+
+describe('PageHeader Subtitle', () => {
+  test('no subtitle renders no p', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('subtitle prop renders p', () => {
+    render(PageHeader, { props: { subtitle: 'Manage your account' } });
+    expect(screen.getByText('Manage your account')).toBeInTheDocument();
+  });
+
+  test('subtitle is in p element', () => {
+    const { container } = render(PageHeader, { props: { subtitle: 'Welcome back' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p).toHaveTextContent('Welcome back');
+  });
+
+  test('subtitle p has mt-1 margin', () => {
+    const { container } = render(PageHeader, { props: { subtitle: 'Test' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('mt-1');
+  });
+});
+
+describe('PageHeader Breadcrumb', () => {
+  test('no breadcrumb by default', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('nav')).not.toBeInTheDocument();
+  });
+
+  test('empty breadcrumb array renders no nav', () => {
+    const { container } = render(PageHeader, { props: { breadcrumb: [] } });
+    expect(container.querySelector('nav')).not.toBeInTheDocument();
+  });
+
+  test('breadcrumb with items renders nav', () => {
+    const { container } = render(PageHeader, {
+      props: {
+        breadcrumb: [
+          { name: 'Home', href: '/' },
+          { name: 'Settings', href: '/settings' }
+        ]
+      }
+    });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+  });
+
+  test('breadcrumb links are rendered', () => {
+    render(PageHeader, {
+      props: {
+        breadcrumb: [{ name: 'Home', href: '/' }]
+      }
+    });
+    expect(screen.getByText('Home')).toBeInTheDocument();
+  });
+});
+
+describe('PageHeader Layout', () => {
+  test('has flex container for title and actions', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toBeInTheDocument();
+  });
+
+  test('flex container has responsive classes', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('flex-col');
+    expect(flexDiv).toHaveClass('sm:flex-row');
+  });
+
+  test('flex container has gap-4', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('gap-4');
+  });
+
+  test('flex container has sm:items-center', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('sm:items-center');
+  });
+
+  test('flex container has sm:justify-between', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('sm:justify-between');
+  });
+});
+
+describe('PageHeader Combinations', () => {
+  test('title and subtitle together', () => {
+    render(PageHeader, { props: { title: 'Users', subtitle: 'Manage all users' } });
+    expect(screen.getByText('Users')).toBeInTheDocument();
+    expect(screen.getByText('Manage all users')).toBeInTheDocument();
+  });
+
+  test('breadcrumb with title', () => {
+    const { container } = render(PageHeader, {
+      props: {
+        title: 'Profile',
+        breadcrumb: [{ name: 'Settings', href: '/settings' }]
+      }
+    });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(PageHeader, {
+      props: {
+        title: 'Account',
+        subtitle: 'Update your details',
+        breadcrumb: [{ name: 'Home', href: '/' }],
+        class: 'mb-8'
+      }
+    });
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('mb-8');
+    expect(container.querySelector('nav')).toBeInTheDocument();
+    expect(screen.getByText('Account')).toBeInTheDocument();
+    expect(screen.getByText('Update your details')).toBeInTheDocument();
+  });
+});

package/dist/patterns/page/PageLayout.spec.d.ts

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

package/dist/patterns/page/PageLayout.spec.d.ts.map

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