@getmicdrop/svelte-components 5.4.0 → 5.4.2

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

@@ -0,0 +1,257 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Stack from './Stack.svelte';
+describe('Stack Component', () => {
+    describe('Basic Rendering', () => {
+        test('renders with default props', () => {
+            const { container } = render(Stack);
+            const stack = container.querySelector('div');
+            expect(stack).toBeInTheDocument();
+            expect(stack).toHaveClass('flex', 'flex-col', 'gap-4');
+        });
+        test('renders as flex container', () => {
+            const { container } = render(Stack);
+            expect(container.querySelector('div')).toHaveClass('flex');
+        });
+    });
+    describe('Direction', () => {
+        test('vertical direction applies flex-col', () => {
+            const { container } = render(Stack, { direction: 'vertical' });
+            expect(container.querySelector('div')).toHaveClass('flex-col');
+        });
+        test('horizontal direction applies flex-row', () => {
+            const { container } = render(Stack, { direction: 'horizontal' });
+            expect(container.querySelector('div')).toHaveClass('flex-row');
+        });
+    });
+    describe('Gap - Semantic Names', () => {
+        test('tight gap (4px)', () => {
+            const { container } = render(Stack, { gap: 'tight' });
+            expect(container.querySelector('div')).toHaveClass('gap-1');
+        });
+        test('compact gap (6px)', () => {
+            const { container } = render(Stack, { gap: 'compact' });
+            expect(container.querySelector('div')).toHaveClass('gap-1.5');
+        });
+        test('item gap (8px)', () => {
+            const { container } = render(Stack, { gap: 'item' });
+            expect(container.querySelector('div')).toHaveClass('gap-2');
+        });
+        test('group gap (12px)', () => {
+            const { container } = render(Stack, { gap: 'group' });
+            expect(container.querySelector('div')).toHaveClass('gap-3');
+        });
+        test('content gap (16px) - default', () => {
+            const { container } = render(Stack, { gap: 'content' });
+            expect(container.querySelector('div')).toHaveClass('gap-4');
+        });
+        test('section gap (24px)', () => {
+            const { container } = render(Stack, { gap: 'section' });
+            expect(container.querySelector('div')).toHaveClass('gap-6');
+        });
+        test('layout gap (32px)', () => {
+            const { container } = render(Stack, { gap: 'layout' });
+            expect(container.querySelector('div')).toHaveClass('gap-8');
+        });
+        test('page gap (48px)', () => {
+            const { container } = render(Stack, { gap: 'page' });
+            expect(container.querySelector('div')).toHaveClass('gap-12');
+        });
+    });
+    describe('Gap - Numeric Values', () => {
+        test('gap 0', () => {
+            const { container } = render(Stack, { gap: '0' });
+            expect(container.querySelector('div')).toHaveClass('gap-0');
+        });
+        test('gap 1', () => {
+            const { container } = render(Stack, { gap: '1' });
+            expect(container.querySelector('div')).toHaveClass('gap-1');
+        });
+        test('gap 2', () => {
+            const { container } = render(Stack, { gap: '2' });
+            expect(container.querySelector('div')).toHaveClass('gap-2');
+        });
+        test('gap 4 (default)', () => {
+            const { container } = render(Stack, { gap: '4' });
+            expect(container.querySelector('div')).toHaveClass('gap-4');
+        });
+        test('gap 8', () => {
+            const { container } = render(Stack, { gap: '8' });
+            expect(container.querySelector('div')).toHaveClass('gap-8');
+        });
+    });
+    describe('Gap - Legacy Aliases (Deprecated)', () => {
+        test('none gap (legacy)', () => {
+            const { container } = render(Stack, { gap: 'none' });
+            expect(container.querySelector('div')).toHaveClass('gap-0');
+        });
+        test('xs gap (legacy)', () => {
+            const { container } = render(Stack, { gap: 'xs' });
+            expect(container.querySelector('div')).toHaveClass('gap-1');
+        });
+        test('sm gap (legacy)', () => {
+            const { container } = render(Stack, { gap: 'sm' });
+            expect(container.querySelector('div')).toHaveClass('gap-2');
+        });
+        test('md gap (legacy)', () => {
+            const { container } = render(Stack, { gap: 'md' });
+            expect(container.querySelector('div')).toHaveClass('gap-4');
+        });
+        test('lg gap (legacy)', () => {
+            const { container } = render(Stack, { gap: 'lg' });
+            expect(container.querySelector('div')).toHaveClass('gap-6');
+        });
+        test('xl gap (legacy)', () => {
+            const { container } = render(Stack, { gap: 'xl' });
+            expect(container.querySelector('div')).toHaveClass('gap-8');
+        });
+    });
+    describe('Alignment', () => {
+        test('align start', () => {
+            const { container } = render(Stack, { align: 'start' });
+            expect(container.querySelector('div')).toHaveClass('items-start');
+        });
+        test('align center', () => {
+            const { container } = render(Stack, { align: 'center' });
+            expect(container.querySelector('div')).toHaveClass('items-center');
+        });
+        test('align end', () => {
+            const { container } = render(Stack, { align: 'end' });
+            expect(container.querySelector('div')).toHaveClass('items-end');
+        });
+        test('align stretch', () => {
+            const { container } = render(Stack, { align: 'stretch' });
+            expect(container.querySelector('div')).toHaveClass('items-stretch');
+        });
+        test('align baseline', () => {
+            const { container } = render(Stack, { align: 'baseline' });
+            expect(container.querySelector('div')).toHaveClass('items-baseline');
+        });
+    });
+    describe('Justify', () => {
+        test('justify start', () => {
+            const { container } = render(Stack, { justify: 'start' });
+            expect(container.querySelector('div')).toHaveClass('justify-start');
+        });
+        test('justify center', () => {
+            const { container } = render(Stack, { justify: 'center' });
+            expect(container.querySelector('div')).toHaveClass('justify-center');
+        });
+        test('justify end', () => {
+            const { container } = render(Stack, { justify: 'end' });
+            expect(container.querySelector('div')).toHaveClass('justify-end');
+        });
+        test('justify between', () => {
+            const { container } = render(Stack, { justify: 'between' });
+            expect(container.querySelector('div')).toHaveClass('justify-between');
+        });
+        test('justify around', () => {
+            const { container } = render(Stack, { justify: 'around' });
+            expect(container.querySelector('div')).toHaveClass('justify-around');
+        });
+        test('justify evenly', () => {
+            const { container } = render(Stack, { justify: 'evenly' });
+            expect(container.querySelector('div')).toHaveClass('justify-evenly');
+        });
+    });
+    describe('Wrap', () => {
+        test('wrap false by default', () => {
+            const { container } = render(Stack);
+            expect(container.querySelector('div')).not.toHaveClass('flex-wrap');
+        });
+        test('wrap true adds flex-wrap', () => {
+            const { container } = render(Stack, { wrap: true });
+            expect(container.querySelector('div')).toHaveClass('flex-wrap');
+        });
+    });
+    describe('Semantic Elements (as prop)', () => {
+        test('renders as div by default', () => {
+            const { container } = render(Stack);
+            expect(container.querySelector('div')).toBeInTheDocument();
+        });
+        test('renders as section', () => {
+            const { container } = render(Stack, { as: 'section' });
+            expect(container.querySelector('section')).toBeInTheDocument();
+        });
+        test('renders as article', () => {
+            const { container } = render(Stack, { as: 'article' });
+            expect(container.querySelector('article')).toBeInTheDocument();
+        });
+        test('renders as aside', () => {
+            const { container } = render(Stack, { as: 'aside' });
+            expect(container.querySelector('aside')).toBeInTheDocument();
+        });
+        test('renders as main', () => {
+            const { container } = render(Stack, { as: 'main' });
+            expect(container.querySelector('main')).toBeInTheDocument();
+        });
+        test('renders as nav', () => {
+            const { container } = render(Stack, { as: 'nav' });
+            expect(container.querySelector('nav')).toBeInTheDocument();
+        });
+        test('renders as ul', () => {
+            const { container } = render(Stack, { as: 'ul' });
+            expect(container.querySelector('ul')).toBeInTheDocument();
+        });
+        test('renders as ol', () => {
+            const { container } = render(Stack, { as: 'ol' });
+            expect(container.querySelector('ol')).toBeInTheDocument();
+        });
+    });
+    describe('Custom Class', () => {
+        test('accepts custom class', () => {
+            const { container } = render(Stack, { class: 'custom-class' });
+            expect(container.querySelector('div')).toHaveClass('custom-class');
+        });
+        test('merges custom class with generated classes', () => {
+            const { container } = render(Stack, { class: 'custom-class', gap: 'section' });
+            const stack = container.querySelector('div');
+            expect(stack).toHaveClass('custom-class');
+            expect(stack).toHaveClass('flex');
+            expect(stack).toHaveClass('gap-6');
+        });
+    });
+    describe('Rest Props', () => {
+        test('passes through data attributes', () => {
+            const { container } = render(Stack, { 'data-testid': 'my-stack' });
+            expect(container.querySelector('[data-testid="my-stack"]')).toBeInTheDocument();
+        });
+        test('passes through aria attributes', () => {
+            const { container } = render(Stack, { 'aria-label': 'Stack container' });
+            expect(container.querySelector('[aria-label="Stack container"]')).toBeInTheDocument();
+        });
+    });
+    describe('Combined Props', () => {
+        test('horizontal layout with center alignment and between justify', () => {
+            const { container } = render(Stack, {
+                direction: 'horizontal',
+                align: 'center',
+                justify: 'between',
+                gap: 'section'
+            });
+            const stack = container.querySelector('div');
+            expect(stack).toHaveClass('flex-row');
+            expect(stack).toHaveClass('items-center');
+            expect(stack).toHaveClass('justify-between');
+            expect(stack).toHaveClass('gap-6');
+        });
+        test('vertical layout as section with page gap', () => {
+            const { container } = render(Stack, {
+                direction: 'vertical',
+                as: 'section',
+                gap: 'page'
+            });
+            const stack = container.querySelector('section');
+            expect(stack).toHaveClass('flex-col');
+            expect(stack).toHaveClass('gap-12');
+        });
+    });
+});
+describe('Stack Deprecated Wrapper (patterns/layout/Stack)', () => {
+    // Note: The patterns version re-exports the components version
+    // These tests verify backward compatibility
+    test('deprecated wrapper imports work', async () => {
+        const DeprecatedStack = await import('../../patterns/layout/Stack.svelte');
+        expect(DeprecatedStack.default).toBeDefined();
+    });
+});

