@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Skeleton/CardPlaceholder.svelte

@@ -1,87 +1,87 @@
-<script lang="ts">
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    animate?: boolean;
-    showAvatar?: boolean;
-    showImage?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    animate = true,
-    showAvatar = true,
-    showImage = true,
-    class: className = '',
-    ...restProps
-  }: Props = $props();
-
-  const cardSizeClasses = {
-    sm: 'max-w-xs',
-    md: 'max-w-sm',
-    lg: 'max-w-md',
-    xl: 'max-w-lg',
-    '2xl': 'max-w-xl'
-  };
-
-  const imageSizeClasses = {
-    sm: 'h-32',
-    md: 'h-48',
-    lg: 'h-56',
-    xl: 'h-64',
-    '2xl': 'h-72'
-  };
-
-  let cardWidthClass = $derived(cardSizeClasses[size] || cardSizeClasses.md);
-  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
-  aria-label="Loading card"
-  {...restProps}
->
-  {#if showImage}
-    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-gray-300 rounded-lg dark:bg-gray-700">
-      <svg
-        class="w-10 h-10 text-gray-200 dark:text-gray-600"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 20"
-      >
-        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
-        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
-      </svg>
-    </div>
-  {/if}
-
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-80 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-72 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-sm"></div>
-
-  {#if showAvatar}
-    <div class="flex items-center mt-4">
-      <svg
-        class="w-8 h-8 text-gray-200 dark:text-gray-700 me-3"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-      >
-        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
-      </svg>
-      <div>
-        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
-      </div>
-    </div>
-  {/if}
-
-  <span class="sr-only">Loading...</span>
-</div>
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showAvatar?: boolean;
+    showImage?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showAvatar = true,
+    showImage = true,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const cardSizeClasses = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    xl: 'max-w-lg',
+    '2xl': 'max-w-xl'
+  };
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-56',
+    xl: 'h-64',
+    '2xl': 'h-72'
+  };
+
+  let cardWidthClass = $derived(cardSizeClasses[size] || cardSizeClasses.md);
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
+  aria-label="Loading card"
+  {...restProps}
+>
+  {#if showImage}
+    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-gray-300 rounded-lg dark:bg-gray-700">
+      <svg
+        class="w-10 h-10 text-gray-200 dark:text-gray-600"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 20"
+      >
+        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
+        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
+      </svg>
+    </div>
+  {/if}
+
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-80 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-72 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-sm"></div>
+
+  {#if showAvatar}
+    <div class="flex items-center mt-4">
+      <svg
+        class="w-8 h-8 text-gray-200 dark:text-gray-700 me-3"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+      </svg>
+      <div>
+        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
+      </div>
+    </div>
+  {/if}
+
+  <span class="sr-only">Loading...</span>
+</div>

package/dist/primitives/Skeleton/ImagePlaceholder.spec.d.ts

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

package/dist/primitives/Skeleton/ImagePlaceholder.spec.d.ts.map

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

package/dist/primitives/Skeleton/ImagePlaceholder.spec.js

@@ -0,0 +1,120 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ImagePlaceholder from './ImagePlaceholder.svelte';
+
+describe('ImagePlaceholder Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(ImagePlaceholder);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has role status', () => {
+    const { container } = render(ImagePlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has aria-label for accessibility', () => {
+    const { container } = render(ImagePlaceholder);
+    const wrapper = container.querySelector('[aria-label="Loading image"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has sr-only loading text', () => {
+    render(ImagePlaceholder);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('renders an svg icon', () => {
+    const { container } = render(ImagePlaceholder);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ImagePlaceholder, { props: { class: 'custom-skeleton' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('custom-skeleton');
+  });
+});
+
+describe('ImagePlaceholder Animation', () => {
+  test('animate is true by default', () => {
+    const { container } = render(ImagePlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('animate-pulse');
+  });
+
+  test('animate false removes pulse', () => {
+    const { container } = render(ImagePlaceholder, { props: { animate: false } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).not.toHaveClass('animate-pulse');
+  });
+});
+
+describe('ImagePlaceholder Size', () => {
+  test('default size is md (h-48)', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-48');
+  });
+
+  test('size sm applies h-32', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: 'sm' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-32');
+  });
+
+  test('size lg applies h-64', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: 'lg' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-64');
+  });
+
+  test('size xl applies h-80', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: 'xl' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-80');
+  });
+
+  test('size 2xl applies h-96', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: '2xl' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-96');
+  });
+});
+
+describe('ImagePlaceholder ShowText', () => {
+  test('showText is false by default', () => {
+    const { container } = render(ImagePlaceholder);
+    // Count placeholder text bars - should only have the sr-only one
+    const textBars = container.querySelectorAll('.rounded-full.bg-gray-200');
+    expect(textBars.length).toBe(0);
+  });
+
+  test('showText true shows text placeholder bars', () => {
+    const { container } = render(ImagePlaceholder, { props: { showText: true } });
+    // Should have multiple text placeholder bars
+    const textBars = container.querySelectorAll('.rounded-full');
+    expect(textBars.length).toBeGreaterThan(0);
+  });
+});
+
+describe('ImagePlaceholder Styling', () => {
+  test('image container has gray background', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('bg-gray-300');
+  });
+
+  test('image container has rounded corners', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('rounded-lg');
+  });
+
+  test('image container has full width', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('w-full');
+  });
+});

package/dist/primitives/Skeleton/ImagePlaceholder.svelte

@@ -1,59 +1,59 @@
-<script lang="ts">
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    animate?: boolean;
-    showText?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    animate = true,
-    showText = false,
-    class: className = '',
-    ...restProps
-  }: Props = $props();
-
-  const imageSizeClasses = {
-    sm: 'h-32',
-    md: 'h-48',
-    lg: 'h-64',
-    xl: 'h-80',
-    '2xl': 'h-96'
-  };
-
-  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{animateClass} {className}"
-  aria-label="Loading image"
-  {...restProps}
->
-  <div class="flex items-center justify-center w-full {imageHeightClass} bg-gray-300 rounded-lg dark:bg-gray-700">
-    <svg
-      class="w-10 h-10 text-gray-200 dark:text-gray-600"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 20 18"
-    >
-      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-    </svg>
-  </div>
-
-  {#if showText}
-    <div class="mt-4">
-      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
-    </div>
-  {/if}
-
-  <span class="sr-only">Loading...</span>
-</div>
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showText?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showText = false,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-64',
+    xl: 'h-80',
+    '2xl': 'h-96'
+  };
+
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{animateClass} {className}"
+  aria-label="Loading image"
+  {...restProps}
+>
+  <div class="flex items-center justify-center w-full {imageHeightClass} bg-gray-300 rounded-lg dark:bg-gray-700">
+    <svg
+      class="w-10 h-10 text-gray-200 dark:text-gray-600"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
+    </svg>
+  </div>
+
+  {#if showText}
+    <div class="mt-4">
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
+    </div>
+  {/if}
+
+  <span class="sr-only">Loading...</span>
+</div>

package/dist/primitives/Skeleton/ListPlaceholder.spec.d.ts

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

package/dist/primitives/Skeleton/ListPlaceholder.spec.d.ts.map

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

package/dist/primitives/Skeleton/ListPlaceholder.spec.js

@@ -0,0 +1,220 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ListPlaceholder from './ListPlaceholder.svelte';
+
+describe('ListPlaceholder Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(ListPlaceholder);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has role status', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has aria-label for accessibility', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[aria-label="Loading list"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has sr-only loading text', () => {
+    render(ListPlaceholder);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ListPlaceholder, { props: { class: 'custom-list' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('custom-list');
+  });
+});
+
+describe('ListPlaceholder Items', () => {
+  test('default items is 5', () => {
+    const { container } = render(ListPlaceholder);
+    const listItems = container.querySelectorAll('.flex.items-center.justify-between');
+    expect(listItems.length).toBe(5);
+  });
+
+  test('custom items count', () => {
+    const { container } = render(ListPlaceholder, { props: { items: 3 } });
+    const listItems = container.querySelectorAll('.flex.items-center.justify-between');
+    expect(listItems.length).toBe(3);
+  });
+
+  test('items can be 1', () => {
+    const { container } = render(ListPlaceholder, { props: { items: 1 } });
+    const listItems = container.querySelectorAll('.flex.items-center.justify-between');
+    expect(listItems.length).toBe(1);
+  });
+
+  test('items can be 10', () => {
+    const { container } = render(ListPlaceholder, { props: { items: 10 } });
+    const listItems = container.querySelectorAll('.flex.items-center.justify-between');
+    expect(listItems.length).toBe(10);
+  });
+});
+
+describe('ListPlaceholder Animation', () => {
+  test('animate is true by default', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('animate-pulse');
+  });
+
+  test('animate false removes pulse', () => {
+    const { container } = render(ListPlaceholder, { props: { animate: false } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).not.toHaveClass('animate-pulse');
+  });
+});
+
+describe('ListPlaceholder Size', () => {
+  test('default size is md (max-w-sm)', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-sm');
+  });
+
+  test('size sm applies max-w-xs', () => {
+    const { container } = render(ListPlaceholder, { props: { size: 'sm' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-xs');
+  });
+
+  test('size lg applies max-w-md', () => {
+    const { container } = render(ListPlaceholder, { props: { size: 'lg' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-md');
+  });
+
+  test('size xl applies max-w-lg', () => {
+    const { container } = render(ListPlaceholder, { props: { size: 'xl' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-lg');
+  });
+
+  test('size 2xl applies max-w-xl', () => {
+    const { container } = render(ListPlaceholder, { props: { size: '2xl' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-xl');
+  });
+});
+
+describe('ListPlaceholder ShowIcon', () => {
+  test('showIcon is true by default', () => {
+    const { container } = render(ListPlaceholder);
+    const svgs = container.querySelectorAll('svg');
+    // Should have 5 icons (one per item)
+    expect(svgs.length).toBe(5);
+  });
+
+  test('showIcon false hides icons', () => {
+    const { container } = render(ListPlaceholder, { props: { showIcon: false } });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBe(0);
+  });
+});
+
+describe('ListPlaceholder ShowAction', () => {
+  test('showAction is true by default', () => {
+    const { container } = render(ListPlaceholder);
+    // Action buttons have w-12 class
+    const actions = container.querySelectorAll('.w-12');
+    expect(actions.length).toBe(5);
+  });
+
+  test('showAction false hides action buttons', () => {
+    const { container } = render(ListPlaceholder, { props: { showAction: false } });
+    const actions = container.querySelectorAll('.w-12');
+    expect(actions.length).toBe(0);
+  });
+});
+
+describe('ListPlaceholder Icon Size', () => {
+  test('default icon size is md (w-10 h-10)', () => {
+    const { container } = render(ListPlaceholder);
+    const icon = container.querySelector('svg');
+    expect(icon).toHaveClass('w-10');
+    expect(icon).toHaveClass('h-10');
+  });
+
+  test('size sm applies w-8 h-8 to icons', () => {
+    const { container } = render(ListPlaceholder, { props: { size: 'sm' } });
+    const icon = container.querySelector('svg');
+    expect(icon).toHaveClass('w-8');
+    expect(icon).toHaveClass('h-8');
+  });
+
+  test('size lg applies w-12 h-12 to icons', () => {
+    const { container } = render(ListPlaceholder, { props: { size: 'lg' } });
+    const icon = container.querySelector('svg');
+    expect(icon).toHaveClass('w-12');
+    expect(icon).toHaveClass('h-12');
+  });
+});
+
+describe('ListPlaceholder Styling', () => {
+  test('has padding', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('p-4');
+  });
+
+  test('has border', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('border');
+    expect(wrapper).toHaveClass('border-gray-200');
+  });
+
+  test('has dividers between items', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('divide-y');
+    expect(wrapper).toHaveClass('divide-gray-200');
+  });
+
+  test('has rounded corners', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('rounded-lg');
+  });
+
+  test('has shadow', () => {
+    const { container } = render(ListPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('shadow');
+  });
+});
+
+describe('ListPlaceholder Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(ListPlaceholder, {
+      props: {
+        size: 'xl',
+        items: 3,
+        animate: false,
+        showIcon: false,
+        showAction: false,
+        class: 'my-list'
+      }
+    });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-lg');
+    expect(wrapper).toHaveClass('my-list');
+    expect(wrapper).not.toHaveClass('animate-pulse');
+
+    const listItems = container.querySelectorAll('.flex.items-center.justify-between');
+    expect(listItems.length).toBe(3);
+
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBe(0);
+
+    const actions = container.querySelectorAll('.w-12');
+    expect(actions.length).toBe(0);
+  });
+});