@getmicdrop/svelte-components 5.17.1 → 5.17.4

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -2,6 +2,7 @@
   import { ChevronLeftOutline, ChevronRightOutline, CheckCircleSolid } from '../../primitives/Icons';
   import Spinner from '../../primitives/Spinner/Spinner.svelte';
   import { typography } from '../../tokens/typography';
+  import { formatDayOfWeek, formatMonth } from '../../datetime/format';
 
   let {
     variant = 'availability',
@@ -592,13 +593,10 @@
   }
 
   function getDayAriaLabel(day) {
-    const date = new Date(currentYear, currentMonth, day.day);
-    const dateStr = date.toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric'
-    });
+    const isoStr = new Date(currentYear, currentMonth, day.day).toISOString();
+    const dayOfWeek = formatDayOfWeek(isoStr, 'UTC', false);
+    const month = formatMonth(isoStr, 'UTC', false);
+    const dateStr = `${dayOfWeek}, ${month} ${day.day}, ${currentYear}`;
 
     let label = dateStr;
     if (day.isToday) label += ', Today';

package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AAitBA;cArsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;wBAqsBvP;wBArsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AAgtBA;cAlsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;wBAksBvP;wBAlsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte

@@ -1,6 +1,7 @@
 <script>
   import { ChevronLeftOutline, ChevronRightOutline } from '../../primitives/Icons';
   import { typography } from '../../tokens/typography';
+  import { formatMonth } from '../../datetime/format';
 
   const today = new Date();
   const todayLocalMonth = today.getMonth();
@@ -63,9 +64,7 @@
 
 <header class="w-full flex items-center justify-between select-none">
   <h2 class="{typography.h1} text-3xl">
-    {new Intl.DateTimeFormat("en", {
-      month: "long",
-    }).format(new Date(currentYear, currentMonth, 1))}
+    {formatMonth(new Date(currentYear, currentMonth, 1).toISOString(), 'UTC', false)}
   </h2>
   <div class="flex items-center gap-2">
     <button

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

