docs: do not open modals initially

Open modals can steal the document focus.

docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte

@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
   import Send from "carbon-icons-svelte/lib/Send.svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
-  open
+  bind:open
   modalHeading="Invite someone"
   primaryButtonText="Send invitation"
   primaryButtonIcon="{Send}"

docs/src/pages/framed/Modal/ModalExtraSmall.svelte

@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="xs"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"

docs/src/pages/framed/Modal/ModalLarge.svelte

@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="lg"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"

docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte

@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   preventCloseOnClickOutside
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"

docs/src/pages/framed/Modal/ModalScrollingContent.svelte

@@ -1,8 +1,12 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
-<Modal open passiveModal modalHeading="About Cloudant" hasScrollingContent>
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal bind:open passiveModal modalHeading="About Cloudant" hasScrollingContent>
   <p>
     Cloudant is a fully managed, distributed database optimized for heavy
     workloads and fast-growing web and mobile apps, IBM Cloudant is available as

docs/src/pages/framed/Modal/ModalSmall.svelte

@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="sm"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"