@getmicdrop/svelte-components 5.17.1 → 5.17.4

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

@@ -1,6 +1,14 @@
-import { render } from '@testing-library/svelte';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
 import { expect, describe, test } from 'vitest';
 import Sidebar from './Sidebar.svelte';
+import SidebarTestWrapper from './SidebarTestWrapper.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
 
 describe('Sidebar Component', () => {
   test('renders a wrapper div', () => {
@@ -157,3 +165,234 @@ describe('Sidebar Combinations', () => {
     expect(children[1]).toHaveClass('lg:w-96');
   });
 });
+
+describe('Sidebar Snippet Rendering (lines 25-32)', () => {
+  test('renders sidebar snippet content when provided', () => {
+    render(SidebarTestWrapper, {
+      props: { showSidebar: true, sidebarText: 'Stats Panel' }
+    });
+
+    expect(screen.getByTestId('sidebar-content')).toBeInTheDocument();
+    expect(screen.getByTestId('sidebar-content').textContent).toBe('Stats Panel');
+  });
+
+  test('renders children snippet content when provided', () => {
+    render(SidebarTestWrapper, {
+      props: { showChildren: true, childrenText: 'Main Area' }
+    });
+
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+    expect(screen.getByTestId('main-content').textContent).toBe('Main Area');
+  });
+
+  test('renders both sidebar and children with left position', () => {
+    render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showSidebar: true,
+        sidebarText: 'Left Sidebar',
+        showChildren: true,
+        childrenText: 'Page Content'
+      }
+    });
+
+    expect(screen.getByTestId('sidebar-content').textContent).toBe('Left Sidebar');
+    expect(screen.getByTestId('main-content').textContent).toBe('Page Content');
+  });
+
+  test('renders both sidebar and children with right position', () => {
+    render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'right',
+        showSidebar: true,
+        sidebarText: 'Right Sidebar',
+        showChildren: true,
+        childrenText: 'Page Body'
+      }
+    });
+
+    expect(screen.getByTestId('sidebar-content').textContent).toBe('Right Sidebar');
+    expect(screen.getByTestId('main-content').textContent).toBe('Page Body');
+  });
+
+  test('sidebar content appears inside aside element with left position', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showSidebar: true
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+    expect(aside.querySelector('[data-testid="sidebar-content"]')).toBeInTheDocument();
+  });
+
+  test('children content appears inside main element with left position', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showChildren: true
+      }
+    });
+
+    const main = container.querySelector('main');
+    expect(main).toBeInTheDocument();
+    expect(main.querySelector('[data-testid="main-content"]')).toBeInTheDocument();
+  });
+
+  test('left position renders aside before main in DOM', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'left',
+        showSidebar: true,
+        showChildren: true
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    const els = wrapper.children;
+    expect(els[0].tagName).toBe('ASIDE');
+    expect(els[1].tagName).toBe('MAIN');
+  });
+
+  test('right position renders main before aside in DOM', () => {
+    const { container } = render(SidebarTestWrapper, {
+      props: {
+        sidebarPosition: 'right',
+        showSidebar: true,
+        showChildren: true
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    const els = wrapper.children;
+    expect(els[0].tagName).toBe('MAIN');
+    expect(els[1].tagName).toBe('ASIDE');
+  });
+});
+
+describe('Sidebar with Raw Snippets (lines 23, 25-32)', () => {
+  test('renders sidebar and children snippets directly with left position', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarPosition: 'left',
+        sidebar: textSnippet('Side Panel'),
+        children: textSnippet('Main Panel')
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+    expect(aside.textContent).toContain('Side Panel');
+
+    const main = container.querySelector('main');
+    expect(main).toBeInTheDocument();
+    expect(main.textContent).toContain('Main Panel');
+  });
+
+  test('renders sidebar and children snippets directly with right position', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarPosition: 'right',
+        sidebar: textSnippet('Right Side'),
+        children: textSnippet('Main Body')
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside.textContent).toContain('Right Side');
+
+    const main = container.querySelector('main');
+    expect(main.textContent).toContain('Main Body');
+  });
+
+  test('renders with sidebar snippet only (no children)', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebar: textSnippet('Only Sidebar')
+      }
+    });
+
+    const aside = container.querySelector('aside');
+    expect(aside.textContent).toContain('Only Sidebar');
+  });
+
+  test('renders with children snippet only (no sidebar)', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        children: textSnippet('Only Main')
+      }
+    });
+
+    const main = container.querySelector('main');
+    expect(main.textContent).toContain('Only Main');
+  });
+
+  test('renders with className interpolation', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        class: 'test-class',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('test-class');
+    expect(wrapper).toHaveClass('flex');
+  });
+
+  test('renders without className (empty string default)', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarPosition: 'left',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('gap-6');
+  });
+
+  test('handles invalid sidebarWidth gracefully', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'invalid',
+        sidebarPosition: 'left',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    // Should still render without crashing
+    const aside = container.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+  });
+
+  test('handles invalid sidebarWidth on right position', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'invalid',
+        sidebarPosition: 'right',
+        sidebar: textSnippet('Sidebar'),
+        children: textSnippet('Main')
+      }
+    });
+
+    const main = container.querySelector('main');
+    expect(main).toBeInTheDocument();
+  });
+
+  test('renders with undefined className (no class prop)', () => {
+    const { container } = render(Sidebar);
+
+    const wrapper = container.firstElementChild;
+    // className defaults to empty string, so the class should not contain undefined
+    const classAttr = wrapper.getAttribute('class');
+    expect(classAttr).not.toContain('undefined');
+    expect(classAttr).toContain('flex');
+  });
+});

