docs(modal): add "Custom focus" example

docs/src/pages/components/Modal.svx

@@ -6,6 +6,14 @@
 
 <FileSource src="/framed/Modal/Modal" />
 
+### Custom focus
+
+By default, the modal close button will be focused when opened.
+
+Use the `selectorPrimaryFocus` to specify the element that should be focused when the modal is opened (e.g., `#id`, `.class`, `[data-attribute]`).
+
+<FileSource src="/framed/Modal/ModalCustomFocus" />
+
 ### Danger modal
 
 <FileSource src="/framed/Modal/DangerModal" />

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

@@ -0,0 +1,27 @@
+<script>
+  import { Button, Modal, TextInput } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  selectorPrimaryFocus="#db-name"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+  <br />
+  <TextInput
+    id="db-name"
+    labelText="Database name"
+    placeholder="Enter database name..."
+  />
+</Modal>