@getmicdrop/svelte-components 5.12.0 → 5.13.0

package/dist/recipes/modals/AlertModal.svelte

@@ -7,7 +7,7 @@
    *
    * @example
    * <AlertModal
-   *   bind:show={showAlert}
+   *   bind:open={showAlert}
    *   variant="success"
    *   title="Changes saved"
    *   message="Your changes have been saved successfully."
@@ -21,7 +21,7 @@
 
   let {
     /** Whether the modal is visible */
-    show = $bindable(false),
+    open = $bindable(false),
     /** Alert variant */
     variant = 'info',
     /** Alert title */
@@ -33,7 +33,7 @@
     /** Auto-close delay in milliseconds (0 to disable) */
     autoClose = 0,
     /** Modal size */
-    size = 'small',
+    size = 'sm',
     /** Callbacks */
     onclose,
     onconfirm,
@@ -66,7 +66,7 @@
   let styles = $derived(variantStyles[variant] || variantStyles.info);
 
   function closeModal() {
-    show = false;
+    open = false;
     onclose?.();
   }
 
@@ -77,7 +77,7 @@
 
   // Start auto-close timer when modal opens
   $effect(() => {
-    if (show && autoClose > 0) {
+    if (open && autoClose > 0) {
       const timer = setTimeout(() => {
         closeModal();
       }, autoClose);
@@ -86,7 +86,7 @@
   });
 </script>
 
-<Modal bind:show {size}>
+<Modal bind:open {size}>
   {#snippet header()}
     <div class="text-center">
       <div class="flex justify-center items-center">

package/dist/recipes/modals/AlertModal.svelte.d.ts

@@ -4,7 +4,7 @@ type AlertModal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const AlertModal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     variant?: string;
     title?: string;
     message?: string;
@@ -13,9 +13,9 @@ declare const AlertModal: import("svelte").Component<{
     size?: string;
     onclose: any;
     onconfirm: any;
-}, {}, "show">;
+}, {}, "open">;
 type $$ComponentProps = {
-    show?: boolean;
+    open?: boolean;
     variant?: string;
     title?: string;
     message?: string;

package/dist/recipes/modals/ConfirmationModal.spec.js

@@ -12,7 +12,7 @@ function setupTest(args = {}) {
   const user = userEvent.setup();
   const { component } = render(ConfirmationModal, {
     props: {
-      show: true,
+      open: true,
       title: "Test Modal",
       description: "This is a test description",
       actions: defaultActions.map((a) => ({ ...a, onClick: vi.fn() })),
@@ -28,7 +28,7 @@ describe("ConfirmationModal Component Tests", () => {
   // Use getAllByText/queryAllByText and check length or first element
 
   test("Does not render when show is false", () => {
-    render(ConfirmationModal, { props: { show: false } });
+    render(ConfirmationModal, { props: { open: false } });
     expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
   });
 

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -6,8 +6,8 @@
   import { triggerHaptic } from '../../utils/haptic.js';
 
   let {
-    show = $bindable(false),
-    size = "default",
+    open = $bindable(false),
+    size = "md",
     title = "",
     description = "",
     warningText = "",
@@ -66,13 +66,13 @@
     }
 
     action.onClick?.();
-    show = false;
+    open = false;
   };
 
   const handleClose = () => {
     if (disabled || loading) return;
     onclose?.();
-    show = false;
+    open = false;
   };
 
   const getVariant = (action) => {
@@ -107,7 +107,7 @@
   };
 </script>
 
-<Modal bind:show {size} oncancel={handleClose} {...restProps}>
+<Modal bind:open {size} oncancel={handleClose} {...restProps}>
   {#snippet header()}
     <div>
       {#if closeBtn}

package/dist/recipes/modals/ConfirmationModal.svelte.d.ts

@@ -4,7 +4,7 @@ type ConfirmationModal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ConfirmationModal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     description?: string;
@@ -22,9 +22,9 @@ declare const ConfirmationModal: import("svelte").Component<{
     onconfirm: any;
     oncancel: any;
     onclose: any;
-} & Record<string, any>, {}, "show">;
+} & Record<string, any>, {}, "open">;
 type $$ComponentProps = {
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     description?: string;

package/dist/recipes/modals/InputModal.spec.js

@@ -8,7 +8,7 @@ function setupTest(args = {}) {
   const user = userEvent.setup();
   const { component } = render(InputModal, {
     props: {
-      show: true,
+      open: true,
       title: "Test Input Modal",
       ...args,
     },
@@ -27,7 +27,7 @@ describe("InputModal Component Tests", () => {
 
   // Basic rendering tests
   test("Does not render when show is false", () => {
-    render(InputModal, { props: { show: false } });
+    render(InputModal, { props: { open: false } });
     expect(screen.queryByText("Test Input Modal")).not.toBeInTheDocument();
   });
 

package/dist/recipes/modals/InputModal.svelte

@@ -6,8 +6,8 @@
   import { typography } from '../../tokens/typography';
 
   let {
-    show = $bindable(false),
-    size = "default", // "small" | "default" | "large"
+    open = $bindable(false),
+    size = "md", // "sm" | "md" | "lg" | "xl"
     title = "",
     description = "",
     closeBtn = false, // To show close button
@@ -68,7 +68,7 @@
   };
 
   const closeModal = () => {
-    show = false;
+    open = false;
     onclose?.();
   };
 
@@ -78,7 +78,7 @@
   };
 </script>
 
-<Modal bind:show {size} {persistent}>
+<Modal bind:open {size} {persistent}>
   {#snippet header()}
     <div class="text-left">
       {#if closeBtn}

package/dist/recipes/modals/InputModal.svelte.d.ts

@@ -4,7 +4,7 @@ type InputModal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const InputModal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     description?: string;
@@ -29,9 +29,9 @@ declare const InputModal: import("svelte").Component<{
     onconfirm: any;
     oncancel: any;
     onclose: any;
-}, {}, "show" | "inputValue">;
+}, {}, "open" | "inputValue">;
 type $$ComponentProps = {
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     description?: string;

package/dist/recipes/modals/ModalTestWrapper.spec.js

@@ -13,18 +13,18 @@ describe('ModalTestWrapper', () => {
 
   describe('Basic Rendering', () => {
     it('should not render when show is false', () => {
-      render(ModalTestWrapper, { props: { show: false } });
+      render(ModalTestWrapper, { props: { open: false } });
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
 
     it('should render when show is true', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should render modal without errors when no props provided', () => {
       expect(() => {
-        render(ModalTestWrapper, { props: { show: true } });
+        render(ModalTestWrapper, { props: { open: true } });
       }).not.toThrow();
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
@@ -35,7 +35,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: 'Test Modal Title'
           }
         });
@@ -46,7 +46,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             description: 'Test modal description'
           }
         });
@@ -57,7 +57,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             warningText: 'Warning message'
           }
         });
@@ -69,7 +69,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             oncancel
           }
         });
@@ -81,7 +81,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: 'Full Test',
             description: 'Full description',
             warningText: 'Full warning',
@@ -96,13 +96,13 @@ describe('ModalTestWrapper', () => {
   describe('Show Prop Binding', () => {
     it('should render when show is true and not render when false', () => {
       const { unmount: unmount1 } = render(ModalTestWrapper, {
-        props: { show: true }
+        props: { open: true }
       });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
       unmount1();
 
       render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
@@ -110,14 +110,14 @@ describe('ModalTestWrapper', () => {
     it('should support bindable show prop behavior', () => {
       // Test that show can be initially false
       const { unmount } = render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       unmount();
 
       // Test that show can be initially true
       render(ModalTestWrapper, {
-        props: { show: true }
+        props: { open: true }
       });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
@@ -127,7 +127,7 @@ describe('ModalTestWrapper', () => {
     it('should not error when oncancel is not provided', () => {
       expect(() => {
         render(ModalTestWrapper, {
-          props: { show: true }
+          props: { open: true }
         });
       }).not.toThrow();
     });
@@ -136,7 +136,7 @@ describe('ModalTestWrapper', () => {
       const oncancel = vi.fn();
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           oncancel
         }
       });
@@ -149,7 +149,7 @@ describe('ModalTestWrapper', () => {
     it('should update when title changes', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           title: 'Original Title'
         }
       });
@@ -157,7 +157,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         title: 'Updated Title'
       });
 
@@ -167,7 +167,7 @@ describe('ModalTestWrapper', () => {
     it('should update when description changes', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Original Description'
         }
       });
@@ -175,7 +175,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         description: 'Updated Description'
       });
 
@@ -185,7 +185,7 @@ describe('ModalTestWrapper', () => {
     it('should update when warningText changes', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           warningText: 'Original Warning'
         }
       });
@@ -193,7 +193,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         warningText: 'Updated Warning'
       });
 
@@ -203,7 +203,7 @@ describe('ModalTestWrapper', () => {
     it('should handle adding and removing warning text', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Main text'
         }
       });
@@ -211,7 +211,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         description: 'Main text',
         warningText: 'New warning'
       });
@@ -219,7 +219,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         description: 'Main text',
         warningText: ''
       });
@@ -233,7 +233,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: '',
             description: '',
             warningText: ''
@@ -247,7 +247,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: undefined,
             description: undefined,
             warningText: undefined
@@ -260,7 +260,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             oncancel: null
           }
         });
@@ -275,7 +275,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: longTitle,
             description: longDescription,
             warningText: longWarning
@@ -292,7 +292,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: specialTitle,
             description: specialDescription
           }
@@ -305,7 +305,7 @@ describe('ModalTestWrapper', () => {
       expect(() => {
         render(ModalTestWrapper, {
           props: {
-            show: true,
+            open: true,
             title: '🎉 Success! 你好',
             description: 'Test with émojis and spëcial çharacters',
             warningText: '⚠️ Warning'
@@ -319,7 +319,7 @@ describe('ModalTestWrapper', () => {
   describe('TypeScript Interface Compliance', () => {
     it('should accept all defined Props', () => {
       const validProps = {
-        show: true,
+        open: true,
         title: 'Test',
         description: 'Description',
         warningText: 'Warning',
@@ -339,7 +339,7 @@ describe('ModalTestWrapper', () => {
 
     it('should work with only show prop', () => {
       expect(() => {
-        render(ModalTestWrapper, { props: { show: true } });
+        render(ModalTestWrapper, { props: { open: true } });
       }).not.toThrow();
     });
   });
@@ -347,17 +347,17 @@ describe('ModalTestWrapper', () => {
   describe('Integration with Modal Primitive', () => {
     it('should pass show prop to underlying Modal', () => {
       const { rerender } = render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
-      rerender({ show: true });
+      rerender({ open: true });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should render Modal with correct role', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       const dialog = screen.getByRole('dialog');
       expect(dialog).toBeInTheDocument();
       expect(dialog).toHaveAttribute('aria-modal', 'true');
@@ -368,7 +368,7 @@ describe('ModalTestWrapper', () => {
 
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           oncancel
         }
       });
@@ -380,12 +380,12 @@ describe('ModalTestWrapper', () => {
 
   describe('Accessibility', () => {
     it('should render with proper dialog role', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should have aria-modal attribute', () => {
-      render(ModalTestWrapper, { props: { show: true } });
+      render(ModalTestWrapper, { props: { open: true } });
       const dialog = screen.getByRole('dialog');
       expect(dialog).toHaveAttribute('aria-modal', 'true');
     });
@@ -394,12 +394,12 @@ describe('ModalTestWrapper', () => {
   describe('Component Lifecycle', () => {
     it('should mount without errors', () => {
       expect(() => {
-        render(ModalTestWrapper, { props: { show: true } });
+        render(ModalTestWrapper, { props: { open: true } });
       }).not.toThrow();
     });
 
     it('should unmount without errors', () => {
-      const { unmount } = render(ModalTestWrapper, { props: { show: true } });
+      const { unmount } = render(ModalTestWrapper, { props: { open: true } });
       expect(() => {
         unmount();
       }).not.toThrow();
@@ -407,7 +407,7 @@ describe('ModalTestWrapper', () => {
 
     it('should handle multiple mounts and unmounts', () => {
       for (let i = 0; i < 3; i++) {
-        const { unmount } = render(ModalTestWrapper, { props: { show: true } });
+        const { unmount } = render(ModalTestWrapper, { props: { open: true } });
         expect(screen.getByRole('dialog')).toBeInTheDocument();
         unmount();
       }
@@ -417,19 +417,19 @@ describe('ModalTestWrapper', () => {
   describe('Reactive Behavior', () => {
     it('should react to show prop changes', () => {
       const { rerender } = render(ModalTestWrapper, {
-        props: { show: false }
+        props: { open: false }
       });
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
-      rerender({ show: true });
+      rerender({ open: true });
       expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
 
     it('should maintain modal state during prop updates', () => {
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           title: 'Original'
         }
       });
@@ -437,7 +437,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         title: 'Updated',
         description: 'New description'
       });
@@ -451,7 +451,7 @@ describe('ModalTestWrapper', () => {
 
       const { rerender } = render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           oncancel: oncancel1
         }
       });
@@ -459,7 +459,7 @@ describe('ModalTestWrapper', () => {
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       rerender({
-        show: true,
+        open: true,
         oncancel: oncancel2
       });
 
@@ -471,7 +471,7 @@ describe('ModalTestWrapper', () => {
     it('should handle presence of description without warning', () => {
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Main text only'
         }
       });
@@ -481,7 +481,7 @@ describe('ModalTestWrapper', () => {
     it('should handle warning without description', () => {
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           warningText: 'Warning only'
         }
       });
@@ -491,7 +491,7 @@ describe('ModalTestWrapper', () => {
     it('should handle both description and warning', () => {
       render(ModalTestWrapper, {
         props: {
-          show: true,
+          open: true,
           description: 'Main text',
           warningText: 'Warning text'
         }

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -5,7 +5,7 @@
 
   interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -23,7 +23,7 @@
   }
 
   let {
-    show = $bindable(false),
+    open = $bindable(false),
     title = '',
     description = '',
     warningText = '',
@@ -62,4 +62,4 @@
   {/if}
 {/snippet}
 
-<Modal bind:show {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />
+<Modal bind:open {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />

package/dist/recipes/modals/ModalTestWrapper.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -17,7 +17,7 @@ interface Props {
     /** Footer content */
     footer?: Snippet;
 }
-declare const ModalTestWrapper: import("svelte").Component<Props, {}, "show">;
+declare const ModalTestWrapper: import("svelte").Component<Props, {}, "open">;
 type ModalTestWrapper = ReturnType<typeof ModalTestWrapper>;
 export default ModalTestWrapper;
 //# sourceMappingURL=ModalTestWrapper.svelte.d.ts.map

package/dist/recipes/modals/StatusModal.spec.js

@@ -7,7 +7,7 @@ function setupTest(args = {}) {
   const user = userEvent.setup();
   const { component } = render(StatusModal, {
     props: {
-      show: true,
+      open: true,
       title: "Test Status",
       description: "This is a test description",
       ...args,
@@ -27,7 +27,7 @@ describe("StatusModal Component Tests", () => {
 
   describe("Basic Rendering", () => {
     test("Does not render when show is false", () => {
-      render(StatusModal, { props: { show: false } });
+      render(StatusModal, { props: { open: false } });
       expect(screen.queryByText("Test Status")).not.toBeInTheDocument();
     });