docs: add new component docs

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

@@ -0,0 +1,19 @@
+<script>
+  import {
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Checkbox,
+  } from "carbon-components-svelte";
+
+  let checked = false;
+</script>
+
+<ComposedModal open>
+  <ModalHeader title="Confirm changes" />
+  <ModalBody hasForm>
+    <Checkbox labelText="I have reviewed the changes" bind:checked />
+  </ModalBody>
+  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
+</ComposedModal>

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

@@ -0,0 +1,21 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
+
+<Modal
+  danger
+  bind:open
+  modalHeading="Delete all instances"
+  primaryButtonText="Delete"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>This is a permanent action and cannot be undone.</p>
+</Modal>

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

@@ -0,0 +1,20 @@
+<script>
+  import { Button, Modal } 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"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

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

@@ -0,0 +1,17 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="xs"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

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

@@ -0,0 +1,17 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="lg"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

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

@@ -0,0 +1,17 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  preventCloseOnClickOutside
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

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

@@ -0,0 +1,17 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="sm"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

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

@@ -0,0 +1,14 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button>
+
+<Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
+  <p>
+    IBM Cloudant is a distributed, secure database with global availability and
+    zero vendor lock-in used to build web and mobile apps at scale.
+  </p>
+</Modal>