@getmicdrop/svelte-components 5.4.1 → 5.5.0

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -70,17 +70,18 @@
   }
 </script>
 
-{#each events as event}
-  <article
-    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
-      ? 'flex flex-col'
-      : 'grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] gap-3 sm:gap-4 p-3 sm:p-4'}"
-    onclick={() => handleEventClick(event)}
-    onkeydown={(e) => handleKeydown(e, event)}
-    tabindex="0"
-    role="button"
-    aria-label={`${event.name}, ${event.status || 'On Sale'}, ${formatEventDate(event.date)}. Press Enter to view details.`}
-  >
+{#each events as event}
+  <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+  <article
+    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
+      ? 'flex flex-col'
+      : 'grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] gap-3 sm:gap-4 p-3 sm:p-4'}"
+    onclick={() => handleEventClick(event)}
+    onkeydown={(e) => handleKeydown(e, event)}
+    tabindex="0"
+    role="button"
+    aria-label={`${event.name}, ${event.status || 'On Sale'}, ${formatEventDate(event.date)}. Press Enter to view details.`}
+  >
     <div
       class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
         ? 'w-full aspect-[4/3] rounded-t-lg'

package/dist/calendar/PublicCard/PublicCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;AAmIA;aA3H8B,GAAG,EAAE;WAAS,MAAM;uBAAqB,GAAG;kBAAgB,GAAG;WA2HpC;wBA3HtC;IAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,YAAY,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;AAoIA;aA5H8B,GAAG,EAAE;WAAS,MAAM;uBAAqB,GAAG;kBAAgB,GAAG;WA4HpC;wBA5HtC;IAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,YAAY,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/index.d.ts

@@ -0,0 +1,9 @@
+export { default as PublicCard } from "./PublicCard/PublicCard.svelte";
+export { default as MonthSwitcher } from "./MonthSwitcher/MonthSwitcher.svelte";
+export { default as OrderSummary } from "./OrderSummary/OrderSummary.svelte";
+export { default as ShowCard } from "./ShowCard/ShowCard.svelte";
+export { default as AboutShow } from "./AboutShow/AboutShow.svelte";
+export { default as FAQs } from "./FAQs/FAQs.svelte";
+export { default as ShowTimeCard } from "./ShowTimeCard/ShowTimeCard.svelte";
+export { default as MiniMonthCalendar, default as Calendar } from "./Calendar/MiniMonthCalendar.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/calendar/index.d.ts.map

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

package/dist/calendar/index.js

@@ -0,0 +1,15 @@
+// =============================================================================
+// CALENDAR - Domain components (deferred migration to apps)
+// =============================================================================
+
+export { default as MiniMonthCalendar } from './Calendar/MiniMonthCalendar.svelte';
+// Legacy alias for backward compatibility - will be removed in future version
+export { default as Calendar } from './Calendar/MiniMonthCalendar.svelte';
+
+export { default as PublicCard } from './PublicCard/PublicCard.svelte';
+export { default as MonthSwitcher } from './MonthSwitcher/MonthSwitcher.svelte';
+export { default as OrderSummary } from './OrderSummary/OrderSummary.svelte';
+export { default as ShowCard } from './ShowCard/ShowCard.svelte';
+export { default as AboutShow } from './AboutShow/AboutShow.svelte';
+export { default as FAQs } from './FAQs/FAQs.svelte';
+export { default as ShowTimeCard } from './ShowTimeCard/ShowTimeCard.svelte';

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

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

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

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

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