package/dist/components/Layout/Stack.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import {
+    gapMap,
+    alignScale,
+    justifyScale,
+    type GapKey,
+    type AlignKey,
+    type JustifyKey,
+  } from '../../tokens/spacing';
 
-  type GapValue = 'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16';
   type Direction = 'vertical' | 'horizontal';
-  type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-  type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
   type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
 
   interface Props {
-    gap?: GapValue;
+    gap?: GapKey;
     direction?: Direction;
-    align?: Align;
-    justify?: Justify;
+    align?: AlignKey;
+    justify?: JustifyKey;
     wrap?: boolean;
     as?: ElementType;
     class?: string;
@@ -31,55 +36,12 @@
     ...restProps
   }: Props = $props();
 
-  const semanticGapMap: Record<string, string> = {
-    'tight': 'gap-1',
-    'compact': 'gap-1.5',
-    'item': 'gap-2',
-    'group': 'gap-3',
-    'content': 'gap-4',
-    'section': 'gap-6',
-    'layout': 'gap-8',
-    'page': 'gap-12',
-  };
-
-  const numericGapMap: Record<string, string> = {
-    '0': 'gap-0',
-    '1': 'gap-1',
-    '1.5': 'gap-1.5',
-    '2': 'gap-2',
-    '3': 'gap-3',
-    '4': 'gap-4',
-    '6': 'gap-6',
-    '8': 'gap-8',
-    '12': 'gap-12',
-    '16': 'gap-16'
-  };
-
-  const gapMap = { ...numericGapMap, ...semanticGapMap };
-
-  const alignMap: Record<string, string> = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-    stretch: 'items-stretch',
-    baseline: 'items-baseline'
-  };
-
-  const justifyMap: Record<string, string> = {
-    start: 'justify-start',
-    center: 'justify-center',
-    end: 'justify-end',
-    between: 'justify-between',
-    around: 'justify-around',
-    evenly: 'justify-evenly'
-  };
-
   let classes = $derived([
     'flex',
     direction === 'vertical' ? 'flex-col' : 'flex-row',
     gapMap[gap] || 'gap-4',
-    align ? alignMap[align] : '',
-    justify ? justifyMap[justify] : '',
+    align ? alignScale[align] : '',
+    justify ? justifyScale[justify] : '',
     wrap ? 'flex-wrap' : '',
     className
   ].filter(Boolean).join(' '));

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

