@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/components/Layout/Responsive.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+type Mode = 'show-mobile' | 'show-desktop' | 'hide-mobile' | 'hide-desktop';
+interface Props {
+    /** Visibility mode */
+    mode: Mode;
+    /** Breakpoint for mobile/desktop boundary */
+    breakpoint?: Breakpoint;
+    /** Display type when visible */
+    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+}
+declare const Responsive: import("svelte").Component<Props, {}, "">;
+type Responsive = ReturnType<typeof Responsive>;
+export default Responsive;
+//# sourceMappingURL=Responsive.svelte.d.ts.map

package/dist/components/Layout/Responsive.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Responsive.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Responsive.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,KAAK,IAAI,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,CAAC;AAE5E,UAAU,KAAK;IACb,sBAAsB;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,GAAG,MAAM,CAAC;IAChE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwDH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Layout/Section.spec.d.ts

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

package/dist/components/Layout/Section.spec.d.ts.map

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

package/dist/components/Layout/Section.spec.js

@@ -0,0 +1,149 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Section from './Section.svelte';
+
+describe('Section Component', () => {
+  test('renders a section element', () => {
+    const { container } = render(Section);
+    expect(container.querySelector('section')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Section, { props: { class: 'custom-section' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('custom-section');
+  });
+});
+
+describe('Section Title', () => {
+  test('no title renders no h2', () => {
+    const { container } = render(Section);
+    expect(container.querySelector('h2')).not.toBeInTheDocument();
+  });
+
+  test('title prop renders h2', () => {
+    render(Section, { props: { title: 'Recent Orders' } });
+    expect(screen.getByText('Recent Orders')).toBeInTheDocument();
+  });
+
+  test('title is in h2 element', () => {
+    const { container } = render(Section, { props: { title: 'Test Title' } });
+    const h2 = container.querySelector('h2');
+    expect(h2).toBeInTheDocument();
+    expect(h2).toHaveTextContent('Test Title');
+  });
+
+  test('title adds aria-label to section', () => {
+    const { container } = render(Section, { props: { title: 'Orders Section' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveAttribute('aria-label', 'Orders Section');
+  });
+
+  test('no aria-label when no title', () => {
+    const { container } = render(Section);
+    const section = container.querySelector('section');
+    expect(section).not.toHaveAttribute('aria-label');
+  });
+});
+
+describe('Section Title Size', () => {
+  test('default titleSize=md applies h3 typography', () => {
+    const { container } = render(Section, { props: { title: 'Test' } });
+    const h2 = container.querySelector('h2');
+    // Check that h2 exists and has some styling
+    expect(h2).toBeInTheDocument();
+  });
+
+  test('titleSize=sm applies smaller typography', () => {
+    const { container } = render(Section, { props: { title: 'Test', titleSize: 'sm' } });
+    const h2 = container.querySelector('h2');
+    expect(h2).toBeInTheDocument();
+  });
+
+  test('titleSize=lg applies larger typography', () => {
+    const { container } = render(Section, { props: { title: 'Test', titleSize: 'lg' } });
+    const h2 = container.querySelector('h2');
+    expect(h2).toBeInTheDocument();
+  });
+});
+
+describe('Section Title Class', () => {
+  test('titleClass applies to h2', () => {
+    const { container } = render(Section, { props: { title: 'Test', titleClass: 'custom-title' } });
+    const h2 = container.querySelector('h2');
+    expect(h2).toHaveClass('custom-title');
+  });
+});
+
+describe('Section Gap', () => {
+  test('gap applies when title present', () => {
+    const { container } = render(Section, { props: { title: 'Test', gap: '4' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('space-y-4');
+  });
+
+  test('gap=2 applies space-y-2', () => {
+    const { container } = render(Section, { props: { title: 'Test', gap: '2' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('space-y-2');
+  });
+
+  test('gap=3 applies space-y-3', () => {
+    const { container } = render(Section, { props: { title: 'Test', gap: '3' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('space-y-3');
+  });
+
+  test('gap=6 applies space-y-6', () => {
+    const { container } = render(Section, { props: { title: 'Test', gap: '6' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('space-y-6');
+  });
+
+  test('no gap class when no title', () => {
+    const { container } = render(Section);
+    const section = container.querySelector('section');
+    expect(section).not.toHaveClass('space-y-4');
+    expect(section).not.toHaveClass('space-y-2');
+  });
+});
+
+describe('Section Combinations', () => {
+  test('title and titleSize', () => {
+    render(Section, { props: { title: 'Products', titleSize: 'lg' } });
+    expect(screen.getByText('Products')).toBeInTheDocument();
+  });
+
+  test('title with titleClass and custom class', () => {
+    const { container } = render(Section, {
+      props: {
+        title: 'Orders',
+        titleClass: 'text-blue-500',
+        class: 'my-section'
+      }
+    });
+    const section = container.querySelector('section');
+    const h2 = container.querySelector('h2');
+    expect(section).toHaveClass('my-section');
+    expect(h2).toHaveClass('text-blue-500');
+  });
+
+  test('all props together', () => {
+    const { container } = render(Section, {
+      props: {
+        title: 'Statistics',
+        titleSize: 'lg',
+        gap: '6',
+        class: 'bg-white',
+        titleClass: 'font-bold'
+      }
+    });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('bg-white');
+    expect(section).toHaveClass('space-y-6');
+    expect(section).toHaveAttribute('aria-label', 'Statistics');
+    const h2 = container.querySelector('h2');
+    expect(h2).toHaveClass('font-bold');
+    expect(h2).toHaveTextContent('Statistics');
+  });
+});

package/dist/components/Layout/Section.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { typography } from '../../tokens/typography';
-
-  /**
-   * Section - Semantic section wrapper with optional title
-   *
-   * Use Section to group related content with consistent spacing.
-   * Provides proper HTML5 semantics with <section> element.
-   *
-   * @example
-   * <Section title="Recent Orders">
-   *   <OrdersTable />
-   * </Section>
-   *
-   * @example
-   * <Section>
-   *   <Chart />
-   * </Section>
-   */
-
-  interface Props {
-    /** Section title (optional) */
-    title?: string;
-    /** Title size */
-    titleSize?: 'sm' | 'md' | 'lg';
-    /** Gap between title and content */
-    gap?: '2' | '3' | '4' | '6';
-    /** Additional CSS classes for the section */
-    class?: string;
-    /** Additional CSS classes for the title */
-    titleClass?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    title = '',
-    titleSize = 'md',
-    gap = '4',
-    class: className = '',
-    titleClass = '',
-    children
-  }: Props = $props();
-
-  const titleSizeMap: Record<string, string> = {
-    sm: typography.h4,
-    md: typography.h3,
-    lg: typography.h2
-  };
-
-  const gapMap: Record<string, string> = {
-    '2': 'space-y-2',
-    '3': 'space-y-3',
-    '4': 'space-y-4',
-    '6': 'space-y-6'
-  };
-
-  let sectionClasses = $derived(
-    [
-      title ? gapMap[gap] || 'space-y-4' : '',
-      className
-    ].filter(Boolean).join(' ')
-  );
-
-  let titleClasses = $derived(
-    [
-      titleSizeMap[titleSize] || titleSizeMap.md,
-      titleClass
-    ].filter(Boolean).join(' ')
-  );
-</script>
-
-<section class={sectionClasses} aria-label={title || undefined}>
-  {#if title}
-    <h2 class={titleClasses}>{title}</h2>
-  {/if}
-
-  {@render children?.()}
-</section>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { typography } from '../../tokens/typography';
+
+  /**
+   * Section - Semantic section wrapper with optional title
+   *
+   * Use Section to group related content with consistent spacing.
+   * Provides proper HTML5 semantics with <section> element.
+   *
+   * @example
+   * <Section title="Recent Orders">
+   *   <OrdersTable />
+   * </Section>
+   *
+   * @example
+   * <Section>
+   *   <Chart />
+   * </Section>
+   */
+
+  interface Props {
+    /** Section title (optional) */
+    title?: string;
+    /** Title size */
+    titleSize?: 'sm' | 'md' | 'lg';
+    /** Gap between title and content */
+    gap?: '2' | '3' | '4' | '6';
+    /** Additional CSS classes for the section */
+    class?: string;
+    /** Additional CSS classes for the title */
+    titleClass?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    titleSize = 'md',
+    gap = '4',
+    class: className = '',
+    titleClass = '',
+    children
+  }: Props = $props();
+
+  const titleSizeMap: Record<string, string> = {
+    sm: typography.h4,
+    md: typography.h3,
+    lg: typography.h2
+  };
+
+  const gapMap: Record<string, string> = {
+    '2': 'space-y-2',
+    '3': 'space-y-3',
+    '4': 'space-y-4',
+    '6': 'space-y-6'
+  };
+
+  let sectionClasses = $derived(
+    [
+      title ? gapMap[gap] || 'space-y-4' : '',
+      className
+    ].filter(Boolean).join(' ')
+  );
+
+  let titleClasses = $derived(
+    [
+      titleSizeMap[titleSize] || titleSizeMap.md,
+      titleClass
+    ].filter(Boolean).join(' ')
+  );
+</script>
+
+<section class={sectionClasses} aria-label={title || undefined}>
+  {#if title}
+    <h2 class={titleClasses}>{title}</h2>
+  {/if}
+
+  {@render children?.()}
+</section>

package/dist/components/Layout/ShowOnDesktop.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+
+  interface Props {
+    /** Breakpoint for mobile/desktop boundary */
+    breakpoint?: Breakpoint;
+    /** Display type when visible */
+    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    breakpoint = 'lg',
+    display = 'block',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const displayClasses: Record<string, string> = {
+    block: 'block',
+    flex: 'flex',
+    inline: 'inline',
+    'inline-block': 'inline-block',
+    grid: 'grid',
+  };
+
+  let classes = $derived(`hidden ${breakpoint}:${displayClasses[display]} ${className}`.trim());
+</script>
+
+<div class={classes}>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/components/Layout/ShowOnDesktop.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+interface Props {
+    /** Breakpoint for mobile/desktop boundary */
+    breakpoint?: Breakpoint;
+    /** Display type when visible */
+    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+}
+declare const ShowOnDesktop: import("svelte").Component<Props, {}, "">;
+type ShowOnDesktop = ReturnType<typeof ShowOnDesktop>;
+export default ShowOnDesktop;
+//# sourceMappingURL=ShowOnDesktop.svelte.d.ts.map

package/dist/components/Layout/ShowOnDesktop.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowOnDesktop.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/ShowOnDesktop.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,UAAU,KAAK;IACb,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,GAAG,MAAM,CAAC;IAChE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8BH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/Layout/ShowOnMobile.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+
+  interface Props {
+    /** Breakpoint for mobile/desktop boundary */
+    breakpoint?: Breakpoint;
+    /** Display type when visible */
+    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    breakpoint = 'lg',
+    display = 'block',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const displayClasses: Record<string, string> = {
+    block: 'block',
+    flex: 'flex',
+    inline: 'inline',
+    'inline-block': 'inline-block',
+    grid: 'grid',
+  };
+
+  let classes = $derived(`${displayClasses[display]} ${breakpoint}:hidden ${className}`.trim());
+</script>
+
+<div class={classes}>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/components/Layout/ShowOnMobile.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+interface Props {
+    /** Breakpoint for mobile/desktop boundary */
+    breakpoint?: Breakpoint;
+    /** Display type when visible */
+    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+}
+declare const ShowOnMobile: import("svelte").Component<Props, {}, "">;
+type ShowOnMobile = ReturnType<typeof ShowOnMobile>;
+export default ShowOnMobile;
+//# sourceMappingURL=ShowOnMobile.svelte.d.ts.map

package/dist/components/Layout/ShowOnMobile.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowOnMobile.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/ShowOnMobile.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,UAAU,KAAK;IACb,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,GAAG,MAAM,CAAC;IAChE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8BH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/Layout/Sidebar.spec.d.ts

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

package/dist/components/Layout/Sidebar.spec.d.ts.map

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

package/dist/components/Layout/Sidebar.spec.js

@@ -0,0 +1,186 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Sidebar from './Sidebar.svelte';
+
+describe('Sidebar Component', () => {
+  test('renders a grid container', () => {
+    const { container } = render(Sidebar);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('grid');
+  });
+
+  test('has lg:grid-cols-12', () => {
+    const { container } = render(Sidebar);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('lg:grid-cols-12');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Sidebar, { props: { class: 'custom-sidebar' } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('custom-sidebar');
+  });
+
+  test('renders main content area', () => {
+    const { container } = render(Sidebar);
+    const divs = container.querySelectorAll('div');
+    // Main container + main content div + aside
+    expect(divs.length).toBeGreaterThanOrEqual(2);
+  });
+
+  test('renders aside element', () => {
+    const { container } = render(Sidebar);
+    expect(container.querySelector('aside')).toBeInTheDocument();
+  });
+});
+
+describe('Sidebar Stack On Mobile', () => {
+  test('default stackOnMobile=true applies grid-cols-1', () => {
+    const { container } = render(Sidebar);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('grid-cols-1');
+  });
+
+  test('stackOnMobile=false does not apply grid-cols-1', () => {
+    const { container } = render(Sidebar, { props: { stackOnMobile: false } });
+    const grid = container.querySelector('div');
+    expect(grid).not.toHaveClass('grid-cols-1');
+  });
+});
+
+describe('Sidebar Width', () => {
+  test('default sidebarWidth=medium applies lg:col-span-4 to sidebar', () => {
+    const { container } = render(Sidebar);
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:col-span-4');
+  });
+
+  test('default sidebarWidth=medium applies lg:col-span-8 to main', () => {
+    const { container } = render(Sidebar);
+    const grid = container.querySelector('.grid');
+    const mainDiv = grid.querySelector('div.col-span-1');
+    expect(mainDiv).toHaveClass('lg:col-span-8');
+  });
+
+  test('sidebarWidth=narrow applies lg:col-span-3 to sidebar', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'narrow' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:col-span-3');
+  });
+
+  test('sidebarWidth=narrow applies lg:col-span-9 to main', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'narrow' } });
+    const grid = container.querySelector('.grid');
+    const mainDiv = grid.querySelector('div.col-span-1');
+    expect(mainDiv).toHaveClass('lg:col-span-9');
+  });
+
+  test('sidebarWidth=wide applies lg:col-span-5 to sidebar', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'wide' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:col-span-5');
+  });
+
+  test('sidebarWidth=wide applies lg:col-span-7 to main', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'wide' } });
+    const grid = container.querySelector('.grid');
+    const mainDiv = grid.querySelector('div.col-span-1');
+    expect(mainDiv).toHaveClass('lg:col-span-7');
+  });
+});
+
+describe('Sidebar Position', () => {
+  test('default sidebarPosition=right applies lg:order-2 to sidebar', () => {
+    const { container } = render(Sidebar);
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:order-2');
+  });
+
+  test('default sidebarPosition=right applies lg:order-1 to main', () => {
+    const { container } = render(Sidebar);
+    const grid = container.querySelector('.grid');
+    const mainDiv = grid.querySelector('div.col-span-1');
+    expect(mainDiv).toHaveClass('lg:order-1');
+  });
+
+  test('sidebarPosition=left applies lg:order-1 to sidebar', () => {
+    const { container } = render(Sidebar, { props: { sidebarPosition: 'left' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:order-1');
+  });
+
+  test('sidebarPosition=left applies lg:order-2 to main', () => {
+    const { container } = render(Sidebar, { props: { sidebarPosition: 'left' } });
+    const grid = container.querySelector('.grid');
+    const mainDiv = grid.querySelector('div.col-span-1');
+    expect(mainDiv).toHaveClass('lg:order-2');
+  });
+});
+
+describe('Sidebar Gap', () => {
+  test('default gap=6 applies gap-6', () => {
+    const { container } = render(Sidebar);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-6');
+  });
+
+  test('gap=4 applies gap-4', () => {
+    const { container } = render(Sidebar, { props: { gap: '4' } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-4');
+  });
+
+  test('gap=8 applies gap-8', () => {
+    const { container } = render(Sidebar, { props: { gap: '8' } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-8');
+  });
+});
+
+describe('Sidebar Combinations', () => {
+  test('narrow left sidebar', () => {
+    const { container } = render(Sidebar, {
+      props: { sidebarWidth: 'narrow', sidebarPosition: 'left' }
+    });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:col-span-3');
+    expect(aside).toHaveClass('lg:order-1');
+  });
+
+  test('wide right sidebar with gap', () => {
+    const { container } = render(Sidebar, {
+      props: { sidebarWidth: 'wide', gap: '8' }
+    });
+    const grid = container.querySelector('div');
+    const aside = container.querySelector('aside');
+    expect(grid).toHaveClass('gap-8');
+    expect(aside).toHaveClass('lg:col-span-5');
+  });
+
+  test('all props together', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'wide',
+        sidebarPosition: 'left',
+        gap: '8',
+        stackOnMobile: false,
+        class: 'custom-layout'
+      }
+    });
+    const grid = container.querySelector('.grid');
+    const aside = container.querySelector('aside');
+    const mainDiv = grid.querySelector('div.col-span-1');
+
+    expect(grid).toHaveClass('grid');
+    expect(grid).toHaveClass('lg:grid-cols-12');
+    expect(grid).toHaveClass('gap-8');
+    expect(grid).toHaveClass('custom-layout');
+    expect(grid).not.toHaveClass('grid-cols-1');
+
+    expect(aside).toHaveClass('lg:col-span-5');
+    expect(aside).toHaveClass('lg:order-1');
+
+    expect(mainDiv).toHaveClass('lg:col-span-7');
+    expect(mainDiv).toHaveClass('lg:order-2');
+  });
+});