package/dist/patterns/layout/SidebarTestWrapper.svelte

@@ -0,0 +1,34 @@
+<script>
+  import Sidebar from "./Sidebar.svelte";
+
+  /** @type {{
+    sidebarWidth?: 'narrow' | 'medium' | 'wide',
+    sidebarPosition?: 'left' | 'right',
+    class?: string,
+    showSidebar?: boolean,
+    sidebarText?: string,
+    showChildren?: boolean,
+    childrenText?: string,
+  }} */
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    class: className = '',
+    showSidebar = false,
+    sidebarText = 'Sidebar Content',
+    showChildren = false,
+    childrenText = 'Main Content',
+  } = $props();
+</script>
+
+<Sidebar {sidebarWidth} {sidebarPosition} class={className}>
+  {#snippet sidebar()}
+    {#if showSidebar}
+      <div data-testid="sidebar-content">{sidebarText}</div>
+    {/if}
+  {/snippet}
+
+  {#if showChildren}
+    <div data-testid="main-content">{childrenText}</div>
+  {/if}
+</Sidebar>

package/dist/patterns/layout/SidebarTestWrapper.svelte.d.ts

@@ -0,0 +1,23 @@
+export default SidebarTestWrapper;
+type SidebarTestWrapper = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        sidebarWidth?: "medium" | "narrow" | "wide" | undefined;
+        sidebarPosition?: "left" | "right" | undefined;
+        class?: string | undefined;
+        showSidebar?: boolean | undefined;
+        sidebarText?: string | undefined;
+        showChildren?: boolean | undefined;
+        childrenText?: string | undefined;
+    }>): void;
+};
+declare const SidebarTestWrapper: import("svelte").Component<{
+    sidebarWidth?: "narrow" | "medium" | "wide";
+    sidebarPosition?: "left" | "right";
+    class?: string;
+    showSidebar?: boolean;
+    sidebarText?: string;
+    showChildren?: boolean;
+    childrenText?: string;
+}, {}, "">;
+//# sourceMappingURL=SidebarTestWrapper.svelte.d.ts.map