@@ -1,14 +1,12 @@
 import type { Snippet } from 'svelte';
-type GapValue = 'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16';
+import { type GapKey, type AlignKey, type JustifyKey } from '../../tokens/spacing';
 type Direction = 'vertical' | 'horizontal';
-type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
 interface Props {
-    gap?: GapValue;
+    gap?: GapKey;
     direction?: Direction;
-    align?: Align;
-    justify?: Justify;
+    align?: AlignKey;
+    justify?: JustifyKey;
     wrap?: boolean;
     as?: ElementType;
     class?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Stack.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AACnK,KAAK,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3C,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AACjE,KAAK,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC5E,KAAK,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1F,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAkFH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Stack.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAIH,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,sBAAsB,CAAC;AAG9B,KAAK,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3C,KAAK,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1F,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqCH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/Layout/__tests__/Grid.test.d.ts

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

package/dist/components/Layout/__tests__/Grid.test.d.ts.map

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

package/dist/components/Layout/__tests__/Grid.test.js

@@ -0,0 +1,246 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Grid from '../Grid.svelte';
+describe('Grid', () => {
+    describe('basic rendering', () => {
+        it('renders as a div by default', () => {
+            const { container } = render(Grid);
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+        it('applies grid class', () => {
+            const { container } = render(Grid);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid')).toBe(true);
+        });
+        it('applies default gap-4 class', () => {
+            const { container } = render(Grid);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies default 3-column responsive layout', () => {
+            const { container } = render(Grid);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-1')).toBe(true);
+            expect(div?.classList.contains('md:grid-cols-2')).toBe(true);
+            expect(div?.classList.contains('lg:grid-cols-3')).toBe(true);
+        });
+    });
+    describe('cols prop', () => {
+        it('applies single column layout for cols="1"', () => {
+            const { container } = render(Grid, { cols: '1' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-1')).toBe(true);
+            expect(div?.classList.contains('md:grid-cols-2')).toBe(false);
+        });
+        it('applies 2-column responsive layout for cols="2"', () => {
+            const { container } = render(Grid, { cols: '2' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-1')).toBe(true);
+            expect(div?.classList.contains('md:grid-cols-2')).toBe(true);
+            expect(div?.classList.contains('lg:grid-cols-3')).toBe(false);
+        });
+        it('applies 3-column responsive layout for cols="3"', () => {
+            const { container } = render(Grid, { cols: '3' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-1')).toBe(true);
+            expect(div?.classList.contains('md:grid-cols-2')).toBe(true);
+            expect(div?.classList.contains('lg:grid-cols-3')).toBe(true);
+        });
+        it('applies 4-column responsive layout for cols="4"', () => {
+            const { container } = render(Grid, { cols: '4' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-1')).toBe(true);
+            expect(div?.classList.contains('sm:grid-cols-2')).toBe(true);
+            expect(div?.classList.contains('lg:grid-cols-4')).toBe(true);
+        });
+        it('applies 5-column responsive layout for cols="5"', () => {
+            const { container } = render(Grid, { cols: '5' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-1')).toBe(true);
+            expect(div?.classList.contains('sm:grid-cols-2')).toBe(true);
+            expect(div?.classList.contains('lg:grid-cols-5')).toBe(true);
+        });
+        it('applies 6-column responsive layout for cols="6"', () => {
+            const { container } = render(Grid, { cols: '6' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-1')).toBe(true);
+            expect(div?.classList.contains('sm:grid-cols-2')).toBe(true);
+            expect(div?.classList.contains('md:grid-cols-3')).toBe(true);
+            expect(div?.classList.contains('lg:grid-cols-6')).toBe(true);
+        });
+        it('applies 12-column layout for cols="12"', () => {
+            const { container } = render(Grid, { cols: '12' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-12')).toBe(true);
+        });
+        it('applies auto-fit layout with inline style for cols="auto"', () => {
+            const { container } = render(Grid, { cols: 'auto' });
+            const div = container.querySelector('div');
+            expect(div?.getAttribute('style')).toContain('grid-template-columns');
+            expect(div?.getAttribute('style')).toContain('auto-fit');
+            expect(div?.getAttribute('style')).toContain('minmax');
+        });
+    });
+    describe('minWidth prop (for auto columns)', () => {
+        it('uses default minWidth of 280px', () => {
+            const { container } = render(Grid, { cols: 'auto' });
+            const div = container.querySelector('div');
+            expect(div?.getAttribute('style')).toContain('280px');
+        });
+        it('applies custom minWidth', () => {
+            const { container } = render(Grid, { cols: 'auto', minWidth: '300px' });
+            const div = container.querySelector('div');
+            expect(div?.getAttribute('style')).toContain('300px');
+        });
+        it('ignores minWidth when cols is not "auto"', () => {
+            const { container } = render(Grid, { cols: '3', minWidth: '400px' });
+            const div = container.querySelector('div');
+            expect(div?.getAttribute('style')).toBeFalsy();
+        });
+    });
+    describe('gap prop', () => {
+        describe('numeric values', () => {
+            it('applies gap-0 for gap="0"', () => {
+                const { container } = render(Grid, { gap: '0' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-0')).toBe(true);
+            });
+            it('applies gap-6 for gap="6"', () => {
+                const { container } = render(Grid, { gap: '6' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-6')).toBe(true);
+            });
+            it('applies gap-8 for gap="8"', () => {
+                const { container } = render(Grid, { gap: '8' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-8')).toBe(true);
+            });
+        });
+        describe('semantic values', () => {
+            it('applies gap-4 for gap="content"', () => {
+                const { container } = render(Grid, { gap: 'content' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-4')).toBe(true);
+            });
+            it('applies gap-6 for gap="section"', () => {
+                const { container } = render(Grid, { gap: 'section' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-6')).toBe(true);
+            });
+            it('applies gap-8 for gap="layout"', () => {
+                const { container } = render(Grid, { gap: 'layout' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-8')).toBe(true);
+            });
+        });
+        describe('grid-specific semantic values', () => {
+            it('applies gap-4 for gap="tight"', () => {
+                const { container } = render(Grid, { gap: 'tight' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-4')).toBe(true);
+            });
+            it('applies gap-6 for gap="standard"', () => {
+                const { container } = render(Grid, { gap: 'standard' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-6')).toBe(true);
+            });
+            it('applies gap-8 for gap="spacious"', () => {
+                const { container } = render(Grid, { gap: 'spacious' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-8')).toBe(true);
+            });
+        });
+        describe('legacy values', () => {
+            it('applies gap-0 for gap="none"', () => {
+                const { container } = render(Grid, { gap: 'none' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-0')).toBe(true);
+            });
+            it('applies gap-2 for gap="sm"', () => {
+                const { container } = render(Grid, { gap: 'sm' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-2')).toBe(true);
+            });
+            it('applies gap-4 for gap="md"', () => {
+                const { container } = render(Grid, { gap: 'md' });
+                const div = container.querySelector('div');
+                expect(div?.classList.contains('gap-4')).toBe(true);
+            });
+        });
+    });
+    describe('as prop', () => {
+        it('renders as div by default', () => {
+            const { container } = render(Grid);
+            expect(container.querySelector('div')).toBeTruthy();
+            expect(container.querySelector('section')).toBeFalsy();
+        });
+        it('renders as section when as="section"', () => {
+            const { container } = render(Grid, { as: 'section' });
+            expect(container.querySelector('section')).toBeTruthy();
+            expect(container.querySelector('div')).toBeFalsy();
+        });
+        it('renders as ul when as="ul"', () => {
+            const { container } = render(Grid, { as: 'ul' });
+            expect(container.querySelector('ul')).toBeTruthy();
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(Grid, { class: 'custom-grid' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('custom-grid')).toBe(true);
+        });
+        it('preserves default classes when adding custom classes', () => {
+            const { container } = render(Grid, { class: 'custom-grid' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid')).toBe(true);
+            expect(div?.classList.contains('gap-4')).toBe(true);
+            expect(div?.classList.contains('custom-grid')).toBe(true);
+        });
+        it('supports multiple custom classes', () => {
+            const { container } = render(Grid, { class: 'class-a class-b' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('class-a')).toBe(true);
+            expect(div?.classList.contains('class-b')).toBe(true);
+        });
+    });
+    describe('combined props', () => {
+        it('applies all props correctly together', () => {
+            const { container } = render(Grid, {
+                cols: '4',
+                gap: 'section',
+                as: 'section',
+                class: 'my-grid',
+            });
+            const section = container.querySelector('section');
+            expect(section).toBeTruthy();
+            expect(section?.classList.contains('grid')).toBe(true);
+            expect(section?.classList.contains('gap-6')).toBe(true);
+            expect(section?.classList.contains('lg:grid-cols-4')).toBe(true);
+            expect(section?.classList.contains('my-grid')).toBe(true);
+        });
+        it('handles auto columns with custom gap', () => {
+            const { container } = render(Grid, {
+                cols: 'auto',
+                gap: 'spacious',
+                minWidth: '320px',
+            });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid')).toBe(true);
+            expect(div?.classList.contains('gap-8')).toBe(true);
+            expect(div?.getAttribute('style')).toContain('320px');
+        });
+    });
+    describe('12-column layout grid', () => {
+        it('applies fixed 12-column layout without responsive classes', () => {
+            const { container } = render(Grid, { cols: '12', gap: 'none' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid-cols-12')).toBe(true);
+            expect(div?.classList.contains('gap-0')).toBe(true);
+            // Should not have responsive column classes
+            expect(div?.classList.contains('sm:grid-cols-2')).toBe(false);
+            expect(div?.classList.contains('md:grid-cols-3')).toBe(false);
+            expect(div?.classList.contains('lg:grid-cols-6')).toBe(false);
+        });
+    });
+});

package/dist/components/Layout/__tests__/Stack.test.d.ts

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

package/dist/components/Layout/__tests__/Stack.test.d.ts.map

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