@getmicdrop/svelte-components 5.12.0 → 5.14.0

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -26,6 +26,7 @@
       taxPercentage: 0,
     },
     onPriceUpdate,
+    giftCardApplied = null, // { code, giftCardAmount, giftCardBalance, stripeAmount, paymentType, requiresStripe }
   } = $props();
 
   // Helper to get effective price for a ticket (handles donation tickets)
@@ -127,7 +128,22 @@
 
   let taxRate = $derived((venueServiceCharge.taxPercentage || 0) / 100);
   let taxes = $derived(subtotal > 0 ? subtotal * taxRate : 0);
-  let total = $derived(Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)));
+
+  // Gift card derived values
+  let giftCardAmountDisplay = $derived(
+    giftCardApplied ? (giftCardApplied.giftCardAmount / 100).toFixed(2) : null
+  );
+  let giftCardRemainingBalance = $derived(
+    giftCardApplied ? ((giftCardApplied.giftCardBalance - giftCardApplied.giftCardAmount) / 100).toFixed(2) : null
+  );
+
+  // Total accounts for gift card deduction
+  let total = $derived(
+    Math.max(0, subtotal + fees + taxes
+      - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)
+      - (giftCardApplied ? giftCardApplied.giftCardAmount / 100 : 0)
+    )
+  );
 
   $effect(() => {
     onPriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
@@ -206,11 +222,33 @@
         <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Taxes</span><span>${taxes.toFixed(2)}</span>
         </div>
+        {#if giftCardApplied}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Gift Card Applied</span>
+            <span>-${giftCardAmountDisplay}</span>
+          </div>
+          {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
+            <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
+              <span>Gift card balance after order</span>
+              <span>${giftCardRemainingBalance}</span>
+            </div>
+          {/if}
+        {/if}
       </div>
 
-      <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
-        <span>Total</span><span>${total.toFixed(2)}</span>
-      </div>
+      {#if giftCardApplied?.paymentType === 'gift_card_only'}
+        <div class="flex justify-between py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+          <span class="font-semibold text-gray-900 dark:text-white">Amount Due</span>
+          <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
+        </div>
+        <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
+          Fully covered by gift card
+        </p>
+      {:else}
+        <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+          <span>Total</span><span>${total.toFixed(2)}</span>
+        </div>
+      {/if}
     {/if}
 
     {#if totalQuantity > 0 && btnText === 'Place order'}
@@ -322,11 +360,33 @@
         <div class="flex justify-between">
           <span>Taxes</span><span>${taxes.toFixed(2)}</span>
         </div>
+        {#if giftCardApplied}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Gift Card Applied</span>
+            <span>-${giftCardAmountDisplay}</span>
+          </div>
+          {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
+            <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
+              <span>Gift card balance after order</span>
+              <span>${giftCardRemainingBalance}</span>
+            </div>
+          {/if}
+        {/if}
       </div>
 
-      <div class="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
-        <span>Total</span><span>${total.toFixed(2)}</span>
-      </div>
+      {#if giftCardApplied?.paymentType === 'gift_card_only'}
+        <div class="flex justify-between py-5 border-t border-gray-200 dark:border-gray-600">
+          <span class="font-semibold text-gray-900 dark:text-white">Amount Due</span>
+          <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
+        </div>
+        <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
+          Fully covered by gift card
+        </p>
+      {:else}
+        <div class="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
+          <span>Total</span><span>${total.toFixed(2)}</span>
+        </div>
+      {/if}
     </div>
   </div>
 {/if}

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

@@ -18,6 +18,7 @@ declare const OrderSummary: import("svelte").Component<{
     elements?: any;
     venueServiceCharge?: Record<string, any>;
     onPriceUpdate: any;
+    giftCardApplied?: any;
 }, {}, "">;
 type $$ComponentProps = {
     loading?: boolean;
@@ -34,5 +35,6 @@ type $$ComponentProps = {
     elements?: any;
     venueServiceCharge?: Record<string, any>;
     onPriceUpdate: any;
+    giftCardApplied?: any;
 };
 //# sourceMappingURL=OrderSummary.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAoVA;cApU+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;sBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;WAoUnT;wBApUxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAgZA;cAhY+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;sBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;sBAAoB,GAAG;WAgY1U;wBAhYxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAA;CAAE"}

package/dist/index.spec.js

@@ -112,7 +112,6 @@ describe('Recipes Layer - Intermediate Index Files', () => {
       expect(exports).toContain('PasswordStrengthIndicator');
       expect(exports).toContain('PlaceAutocomplete');
       expect(exports).toContain('Search');
-      expect(exports).toContain('SelectDropdown');
     });
   });
 

package/dist/patterns/navigation/Header.svelte

@@ -8,6 +8,8 @@
   import Icon from "../../primitives/Icons/Icon.svelte";
   import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
   import Button from "../../primitives/Button/Button.svelte";
+  import MenuItem from "../../primitives/MenuItem/MenuItem.svelte";
+  import AvatarButton from "../../primitives/AvatarButton/AvatarButton.svelte";
   import { fade, fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { portal } from "../../utils/portal.js";
@@ -89,13 +91,12 @@
     <div class="flex items-center gap-3">
       <DarkModeToggle />
       <div class="relative ml-1">
-        <Button
-          variant="avatar"
+        <AvatarButton
           size="md"
           onclick={() => showDesktopDropdown = !showDesktopDropdown}
         >
           <Avatar src={avatar} rounded size="md" />
-        </Button>
+        </AvatarButton>
 
         {#if showDesktopDropdown}
           <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -107,22 +108,21 @@
               <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
             </div>
             {#each dropdownLinks as { label, href }}
-              <Button
-                variant="menu-item"
+              <MenuItem
                 size="md"
                 onclick={() => handleDropdownItemClick(href)}
               >
                 {label}
-              </Button>
+              </MenuItem>
             {/each}
             <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-            <Button
-              variant="menu-item-danger"
+            <MenuItem
+              danger
               size="md"
               onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
             >
               Sign out
-            </Button>
+            </MenuItem>
           </div>
         {/if}
       </div>
@@ -150,23 +150,21 @@
     <DarkModeToggle />
 
     <div class="relative ml-1">
-      <Button
-        variant="avatar"
+      <AvatarButton
         size="md"
         class="block md:hidden"
         onclick={() => showMobileSheet = true}
       >
         <Avatar src={avatar} rounded size="md" />
-      </Button>
+      </AvatarButton>
 
-      <Button
-        variant="avatar"
+      <AvatarButton
         size="md"
         class="hidden md:block"
         onclick={() => showDesktopDropdown = !showDesktopDropdown}
       >
         <Avatar src={avatar} rounded size="md" />
-      </Button>
+      </AvatarButton>
 
       {#if showDesktopDropdown}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -178,22 +176,21 @@
             <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
           </div>
           {#each dropdownLinks as { label, href }}
-            <Button
-              variant="menu-item"
+            <MenuItem
               size="md"
               onclick={() => handleDropdownItemClick(href)}
             >
               {label}
-            </Button>
+            </MenuItem>
           {/each}
           <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-          <Button
-            variant="menu-item-danger"
+          <MenuItem
+            danger
             size="md"
             onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
           >
             Sign out
-          </Button>
+          </MenuItem>
         </div>
       {/if}
     </div>
@@ -227,22 +224,21 @@
 
       <div class="py-2">
         {#each dropdownLinks as { label, href }}
-          <Button
-            variant="menu-item"
+          <MenuItem
             size="lg"
             onclick={() => handleMobileSheetItemClick(href)}
           >
             {label}
-          </Button>
+          </MenuItem>
         {/each}
 
-        <Button
-          variant="menu-item-danger"
+        <MenuItem
+          danger
           size="lg"
           onclick={() => { showMobileSheet = false; signoutHandler(); }}
         >
           Sign Out
-        </Button>
+        </MenuItem>
       </div>
 
       <div class="border-t-8 border-gray-100 dark:border-gray-700">

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AAkBE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAiMH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AAoBE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAmMH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/AvatarButton/AvatarButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * AvatarButton Component
+   * Clickable avatar/image trigger with opacity hover effect.
+   *
+   * Replaces: Button variant="avatar"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonAvatarSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically an Avatar component or image) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    disabled = false,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'bg-transparent border-transparent rounded-lg focus:outline-hidden transition-all duration-150 ease-out select-none inline-flex items-center justify-center';
+  const hoverClasses = 'hover:opacity-80';
+  const disabledClasses = 'opacity-50 cursor-not-allowed';
+
+  let sizeClass = $derived(buttonAvatarSizes[size] || buttonAvatarSizes.md);
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    sizeClass,
+    disabled ? disabledClasses : `${hoverClasses} cursor-pointer active:scale-[0.97] active:opacity-90`,
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+</button>

package/dist/primitives/AvatarButton/AvatarButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically an Avatar component or image) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const AvatarButton: import("svelte").Component<Props, {}, "">;
+type AvatarButton = ReturnType<typeof AvatarButton>;
+export default AvatarButton;
+//# sourceMappingURL=AvatarButton.svelte.d.ts.map

package/dist/primitives/AvatarButton/AvatarButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/AvatarButton/AvatarButton.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqCH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/primitives/BottomSheet/BottomSheet.spec.js

@@ -14,44 +14,44 @@ describe('BottomSheet Component', () => {
     cleanup();
   });
 
-  it('does not render when show is false', () => {
-    const { container } = render(BottomSheet, { props: { show: false } });
+  it('does not render when open is false', () => {
+    const { container } = render(BottomSheet, { props: { open: false } });
     const backdrop = container.querySelector('.fixed.inset-0');
     expect(backdrop).toBeFalsy();
   });
 
-  it('renders when show is true', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+  it('renders when open is true', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
     const backdrop = container.querySelector('.fixed.inset-0');
     expect(backdrop).toBeTruthy();
   });
 
   it('renders title when provided', () => {
     const { getByText } = render(BottomSheet, {
-      props: { show: true, title: 'Test Title' },
+      props: { open: true, title: 'Test Title' },
     });
     expect(getByText('Test Title')).toBeTruthy();
   });
 
   it('does not render title when not provided', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+    const { container } = render(BottomSheet, { props: { open: true } });
     const title = container.querySelector('h3');
     expect(title).toBeFalsy();
   });
 
-  it('locks body scroll when shown', async () => {
-    render(BottomSheet, { props: { show: true } });
+  it('locks body scroll when open', async () => {
+    render(BottomSheet, { props: { open: true } });
     // Wait for reactive update
     await new Promise((resolve) => setTimeout(resolve, 10));
     expect(document.body.style.overflow).toBe('hidden');
   });
 
-  it('unlocks body scroll when hidden', async () => {
-    const { rerender } = render(BottomSheetWrapper, { props: { show: true } });
+  it('unlocks body scroll when closed', async () => {
+    const { rerender } = render(BottomSheetWrapper, { props: { open: true } });
     await new Promise((resolve) => setTimeout(resolve, 10));
     expect(document.body.style.overflow).toBe('hidden');
 
-    await rerender({ show: false });
+    await rerender({ open: false });
     await new Promise((resolve) => setTimeout(resolve, 10));
 
     expect(document.body.style.overflow).toBe('');
@@ -64,7 +64,7 @@ describe('BottomSheet Component', () => {
     };
 
     const { container } = render(BottomSheet, {
-      props: { show: true, onclose }
+      props: { open: true, onclose }
     });
     const backdrop = container.querySelector('.fixed.inset-0');
 
@@ -79,7 +79,7 @@ describe('BottomSheet Component', () => {
     };
 
     const { container } = render(BottomSheet, {
-      props: { show: true, onclose }
+      props: { open: true, onclose }
     });
     const sheet = container.querySelector('.bg-white, .dark\\:bg-gray-800');
 
@@ -93,33 +93,33 @@ describe('BottomSheet Component', () => {
       closeCalled = true;
     };
 
-    render(BottomSheet, { props: { show: true, onclose } });
+    render(BottomSheet, { props: { open: true, onclose } });
 
     await fireEvent.keyDown(window, { key: 'Escape' });
     expect(closeCalled).toBe(true);
   });
 
-  it('does not dispatch close on Escape when not shown', async () => {
+  it('does not dispatch close on Escape when not open', async () => {
     let closeCalled = false;
     const onclose = () => {
       closeCalled = true;
     };
 
-    render(BottomSheet, { props: { show: false, onclose } });
+    render(BottomSheet, { props: { open: false, onclose } });
 
     await fireEvent.keyDown(window, { key: 'Escape' });
     expect(closeCalled).toBe(false);
   });
 
   it('has handle bar element', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+    const { container } = render(BottomSheet, { props: { open: true } });
     // The handle is the gray bar with rounded corners
     const handle = container.querySelector('.w-10.h-1.bg-gray-300');
     expect(handle).toBeTruthy();
   });
 
   it('has content area for slot content', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
+    const { container } = render(BottomSheet, { props: { open: true } });
     // The content area has overflow-y-auto class
     const content = container.querySelector('.overflow-y-auto');
     expect(content).toBeTruthy();
@@ -127,7 +127,7 @@ describe('BottomSheet Component', () => {
 
   it('cleans up body overflow on destroy', () => {
     document.body.style.overflow = 'hidden';
-    const { unmount } = render(BottomSheet, { props: { show: true } });
+    const { unmount } = render(BottomSheet, { props: { open: true } });
 
     unmount();
 

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -7,7 +7,7 @@
 
   interface Props {
     /** Whether the bottom sheet is visible */
-    show?: boolean;
+    open?: boolean;
     /** Title displayed in the header */
     title?: string;
     /** Callback when the sheet should close */
@@ -19,7 +19,7 @@
   }
 
   let {
-    show = false,
+    open = $bindable(false),
     title = '',
     onclose,
     children,
@@ -37,14 +37,14 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape" && show) {
+    if (e.key === "Escape" && open) {
       close();
     }
   }
 
   $effect(() => {
     if (typeof document !== "undefined") {
-      if (show) {
+      if (open) {
         document.body.style.overflow = "hidden";
       } else {
         document.body.style.overflow = "";
@@ -61,7 +61,7 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if show}
+{#if open}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div

package/dist/primitives/BottomSheet/BottomSheet.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     /** Whether the bottom sheet is visible */
-    show?: boolean;
+    open?: boolean;
     /** Title displayed in the header */
     title?: string;
     /** Callback when the sheet should close */
@@ -11,7 +11,7 @@ interface Props {
     /** Actions slot (footer buttons) */
     actions?: Snippet;
 }
-declare const BottomSheet: import("svelte").Component<Props, {}, "">;
+declare const BottomSheet: import("svelte").Component<Props, {}, "open">;
 type BottomSheet = ReturnType<typeof BottomSheet>;
 export default BottomSheet;
 //# sourceMappingURL=BottomSheet.svelte.d.ts.map

package/dist/primitives/BottomSheet/BottomSheet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoFH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoFH,QAAA,MAAM,WAAW,+CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/primitives/BottomSheet/BottomSheetWrapper.test.svelte

@@ -2,12 +2,12 @@
   import BottomSheet from './BottomSheet.svelte';
 
   interface Props {
-    show?: boolean;
+    open?: boolean;
   }
 
-  let { show = false }: Props = $props();
+  let { open = false }: Props = $props();
 </script>
 
-<BottomSheet {show}>
+<BottomSheet {open}>
   <div>Test content</div>
 </BottomSheet>

package/dist/primitives/BottomSheet/BottomSheetWrapper.test.svelte.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    show?: boolean;
+    open?: boolean;
 }
 declare const BottomSheetWrapper: import("svelte").Component<Props, {}, "">;
 type BottomSheetWrapper = ReturnType<typeof BottomSheetWrapper>;