package/dist/patterns/layout/SidebarTestWrapper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/layout/SidebarTestWrapper.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAkDA;mBARmB,QAAQ,GAAG,QAAQ,GAAG,MAAM;sBACzB,MAAM,GAAG,OAAO;YAC1B,MAAM;kBACA,OAAO;kBACP,MAAM;mBACL,OAAO;mBACP,MAAM;WAEwC"}

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

@@ -136,6 +136,18 @@ describe('Header', () => {
             await fireEvent.click(desktopButton);
             expect(container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]')).toBeFalsy();
         });
+        it('navigates and closes dropdown when a dropdown link is clicked', async () => {
+            const { goto } = await import('$app/navigation');
+            const { container } = render(Header, defaultProps);
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
+            await fireEvent.click(desktopButton);
+            // Click the "Account Settings" menu item in the dropdown
+            const accountSettings = screen.getByText('Account Settings');
+            await fireEvent.click(accountSettings);
+            expect(goto).toHaveBeenCalledWith('/account-settings');
+            // Dropdown should be closed after clicking
+            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 () => {
@@ -150,6 +162,69 @@ describe('Header', () => {
             const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
             expect(mobileSheet).toBeTruthy();
         });
+        it('navigates when a mobile sheet dropdown link is clicked', async () => {
+            const { goto } = await import('$app/navigation');
+            const { container } = render(Header, defaultProps);
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
+            await fireEvent.click(mobileButton);
+            // Mobile sheet renders via portal in document.body
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            expect(mobileSheet).toBeTruthy();
+            // Click the first dropdown link in the mobile sheet
+            const menuItems = mobileSheet.querySelectorAll('button');
+            // Find the menu item with "Account Settings" text
+            const accountBtn = Array.from(menuItems).find(btn => btn.textContent?.includes('Account Settings'));
+            expect(accountBtn).toBeTruthy();
+            await fireEvent.click(accountBtn);
+            expect(goto).toHaveBeenCalledWith('/account-settings');
+        });
+        it('calls signoutHandler and closes sheet when mobile sign out is clicked', async () => {
+            const signoutHandler = vi.fn();
+            const { container } = render(Header, { ...defaultProps, signoutHandler });
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
+            await fireEvent.click(mobileButton);
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            expect(mobileSheet).toBeTruthy();
+            // Find the Sign Out button in the mobile sheet
+            const menuItems = mobileSheet.querySelectorAll('button');
+            const signOutBtn = Array.from(menuItems).find(btn => btn.textContent?.includes('Sign Out'));
+            expect(signOutBtn).toBeTruthy();
+            await fireEvent.click(signOutBtn);
+            expect(signoutHandler).toHaveBeenCalled();
+        });
+    });
+    describe('back button mode desktop dropdown', () => {
+        it('shows dropdown with dropdown links and sign out when avatar clicked in back-button mode', async () => {
+            const { goto } = await import('$app/navigation');
+            const signoutHandler = vi.fn();
+            const { container } = render(Header, { ...defaultProps, showBackButton: true, signoutHandler });
+            // In back-button mode, the desktop section is within "hidden md:flex"
+            // The avatar button is the only AvatarButton in that section
+            const avatarButtons = container.querySelectorAll('button');
+            // Find the avatar button that opens the dropdown (not the Back button)
+            const desktopAvatarBtn = Array.from(avatarButtons).find(btn => !btn.textContent?.includes('Back') && btn.querySelector('img'));
+            expect(desktopAvatarBtn).toBeTruthy();
+            await fireEvent.click(desktopAvatarBtn);
+            // Dropdown should be visible
+            const dropdown = container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]');
+            expect(dropdown).toBeTruthy();
+            // Click a dropdown link
+            const accountSettings = screen.getByText('Account Settings');
+            await fireEvent.click(accountSettings);
+            expect(goto).toHaveBeenCalledWith('/account-settings');
+        });
+        it('calls signoutHandler when sign out clicked in back-button mode dropdown', async () => {
+            const signoutHandler = vi.fn();
+            const { container } = render(Header, { ...defaultProps, showBackButton: true, signoutHandler });
+            // Find the avatar button (not the Back button)
+            const avatarButtons = container.querySelectorAll('button');
+            const desktopAvatarBtn = Array.from(avatarButtons).find(btn => !btn.textContent?.includes('Back') && btn.querySelector('img'));
+            await fireEvent.click(desktopAvatarBtn);
+            // Click sign out
+            const signOutBtn = screen.getByText('Sign out');
+            await fireEvent.click(signOutBtn);
+            expect(signoutHandler).toHaveBeenCalled();
+        });
     });
     describe('navigation active state', () => {
         it('marks current path as active', () => {
@@ -166,5 +241,53 @@ describe('Header', () => {
             await fireEvent.click(desktopButton);
             expect(screen.getByText('Performer')).toBeTruthy();
         });
+        it('shows name in mobile sheet when provided', async () => {
+            const { container } = render(Header, { ...defaultProps, name: 'Jane Doe' });
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
+            await fireEvent.click(mobileButton);
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            expect(mobileSheet).toBeTruthy();
+            expect(mobileSheet.textContent).toContain('Jane Doe');
+        });
+        it('shows "Performer" in mobile sheet when name is empty', async () => {
+            const { container } = render(Header, { ...defaultProps, name: '' });
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
+            await fireEvent.click(mobileButton);
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            expect(mobileSheet).toBeTruthy();
+            expect(mobileSheet.textContent).toContain('Performer');
+        });
+        it('shows "Performer" in back-button mode dropdown when name is empty', async () => {
+            const { container } = render(Header, { ...defaultProps, name: '', showBackButton: true });
+            const avatarButtons = container.querySelectorAll('button');
+            const desktopAvatarBtn = Array.from(avatarButtons).find(btn => !btn.textContent?.includes('Back') && btn.querySelector('img'));
+            await fireEvent.click(desktopAvatarBtn);
+            const dropdown = container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]');
+            expect(dropdown).toBeTruthy();
+            expect(dropdown.textContent).toContain('Performer');
+        });
+    });
+    describe('isActive edge cases', () => {
+        it('marks root nav link as active when path matches base', () => {
+            // The mock sets page pathname to '/shows' and base to '/performers'
+            // Add a root link and verify it is NOT active (since path is /shows)
+            const propsWithRoot = {
+                ...defaultProps,
+                navLinks: [
+                    { label: 'Home', href: '/performers/' },
+                    ...defaultProps.navLinks
+                ]
+            };
+            const { container } = render(Header, propsWithRoot);
+            const homeLink = container.querySelector('a[href="/performers/"]');
+            // /shows does not match /performers/, so it should NOT be active
+            expect(homeLink.classList.contains('text-blue-700')).toBe(false);
+        });
+        it('marks link as active using startsWith for non-root paths', () => {
+            const { container } = render(Header, defaultProps);
+            // '/shows' starts with '/shows' so it should be active
+            const showsLink = container.querySelector('a[href="/shows"]');
+            expect(showsLink.classList.contains('text-blue-700')).toBe(true);
+        });
     });
 });