@@ -0,0 +1,230 @@
+import { describe, it, expect } 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);
+            const grid = container.querySelector('div.grid');
+            expect(grid).toBeTruthy();
+        });
+        it('renders children content', () => {
+            // Note: Svelte 5 snippets cannot be directly tested this way
+            // Just verify the component renders
+            const { container } = render(Grid);
+            // Grid should be rendered
+            expect(container.querySelector('.grid')).toBeTruthy();
+        });
+        it('applies additional CSS classes', () => {
+            const { container } = render(Grid, {
+                props: { class: 'custom-class' }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+    describe('cols prop', () => {
+        it('defaults to 3 columns', () => {
+            const { container } = render(Grid);
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('lg:grid-cols-3')).toBe(true);
+        });
+        it('renders 1 column layout', () => {
+            const { container } = render(Grid, { props: { cols: '1' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+        });
+        it('renders 2 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '2' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+            expect(grid?.classList.contains('md:grid-cols-2')).toBe(true);
+        });
+        it('renders 3 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '3' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+            expect(grid?.classList.contains('md:grid-cols-2')).toBe(true);
+            expect(grid?.classList.contains('lg:grid-cols-3')).toBe(true);
+        });
+        it('renders 4 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '4' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+            expect(grid?.classList.contains('sm:grid-cols-2')).toBe(true);
+            expect(grid?.classList.contains('lg:grid-cols-4')).toBe(true);
+        });
+        it('renders 5 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '5' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('lg:grid-cols-5')).toBe(true);
+        });
+        it('renders 6 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '6' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('lg:grid-cols-6')).toBe(true);
+        });
+        it('renders 12 column layout for custom grids', () => {
+            const { container } = render(Grid, { props: { cols: '12' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-12')).toBe(true);
+        });
+        it('renders auto-fit layout with inline style', () => {
+            const { container } = render(Grid, { props: { cols: 'auto' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('grid-template-columns');
+            expect(grid?.getAttribute('style')).toContain('auto-fit');
+        });
+        it('uses custom minWidth for auto-fit columns', () => {
+            const { container } = render(Grid, {
+                props: { cols: 'auto', minWidth: '300px' }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('300px');
+        });
+        it('defaults to 280px minWidth for auto-fit', () => {
+            const { container } = render(Grid, { props: { cols: 'auto' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('280px');
+        });
+    });
+    describe('gap prop', () => {
+        it('defaults to gap-4', () => {
+            const { container } = render(Grid);
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies numeric gap values', () => {
+            const { container } = render(Grid, { props: { gap: '6' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies zero gap', () => {
+            const { container } = render(Grid, { props: { gap: '0' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-0')).toBe(true);
+        });
+        it('applies semantic gap: section', () => {
+            const { container } = render(Grid, { props: { gap: 'section' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies semantic gap: layout', () => {
+            const { container } = render(Grid, { props: { gap: 'layout' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+        it('applies semantic gap: content', () => {
+            const { container } = render(Grid, { props: { gap: 'content' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies legacy gap: none', () => {
+            const { container } = render(Grid, { props: { gap: 'none' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-0')).toBe(true);
+        });
+        it('applies legacy gap: xs', () => {
+            const { container } = render(Grid, { props: { gap: 'xs' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-1')).toBe(true);
+        });
+        it('applies legacy gap: sm', () => {
+            const { container } = render(Grid, { props: { gap: 'sm' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-2')).toBe(true);
+        });
+        it('applies legacy gap: md', () => {
+            const { container } = render(Grid, { props: { gap: 'md' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies legacy gap: lg', () => {
+            const { container } = render(Grid, { props: { gap: 'lg' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies legacy gap: xl', () => {
+            const { container } = render(Grid, { props: { gap: 'xl' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+        it('applies grid-specific gap: tight', () => {
+            const { container } = render(Grid, { props: { gap: 'tight' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies grid-specific gap: standard', () => {
+            const { container } = render(Grid, { props: { gap: 'standard' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies grid-specific gap: spacious', () => {
+            const { container } = render(Grid, { props: { gap: 'spacious' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+    });
+    describe('as prop', () => {
+        it('renders as div by default', () => {
+            const { container } = render(Grid);
+            expect(container.querySelector('div.grid')).toBeTruthy();
+            expect(container.querySelector('section.grid')).toBeFalsy();
+            expect(container.querySelector('ul.grid')).toBeFalsy();
+        });
+        it('renders as section element', () => {
+            const { container } = render(Grid, { props: { as: 'section' } });
+            expect(container.querySelector('section.grid')).toBeTruthy();
+        });
+        it('renders as ul element', () => {
+            const { container } = render(Grid, { props: { as: 'ul' } });
+            expect(container.querySelector('ul.grid')).toBeTruthy();
+        });
+    });
+    describe('combined props', () => {
+        it('applies multiple props together', () => {
+            const { container } = render(Grid, {
+                props: {
+                    cols: '4',
+                    gap: 'section',
+                    as: 'section',
+                    class: 'my-custom-grid'
+                }
+            });
+            const grid = container.querySelector('section.grid');
+            expect(grid).toBeTruthy();
+            expect(grid?.classList.contains('lg:grid-cols-4')).toBe(true);
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+            expect(grid?.classList.contains('my-custom-grid')).toBe(true);
+        });
+        it('handles 12-column layout with no gap', () => {
+            const { container } = render(Grid, {
+                props: { cols: '12', gap: 'none' }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-12')).toBe(true);
+            expect(grid?.classList.contains('gap-0')).toBe(true);
+        });
+        it('handles auto-fit with custom minWidth and spacious gap', () => {
+            const { container } = render(Grid, {
+                props: {
+                    cols: 'auto',
+                    minWidth: '350px',
+                    gap: 'spacious'
+                }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('350px');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+    });
+    describe('no style attribute for non-auto cols', () => {
+        it('does not add style attribute for fixed column counts', () => {
+            const { container } = render(Grid, { props: { cols: '3' } });
+            const grid = container.querySelector('.grid');
+            // Style should be undefined or empty for non-auto cols
+            const styleAttr = grid?.getAttribute('style');
+            expect(styleAttr === null || styleAttr === '').toBe(true);
+        });
+    });
+});

package/dist/components/Layout/Grid.svelte

@@ -1,108 +1,100 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  /**
-   * Grid - Responsive grid container with automatic column sizing
-   *
-   * Use Grid for laying out cards, stats, or any items in a responsive grid.
-   * Automatically stacks on mobile and expands on larger screens.
-   *
-   * @example Numeric gap
-   * <Grid cols="3" gap="6">
-   *   <StatsCard>Revenue</StatsCard>
-   *   <StatsCard>Users</StatsCard>
-   *   <StatsCard>Orders</StatsCard>
-   * </Grid>
-   *
-   * @example Semantic gap (recommended)
-   * <Grid cols="3" gap="section">
-   *   <Card>Card 1</Card>
-   *   <Card>Card 2</Card>
-   *   <Card>Card 3</Card>
-   * </Grid>
-   *
-   * @example Auto-fit columns
-   * <Grid cols="auto" minWidth="300px" gap="section">
-   *   {#each items as item}
-   *     <Card>{item.name}</Card>
-   *   {/each}
-   * </Grid>
-   *
-   * Semantic Gap Values (Flowbite/8px grid):
-   *   - tight:    16px (4)  - Tight grid items
-   *   - standard: 24px (6)  - Standard grid items (default)
-   *   - spacious: 32px (8)  - Spacious grid items
-   */
-
-  interface Props {
-    /** Number of columns or 'auto' for auto-fit */
-    cols?: '1' | '2' | '3' | '4' | '6' | 'auto';
-    /** Gap between grid items - semantic names or Tailwind spacing scale */
-    gap?: 'tight' | 'standard' | 'spacious' | '0' | '2' | '3' | '4' | '6' | '8';
-    /** Minimum width for auto-fit columns (only used when cols='auto') */
-    minWidth?: string;
-    /** HTML element to render as */
-    as?: 'div' | 'section' | 'ul';
-    /** Additional CSS classes */
-    class?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    cols = '3',
-    gap = '4',
-    minWidth = '280px',
-    as = 'div',
-    class: className = '',
-    children
-  }: Props = $props();
-
-  // Semantic gap names for grids
-  const semanticGapMap: Record<string, string> = {
-    'tight': 'gap-4',      // 16px - Tight grid items
-    'standard': 'gap-6',   // 24px - Standard grid items
-    'spacious': 'gap-8',   // 32px - Spacious grid items
-  };
-
-  // Numeric gap values (backwards compatible)
-  const numericGapMap: Record<string, string> = {
-    '0': 'gap-0',
-    '2': 'gap-2',
-    '3': 'gap-3',
-    '4': 'gap-4',
-    '6': 'gap-6',
-    '8': 'gap-8'
-  };
-
-  // Combined map
-  const gapMap: Record<string, string> = { ...numericGapMap, ...semanticGapMap };
-
-  // Responsive column mappings - stack on mobile, expand on larger screens
-  const colsMap: Record<string, string> = {
-    '1': 'grid-cols-1',
-    '2': 'grid-cols-1 md:grid-cols-2',
-    '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    '6': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
-    'auto': '' // Uses inline style
-  };
-
-  let gridStyle = $derived(
-    cols === 'auto'
-      ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr));`
-      : ''
-  );
-
-  let classes = $derived(
-    [
-      'grid',
-      cols !== 'auto' ? colsMap[cols] : '',
-      gapMap[gap] || 'gap-4',
-      className
-    ].filter(Boolean).join(' ')
-  );
-</script>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { gapMap, type GapKey } from '../../tokens/spacing.js';
+
+  /**
+   * Grid - Responsive grid container with automatic column sizing
+   *
+   * Use Grid for laying out cards, stats, or any items in a responsive grid.
+   * Automatically stacks on mobile and expands on larger screens.
+   *
+   * @example Numeric gap
+   * <Grid cols="3" gap="6">
+   *   <StatsCard>Revenue</StatsCard>
+   *   <StatsCard>Users</StatsCard>
+   *   <StatsCard>Orders</StatsCard>
+   * </Grid>
+   *
+   * @example Semantic gap (recommended)
+   * <Grid cols="3" gap="section">
+   *   <Card>Card 1</Card>
+   *   <Card>Card 2</Card>
+   *   <Card>Card 3</Card>
+   * </Grid>
+   *
+   * @example Auto-fit columns
+   * <Grid cols="auto" minWidth="300px" gap="section">
+   *   {#each items as item}
+   *     <Card>{item.name}</Card>
+   *   {/each}
+   * </Grid>
+   *
+   * @example 12-column layout grid
+   * <Grid cols="12" gap="none">
+   *   <div class="col-span-4">Sidebar</div>
+   *   <div class="col-span-8">Content</div>
+   * </Grid>
+   *
+   * Semantic Gap Values (from tokens/spacing.ts):
+   *   - none:     0px       - No gap (for 12-col layouts)
+   *   - xs:       4px (1)   - Extra small gap
+   *   - sm:       8px (2)   - Small gap
+   *   - tight:    16px (4)  - Tight grid items (alias: md, content)
+   *   - standard: 24px (6)  - Standard grid items (alias: lg, section)
+   *   - spacious: 32px (8)  - Spacious grid items (alias: xl, layout)
+   */
+
+  interface Props {
+    /** Number of columns or 'auto' for auto-fit */
+    cols?: '1' | '2' | '3' | '4' | '5' | '6' | '12' | 'auto';
+    /** Gap between grid items - semantic names or Tailwind spacing scale */
+    gap?: GapKey;
+    /** Minimum width for auto-fit columns (only used when cols='auto') */
+    minWidth?: string;
+    /** HTML element to render as */
+    as?: 'div' | 'section' | 'ul';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    cols = '3',
+    gap = '4',
+    minWidth = '280px',
+    as = 'div',
+    class: className = '',
+    children
+  }: Props = $props();
+
+  // Responsive column mappings - stack on mobile, expand on larger screens
+  const colsMap: Record<string, string> = {
+    '1': 'grid-cols-1',
+    '2': 'grid-cols-1 md:grid-cols-2',
+    '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    '5': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5',
+    '6': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    '12': 'grid-cols-12',
+    'auto': '' // Uses inline style
+  };
+
+  let gridStyle = $derived(
+    cols === 'auto'
+      ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr));`
+      : ''
+  );
+
+  let classes = $derived(
+    [
+      'grid',
+      cols !== 'auto' ? colsMap[cols] : '',
+      gapMap[gap] || 'gap-4',
+      className
+    ].filter(Boolean).join(' ')
+  );
+</script>
 
 <svelte:element this={as} class={classes} style={gridStyle || undefined}>
   {@render children?.()}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type GapKey } from '../../tokens/spacing.js';
 /**
  * Grid - Responsive grid container with automatic column sizing
  *
@@ -26,16 +27,25 @@ import type { Snippet } from 'svelte';
  *   {/each}
  * </Grid>
  *
- * Semantic Gap Values (Flowbite/8px grid):
- *   - tight:    16px (4)  - Tight grid items
- *   - standard: 24px (6)  - Standard grid items (default)
- *   - spacious: 32px (8)  - Spacious grid items
+ * @example 12-column layout grid
+ * <Grid cols="12" gap="none">
+ *   <div class="col-span-4">Sidebar</div>
+ *   <div class="col-span-8">Content</div>
+ * </Grid>
+ *
+ * Semantic Gap Values (from tokens/spacing.ts):
+ *   - none:     0px       - No gap (for 12-col layouts)
+ *   - xs:       4px (1)   - Extra small gap
+ *   - sm:       8px (2)   - Small gap
+ *   - tight:    16px (4)  - Tight grid items (alias: md, content)
+ *   - standard: 24px (6)  - Standard grid items (alias: lg, section)
+ *   - spacious: 32px (8)  - Spacious grid items (alias: xl, layout)
  */
 interface Props {
     /** Number of columns or 'auto' for auto-fit */
-    cols?: '1' | '2' | '3' | '4' | '6' | 'auto';
+    cols?: '1' | '2' | '3' | '4' | '5' | '6' | '12' | 'auto';
     /** Gap between grid items - semantic names or Tailwind spacing scale */
-    gap?: 'tight' | 'standard' | 'spacious' | '0' | '2' | '3' | '4' | '6' | '8';
+    gap?: GapKey;
     /** Minimum width for auto-fit columns (only used when cols='auto') */
     minWidth?: string;
     /** HTML element to render as */

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Grid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,UAAU,KAAK;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAC5C,wEAAwE;IACxE,GAAG,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5E,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkEH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Grid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Grid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,UAAU,KAAK;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;IACzD,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiDH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

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

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

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