@@ -1 +1 @@
-{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;AA0FA;;;;;;4BA5E+L,OAAO;WA4E1I;wBA5EzC;IAAE,WAAW,CAAC,SAAwB;IAAC,YAAY,CAAC,SAAyB;IAAC,UAAU,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,WAAW,CAAC,WAAW;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAAE"}
+{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;AA0FA;;;;;;4BA1E+L,OAAO;WA0E1I;wBA1EzC;IAAE,WAAW,CAAC,SAAwB;IAAC,YAAY,CAAC,SAAyB;IAAC,UAAU,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,WAAW,CAAC,WAAW;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -1,5 +1,6 @@
 <script>
   import { typography } from '../../tokens/typography';
+  import { formatEventDate as formatDateTz, formatEventTime } from '../../datetime/format';
 
   let {
     events = [],
@@ -14,12 +15,6 @@
 
   let placeholder = $derived(placeholderImage || DEFAULT_PLACEHOLDER);
 
-  let options = {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-  };
-
   function handleResize() {
     _isSmallScreen = window.innerWidth < 768;
   }
@@ -62,11 +57,25 @@
     return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
   }
 
-  function formatEventDate(dateStr) {
-    if (!dateStr) return '';
-    const [year, month, day] = dateStr.split('-').map(Number);
+  function formatEventDate(event) {
+    // Prefer timezone-aware formatting via startDateTime + timeZone
+    if (event.startDateTime && event.timeZone) {
+      return formatDateTz(event.startDateTime, event.timeZone, { includeYear: false });
+    }
+    // Fallback for legacy event.date (YYYY-MM-DD)
+    if (!event.date) return '';
+    const [year, month, day] = event.date.split('-').map(Number);
     const date = new Date(year, month - 1, day);
-    return date.toLocaleDateString("en-US", options);
+    return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+  }
+
+  function formatTime(event) {
+    if (event.startDateTime && event.timeZone) {
+      return formatEventTime(event.startDateTime, event.timeZone);
+    }
+    // Fallback for legacy event.timeline
+    if (event.timeline) return event.timeline.split("-")[0].trim();
+    return '';
   }
 </script>
 
@@ -80,7 +89,7 @@
     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.`}
+    aria-label={`${event.name}, ${event.status || 'On Sale'}, ${formatEventDate(event)}. Press Enter to view details.`}
   >
     <div
       class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
@@ -122,10 +131,10 @@
         class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
       >
         <span class="font-medium">
-          {formatEventDate(event.date)}
-          {#if event.timeline}
+          {formatEventDate(event)}
+          {#if event.startDateTime || event.timeline}
             <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
-            {event.timeline.split("-")[0].trim()}
+            {formatTime(event)}
           {/if}
         </span>
       </div>

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":";;;;;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"}
+{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;AA8IA;aApI8B,GAAG,EAAE;WAAS,MAAM;uBAAqB,GAAG;kBAAgB,GAAG;WAoIpC;wBApItC;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/ShowCard/ShowCard.spec.js

@@ -281,19 +281,13 @@ describe('ShowCard Component', () => {
     });
 
     it('handles clipboard error gracefully', async () => {
-      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       navigator.clipboard.writeText = vi.fn().mockRejectedValue(new Error('Clipboard failed'));
 
       render(ShowCard, { props: { event: mockEvent, showTitle: true } });
       const shareButton = screen.getByLabelText('Share event');
 
+      // Should not throw — error is silently swallowed
       await fireEvent.click(shareButton);
-
-      await waitFor(() => {
-        expect(consoleErrorSpy).toHaveBeenCalled();
-      });
-
-      consoleErrorSpy.mockRestore();
     });
 
     it('handles missing venue name in share text', async () => {

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -2,6 +2,7 @@
   import { ShareOutline, CheckOutline } from '../../primitives/Icons';
   import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
   import { typography } from '../../tokens/typography';
+  import { formatEventDateTime, formatEventTime } from '../../datetime/format';
 
   let {
     event = {},
@@ -9,6 +10,10 @@
     showTitle = true,
     formatDateTime = (dateStr) => {
       if (!dateStr) return '';
+      // Use timezone-aware formatting if event has timeZone
+      if (event.timeZone) {
+        return formatEventDateTime(dateStr, event.timeZone);
+      }
       const date = new Date(dateStr);
       if (isNaN(date.getTime())) return dateStr;
       return date.toLocaleDateString('en-US', {
@@ -22,6 +27,10 @@
     },
     formatTimeline = (timeStr) => {
       if (!timeStr) return '';
+      // Use timezone-aware formatting if event has timeZone
+      if (event.timeZone) {
+        return formatEventTime(timeStr, event.timeZone);
+      }
       const date = new Date(timeStr);
       if (!isNaN(date.getTime())) {
         return date.toLocaleTimeString('en-US', {
@@ -69,7 +78,7 @@
             shareSuccess = false;
           }, 2000);
         } catch {
-          console.error('Share failed:', err);
+          // Silently fail — both share and clipboard copy failed
         }
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;AAwJA;YA5I6B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAAc,GAAG,EAAE;gBAAc,OAAO;;;sBAA0E,GAAG;WA4I9G;wBA5IpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,cAAc,CAAC,WAAW;IAAC,gBAAgB,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;AAkKA;YApJ6B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAAc,GAAG,EAAE;gBAAc,OAAO;;;sBAA0E,GAAG;WAoJ9G;wBApJpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,cAAc,CAAC,WAAW;IAAC,gBAAgB,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte

@@ -1,10 +1,12 @@
 <script>
   import { typography } from '../../tokens/typography';
+  import { formatEventTime, formatEventDate } from '../../datetime/format';
 
   let {
     day = '',
     date = '',
     time = '',
+    timezone = '',
     isSelected = false,
     onselect,
   } = $props();
@@ -22,6 +24,11 @@
 
   function formatHour(timeStr) {
     if (!timeStr) return '';
+    // If we have an ISO string and timezone, use timezone-aware formatting
+    if (timezone && timeStr.includes('T')) {
+      return formatEventTime(timeStr, timezone);
+    }
+    // Fallback for HH:mm time strings
     const d = new Date(`1970-01-01T${timeStr}`);
     if (isNaN(d.getTime())) return timeStr;
     return d.toLocaleTimeString('en-US', {
@@ -33,6 +40,10 @@
 
   function formatDate(dateStr) {
     if (!dateStr) return '';
+    // If we have timezone, use timezone-aware formatting
+    if (timezone) {
+      return formatEventDate(dateStr, timezone, { includeYear: false });
+    }
     const d = new Date(dateStr);
     if (isNaN(d.getTime())) return dateStr;
     return d.toLocaleDateString('en-US', {

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte.d.ts

@@ -7,6 +7,7 @@ declare const ShowTimeCard: import("svelte").Component<{
     day?: string;
     date?: string;
     time?: string;
+    timezone?: string;
     isSelected?: boolean;
     onselect: any;
 }, {}, "">;
@@ -14,6 +15,7 @@ type $$ComponentProps = {
     day?: string;
     date?: string;
     time?: string;
+    timezone?: string;
     isSelected?: boolean;
     onselect: any;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;AA6DA;UArD2B,MAAM;WAAS,MAAM;WAAS,MAAM;iBAAe,OAAO;cAAY,GAAG;WAqDzC;wBArDxC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;AAyEA;UA/D2B,MAAM;WAAS,MAAM;WAAS,MAAM;eAAa,MAAM;iBAAe,OAAO;cAAY,GAAG;WA+D5D;wBA/DxC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/components/Heading.spec.d.ts

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

package/dist/components/Heading.spec.d.ts.map

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

package/dist/components/Heading.spec.js

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Heading from './Heading.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Heading', () => {
+  test('renders h2 by default', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('Title') } });
+    expect(container.querySelector('h2')).toBeInTheDocument();
+    expect(container.textContent).toContain('Title');
+  });
+
+  test('renders h1 when level=1', () => {
+    const { container } = render(Heading, { props: { level: 1, children: textSnippet('H1') } });
+    expect(container.querySelector('h1')).toBeInTheDocument();
+  });
+
+  test('renders h3 when level=3', () => {
+    const { container } = render(Heading, { props: { level: 3, children: textSnippet('H3') } });
+    expect(container.querySelector('h3')).toBeInTheDocument();
+  });
+
+  test('renders h4 when level=4', () => {
+    const { container } = render(Heading, { props: { level: 4, children: textSnippet('H4') } });
+    expect(container.querySelector('h4')).toBeInTheDocument();
+  });
+
+  test('renders h5 when level=5', () => {
+    const { container } = render(Heading, { props: { level: 5, children: textSnippet('H5') } });
+    expect(container.querySelector('h5')).toBeInTheDocument();
+  });
+
+  test('renders h6 when level=6', () => {
+    const { container } = render(Heading, { props: { level: 6, children: textSnippet('H6') } });
+    expect(container.querySelector('h6')).toBeInTheDocument();
+  });
+
+  test('default size is lg', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('Test') } });
+    expect(container.querySelector('h2')).toHaveClass('text-lg');
+  });
+
+  test('size xs', () => {
+    const { container } = render(Heading, { props: { size: 'xs', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('text-xs');
+  });
+
+  test('size 3xl', () => {
+    const { container } = render(Heading, { props: { size: '3xl', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('text-3xl');
+  });
+
+  test('weight bold', () => {
+    const { container } = render(Heading, { props: { weight: 'bold', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('font-bold');
+  });
+
+  test('weight semibold', () => {
+    const { container } = render(Heading, { props: { weight: 'semibold', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('font-semibold');
+  });
+
+  test('no weight class when not provided', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('T') } });
+    const h2 = container.querySelector('h2');
+    expect(h2.className).not.toContain('font-');
+  });
+
+  test('passes id prop', () => {
+    const { container } = render(Heading, { props: { id: 'my-heading', children: textSnippet('T') } });
+    expect(container.querySelector('#my-heading')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Heading, { props: { class: 'custom', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('custom');
+  });
+
+  test('has dark mode text class', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('h2').className).toContain('dark:text-white');
+  });
+});

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

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
 import AppShell from '../AppShell.svelte';
 describe('AppShell', () => {
     describe('basic rendering', () => {
@@ -92,4 +93,143 @@ describe('AppShell', () => {
             expect(container.querySelector('nav')).toBeFalsy();
         });
     });
+    describe('header snippet rendering', () => {
+        it('renders header element when header snippet is provided', () => {
+            const header = createRawSnippet(() => ({
+                render: () => `<div>Header Content</div>`
+            }));
+            const { container } = render(AppShell, { header });
+            const headerEl = container.querySelector('header');
+            expect(headerEl).toBeTruthy();
+            expect(headerEl?.textContent).toContain('Header Content');
+        });
+        it('applies fixed positioning classes when fixedHeader=true and header provided', () => {
+            const header = createRawSnippet(() => ({
+                render: () => `<div>Fixed Header</div>`
+            }));
+            const { container } = render(AppShell, { header, fixedHeader: true });
+            const headerEl = container.querySelector('header');
+            expect(headerEl?.classList.contains('fixed')).toBe(true);
+            expect(headerEl?.classList.contains('top-0')).toBe(true);
+            expect(headerEl?.classList.contains('left-0')).toBe(true);
+        });
+        it('does not apply fixed positioning when fixedHeader=false and header provided', () => {
+            const header = createRawSnippet(() => ({
+                render: () => `<div>Non-fixed Header</div>`
+            }));
+            const { container } = render(AppShell, { header, fixedHeader: false });
+            const headerEl = container.querySelector('header');
+            expect(headerEl?.classList.contains('fixed')).toBe(false);
+            expect(headerEl?.classList.contains('top-0')).toBe(false);
+            expect(headerEl?.classList.contains('left-0')).toBe(false);
+        });
+        it('header has z-30 and w-full classes', () => {
+            const header = createRawSnippet(() => ({
+                render: () => `<div>Header</div>`
+            }));
+            const { container } = render(AppShell, { header });
+            const headerEl = container.querySelector('header');
+            expect(headerEl?.classList.contains('w-full')).toBe(true);
+            expect(headerEl?.classList.contains('z-30')).toBe(true);
+        });
+    });
+    describe('sidebar snippet rendering', () => {
+        it('renders aside element when sidebar snippet is provided', () => {
+            const sidebar = createRawSnippet(() => ({
+                render: () => `<div>Sidebar Content</div>`
+            }));
+            const { container } = render(AppShell, { sidebar });
+            const aside = container.querySelector('aside');
+            expect(aside).toBeTruthy();
+            expect(aside?.textContent).toContain('Sidebar Content');
+        });
+        it('applies w-64 when sidebar provided and sidebarCollapsed=false', () => {
+            const sidebar = createRawSnippet(() => ({
+                render: () => `<div>Sidebar</div>`
+            }));
+            const { container } = render(AppShell, { sidebar, sidebarCollapsed: false });
+            const aside = container.querySelector('aside');
+            expect(aside?.classList.contains('w-64')).toBe(true);
+            expect(aside?.classList.contains('w-20')).toBe(false);
+        });
+        it('applies w-20 when sidebar provided and sidebarCollapsed=true', () => {
+            const sidebar = createRawSnippet(() => ({
+                render: () => `<div>Sidebar</div>`
+            }));
+            const { container } = render(AppShell, { sidebar, sidebarCollapsed: true });
+            const aside = container.querySelector('aside');
+            expect(aside?.classList.contains('w-20')).toBe(true);
+            expect(aside?.classList.contains('w-64')).toBe(false);
+        });
+        it('applies md:ml-64 to main when sidebar provided and not collapsed', () => {
+            const sidebar = createRawSnippet(() => ({
+                render: () => `<div>Sidebar</div>`
+            }));
+            const { container } = render(AppShell, { sidebar, sidebarCollapsed: false });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('md:ml-64')).toBe(true);
+        });
+        it('applies md:ml-20 to main when sidebar provided and collapsed', () => {
+            const sidebar = createRawSnippet(() => ({
+                render: () => `<div>Sidebar</div>`
+            }));
+            const { container } = render(AppShell, { sidebar, sidebarCollapsed: true });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('md:ml-20')).toBe(true);
+        });
+    });
+    describe('bottomNav snippet rendering', () => {
+        it('renders nav element when bottomNav snippet and showBottomNav=true', () => {
+            const bottomNav = createRawSnippet(() => ({
+                render: () => `<div>Bottom Nav</div>`
+            }));
+            const { container } = render(AppShell, { bottomNav, showBottomNav: true });
+            const nav = container.querySelector('nav');
+            expect(nav).toBeTruthy();
+            expect(nav?.textContent).toContain('Bottom Nav');
+        });
+        it('does not render nav when bottomNav provided but showBottomNav=false', () => {
+            const bottomNav = createRawSnippet(() => ({
+                render: () => `<div>Bottom Nav</div>`
+            }));
+            const { container } = render(AppShell, { bottomNav, showBottomNav: false });
+            expect(container.querySelector('nav')).toBeFalsy();
+        });
+        it('applies pb-16 to main when bottomNav and showBottomNav are set', () => {
+            const bottomNav = createRawSnippet(() => ({
+                render: () => `<div>Bottom Nav</div>`
+            }));
+            const { container } = render(AppShell, { bottomNav, showBottomNav: true });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('pb-16')).toBe(true);
+        });
+        it('nav has fixed bottom positioning and z-30', () => {
+            const bottomNav = createRawSnippet(() => ({
+                render: () => `<div>Bottom Nav</div>`
+            }));
+            const { container } = render(AppShell, { bottomNav, showBottomNav: true });
+            const nav = container.querySelector('nav');
+            expect(nav?.classList.contains('fixed')).toBe(true);
+            expect(nav?.classList.contains('bottom-0')).toBe(true);
+            expect(nav?.classList.contains('z-30')).toBe(true);
+        });
+    });
+    describe('children snippet rendering', () => {
+        it('renders children content in main area', () => {
+            const children = createRawSnippet(() => ({
+                render: () => `<div>Main Content</div>`
+            }));
+            const { container } = render(AppShell, { children });
+            const main = container.querySelector('main');
+            expect(main?.textContent).toContain('Main Content');
+        });
+        it('does not render children placeholder when no children provided', () => {
+            const { container } = render(AppShell);
+            const main = container.querySelector('main');
+            const innerDiv = main?.querySelector('div');
+            expect(innerDiv).toBeTruthy();
+            // Inner div should be empty when no children
+            expect(innerDiv?.children.length).toBe(0);
+        });
+    });
 });

package/dist/components/Text.spec.d.ts

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

package/dist/components/Text.spec.d.ts.map

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

package/dist/components/Text.spec.js

@@ -0,0 +1,89 @@
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Text from './Text.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Text', () => {
+  test('renders a span element', () => {
+    const { container } = render(Text, { props: { children: textSnippet('Hello') } });
+    expect(container.querySelector('span')).toBeInTheDocument();
+    expect(container.textContent).toContain('Hello');
+  });
+
+  test('default size is md (text-base)', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-base');
+  });
+
+  test('size xs', () => {
+    const { container } = render(Text, { props: { size: 'xs', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-xs');
+  });
+
+  test('size lg', () => {
+    const { container } = render(Text, { props: { size: 'lg', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-lg');
+  });
+
+  test('size 2xl', () => {
+    const { container } = render(Text, { props: { size: '2xl', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-2xl');
+  });
+
+  test('default color is default (gray-900)', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-gray-900');
+  });
+
+  test('color muted', () => {
+    const { container } = render(Text, { props: { color: 'muted', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-gray-500');
+  });
+
+  test('color success', () => {
+    const { container } = render(Text, { props: { color: 'success', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-green-600');
+  });
+
+  test('color error', () => {
+    const { container } = render(Text, { props: { color: 'error', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-red-600');
+  });
+
+  test('leading tight', () => {
+    const { container } = render(Text, { props: { leading: 'tight', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('leading-tight');
+  });
+
+  test('leading relaxed', () => {
+    const { container } = render(Text, { props: { leading: 'relaxed', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('leading-relaxed');
+  });
+
+  test('no leading class when not provided', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    const cls = container.querySelector('span').className;
+    expect(cls).not.toContain('leading-');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Text, { props: { class: 'custom-text', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('custom-text');
+  });
+
+  test('invalid size falls back to text-base', () => {
+    const { container } = render(Text, { props: { size: 'invalid', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-base');
+  });
+
+  test('invalid color falls back gracefully', () => {
+    const { container } = render(Text, { props: { color: 'invalid', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toBeInTheDocument();
+  });
+});