package/dist/primitives/Accordion/Accordion.spec.js

@@ -1,6 +1,25 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { tick } from 'svelte';
+import { expect, describe, test, vi } from 'vitest';
 import Accordion from './Accordion.svelte';
+import AccordionItemWrapper from './AccordionToggleWrapper.test.svelte';
+
+// Mock the transitions module to avoid animation issues in tests
+vi.mock('../../utils/transitions.js', () => ({
+  safeSlide: () => ({
+    delay: 0,
+    duration: 0,
+    css: () => ''
+  })
+}));
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
 
 describe('Accordion Component', () => {
   test('renders correctly with default props', () => {
@@ -66,6 +85,14 @@ describe('Accordion Component', () => {
     const accordion = container.querySelector('[data-accordion]');
     expect(accordion).toHaveClass('dark:border-gray-700');
   });
+
+  test('renders children snippet content', () => {
+    const { container } = render(Accordion, {
+      props: { children: textSnippet('Accordion body') }
+    });
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion.textContent).toContain('Accordion body');
+  });
 });
 
 describe('Accordion Props', () => {
@@ -81,3 +108,86 @@ describe('Accordion Props', () => {
     expect(accordion).toHaveClass('border');
   });
 });
+
+describe('Accordion toggle context (single mode)', () => {
+  test('opens an item when toggled', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: false }
+    });
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+
+    // Click first item to open
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  test('closes an item when toggled again', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: false }
+    });
+    const buttons = container.querySelectorAll('button');
+
+    // Open then close
+    await user.click(buttons[0]);
+    await tick();
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
+  test('in single mode, opening a second item closes the first', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: false }
+    });
+    const buttons = container.querySelectorAll('button');
+
+    // Open first
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    // Open second -- first should close
+    await user.click(buttons[1]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
+      expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+});
+
+describe('Accordion toggle context (multiple mode)', () => {
+  test('in multiple mode, opening a second item keeps the first open', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: true }
+    });
+    const buttons = container.querySelectorAll('button');
+
+    // Open first
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    // Open second -- first stays open
+    await user.click(buttons[1]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+      expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+});

package/dist/primitives/Accordion/AccordionToggleWrapper.test.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  /**
+   * Test wrapper for Accordion toggle context coverage.
+   * Renders a real Accordion with two AccordionItems so the toggle function
+   * and its branches (add, delete, single-mode clear) are exercised.
+   */
+  import Accordion from './Accordion.svelte';
+  import AccordionItem from './AccordionItem.svelte';
+
+  interface Props {
+    multiple?: boolean;
+  }
+
+  let { multiple = false }: Props = $props();
+</script>
+
+<Accordion {multiple}>
+  {#snippet children()}
+    <AccordionItem>
+      {#snippet header()}Item 1{/snippet}
+      {#snippet children()}Content 1{/snippet}
+    </AccordionItem>
+    <AccordionItem>
+      {#snippet header()}Item 2{/snippet}
+      {#snippet children()}Content 2{/snippet}
+    </AccordionItem>
+  {/snippet}
+</Accordion>

package/dist/primitives/Accordion/AccordionToggleWrapper.test.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    multiple?: boolean;
+}
+declare const AccordionToggleWrapper: import("svelte").Component<Props, {}, "">;
+type AccordionToggleWrapper = ReturnType<typeof AccordionToggleWrapper>;
+export default AccordionToggleWrapper;
+//# sourceMappingURL=AccordionToggleWrapper.test.svelte.d.ts.map

package/dist/primitives/Accordion/AccordionToggleWrapper.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionToggleWrapper.test.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionToggleWrapper.test.svelte.ts"],"names":[],"mappings":"AAYE,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyBH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/primitives/Avatar/Avatar.spec.js

@@ -183,6 +183,29 @@ describe('Avatar Size Text Classes', () => {
   });
 });
 
+describe('Avatar Size Fallback', () => {
+  test('falls back to md size when an invalid size is provided (placeholder)', () => {
+    const { container } = render(Avatar, { props: { size: 'invalid-size' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-10');
+    expect(div).toHaveClass('h-10');
+  });
+
+  test('falls back to md size when an invalid size is provided (initials)', () => {
+    const { container } = render(Avatar, { props: { size: 'invalid-size', initials: 'XY' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-10');
+    expect(div).toHaveClass('h-10');
+  });
+
+  test('falls back to md size when an invalid size is provided (img)', () => {
+    const { container } = render(Avatar, { props: { size: 'invalid-size', src: '/user.jpg' } });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('w-10');
+    expect(img).toHaveClass('h-10');
+  });
+});
+
 describe('Avatar Rounded', () => {
   test('default rounded is false (uses rounded class)', () => {
     const { container } = render(Avatar);