docs: correct minor grammar and insensitive writing

Author: carwack

website/pages/accessibility.mdx

@@ -5,7 +5,7 @@ heavy-lifting for you in order to allow you to focus on building your applicatio
 
 All authored components are compliant with the WAI-ARIA standards for authored components.
 
-We've taken the time to write summarized description of the accessibility support for
+We've taken the time to write a summarized description of the accessibility support for
 all authored components in @chakra-ui/vue. We called this document an accessibility report
 and can be found in the `accessibility.md` file in the respective component's source directory.
 

website/pages/accordion.mdx

@@ -35,7 +35,7 @@ import {
 
 ## Usage
 
-By default, only one accordion item may be expanded. It can only be collapsed again by expanding another accordion item.
+By default, only one accordion-item may be expanded. It can only be collapsed again by expanding another accordion item.
 
 ```vue live=true
   <c-accordion>
@@ -203,7 +203,7 @@ In the example below, we change the icon rendered by the `CAccordionIcon` based
 ```
 
 ### Accessibility
-Pressing **`space`** or **`enter`** when focus is on the `CAccordionHeader` will toggle (expand or collapse) the accordion item.
+Pressing **`space`** or **`enter`** when the focus is on the `CAccordionHeader` will toggle (expand or collapse) the accordion item.
 
 # Props
 ## `CAccordion`
@@ -212,7 +212,7 @@ Pressing **`space`** or **`enter`** when focus is on the `CAccordionHeader` will
 | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
 | allowMultiple | `boolean`                         | `false` | If `true`, multiple accordion items can be expanded at once.                                              |
 | allowToggle   | `boolean`                         | `false` | If `true`, any expanded accordion item can be collapsed again.                                            |
-| index         | `Number` or `Array of Number`     |    0    | The index(es) of the expanded accordion item                                                              |
+| index         | `Number` or `Array of Number`     |    0    | The index(es) of the expanded accordion-item                                                              |
 | defaultIndex  | `Number` or `Array of Number`     |         | The initial index(es) of the expanded accordion item                                                      |
 
 ### Events
@@ -254,7 +254,7 @@ Pressing **`space`** or **`enter`** when focus is on the `CAccordionHeader` will
 
 ### Props
 `CAccordionHeader` renders a `button` and composes `CPseudoBox`, this means you can
-style it by passing the pseudo style props `_expanded`, `_disabled`, `_hover`,
+style it bypassing the pseudo style props `_expanded`, `_disabled`, `_hover`,
 etc.
 
 ## `CAccordionPanel`

website/pages/alert.mdx

@@ -2,18 +2,18 @@ import SEO from '../components/SEO'
 
 <SEO
   title="Alert"
-  description="Alerts are used to communicate a state that affects a system, feature or page."
+  description="Alerts are used to communicate a state that affects a system, feature, or page."
 />
 
 # Alert
 
-Alerts are used to communicate a state that affects a system, feature or page.
+Alerts are used to communicate a state that affects a system, feature, or page.
 
 See `CAlert`'s <a href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CAlert/accessibility.md">accessibility report</a>
 
 ## Import
 
-Chakra UI Vue exports 4 Alert related components.
+Chakra UI Vue exports four Alert-related components.
 
 - `CAlert`: The wrapper for alert components.
 - `CAlertIcon`: The visual icon for the alert that changes based on the `status` prop.
@@ -87,7 +87,7 @@ You can also use custom Alert icons by passing the name of the icon in the `name
 
 ### Variant
 
-The `CAlert` component has 4 variant styles you can use. Pass the `variant` prop and use either
+The `CAlert` component has four variant styles you can use. Pass the `variant` prop and use either
 `subtle`, `solid`, `left-accent` or `top-accent`.
 
 ```vue live=true
@@ -113,8 +113,8 @@ The `CAlert` component has 4 variant styles you can use. Pass the `variant` prop
 
 ### Composition
 
-`CAlert` ships with other smaller components to allow for flexibility and make it easy to
-create all kinds of layout. Here's an example of a custom alert style and layout.
+`CAlert` ships with other smaller components to allow for flexibility and make it possible to
+create all kinds of layouts. Here's an example of a custom alert style and layout.
 
 ```vue live=true
 <c-alert

website/pages/alertdialog.mdx

@@ -14,7 +14,7 @@ See `CAlertDialog`'s <a href="https://github.com/chakra-ui/chakra-ui-vue/blob/ma
 
 ## Import
 
-Chakra UI exports 7 alert dialog related components.
+Chakra UI exports seven alert dialog-related components.
 
 - `CAlertDialog`: provides context and state for the dialog.
 - `CAlertDialogHeader`: should contain the title announced by screen readers.
@@ -45,7 +45,7 @@ Vue ref to a focusable element or component in your alert dialog. The `leastDest
 a function that returns a ref.
 
 Based on [WAI-ARIA specifications for alert dialogs](https://www.w3.org/TR/wai-aria-practices/#alertdialog)
-when the dialog opens, focus should be placed on the least destructive element
+when the dialog opens, the focus should be placed on the least destructive element
 to prevent users from accidentally confirming the destructive action.
 
 ```vue live=true
@@ -101,18 +101,18 @@ export default {
 ## Accessibility
 
 - `CAlertDialog` has role `alertdialog`, and `aria-modal` set to true.
-- When the dialog opens, focus is automatically set to the least destructive
+- When the dialog opens, the focus is automatically set to the least destructive
   element.
 - When the dialog opens, the content in the `CAlertDialogHeader` and
-  `CAlertDialogBody` are announced by screen readers via `aria-labelledby` and
+  `CAlertDialogBody` is announced by screen readers via `aria-labelledby` and
   `aria-describedby` attributes.
 - Clicking on the overlay closes the `CAlertDialog`.
 - Pressing <kbd>esc</kbd> closes the dialog.
 
 
 ## Props
 
-AlertDialog and it's components composes the `CModal` component, the only
+AlertDialog and its components composes the `CModal` component, the only
 exception is that it requires a `leastDestructiveRef` which is similar to the
 `initialFocusRef` in `CModal`
 

website/pages/auto-import-components.mdx

@@ -9,7 +9,7 @@ import SEO from '../components/SEO'
 We know that it can be cumbersome to import every single Chakra component you want to use in your Vue templates. Chakra UI offers webpack plugin solution that allows
 you to directly consume Chakra UI Vue components without manually importing and globally registering all Chakra components.
 
-This provides a better developer experience without sacrificing your applications bundle-size performance.
+This provides a better developer experience without sacrificing your application's bundle-size performance.
 
 
 ## Installation
@@ -103,7 +103,7 @@ export default {
 
 
 ## How it works
-`ChakraLoaderPlugin` will analyse your SFC template at during development and at build time, and scan it for all Chakra UI Vue components that you consume in it. The loader will then proceed to automatically import those components and register them while preserving treeshaking.
+`ChakraLoaderPlugin` will analyse your SFC template during development and at build time, and scan it for all Chakra UI Vue components that you consume in it. The loader will then proceed to automatically import those components and register them while preserving treeshaking.
 
 For example, consider the component below, `Component.vue` which uses Chakra's `CBox` and `CButton` components.
 ```vue

website/pages/avatar.mdx

@@ -11,7 +11,7 @@ The `CAvatar` component is used to visually represent a user by displaying their
 
 ## Import
 
-Chakra UI Vue exports 3 Avatar related components.
+Chakra UI Vue exports three Avatar-related components.
 
 - `CAvatar`: The image that represents the user.
 - `CAvatarBadge`: A widget that displays the status of a user on the bottom-right corner of the `CAvatar`.
@@ -129,7 +129,7 @@ component to do this
 | size       | `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`  | `md`    | The size of the avatar                                                            |
 | showBorder | `boolean`                                  | `false` | If `true`, the `CAvatar` will show a border around it. Best for a group of avatars |
 | name       | `string`                                   |         | The name of the user in the avatar                                                |
-| src        | `string`                                   |         | The image url of the `CAvatar`                                                     |
+| src        | `string`                                   |         | The image URL of the `CAvatar`                                                     |
 
 > - `CAvatar` composes the `CBox` component. So it also accepts
 > all `CBox` props.

website/pages/badge.mdx

@@ -40,7 +40,7 @@ object.
 
 ### Badge Variants
 
-Pass the `variant` prop and set to either `subtle`, `solid`, or `outline` to get a
+Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to get a
 different style.
 
 ```vue live=true
@@ -68,7 +68,7 @@ different style.
 
 <br />
 
-You can also change the size of the badge by passing `fontSize` prop.
+You can also change the size of the badge bypassing `fontSize` prop.
 
 ```vue live=true
 <c-text font-weight="bold">

website/pages/box.mdx

@@ -12,7 +12,7 @@ import SEO from '../components/SEO'
 
 <br />
 
-**The `CBox` component is useful because it helps with 3 common use cases:**
+**The `CBox` component is useful because it helps with three common use cases:**
 - Creation of responsive layouts with ease.
 - Provides a shorthand way to pass styles via props (`bg` instead of `backgroundColor`).
 - Composition of new components by providing for overrides by using the `as` prop.
@@ -106,7 +106,7 @@ import { CBox } from '@chakra-ui/vue';
 
 ### `as` prop
 
-You can use the `as` prop to change the element render, just like the `tag` prop on Vue's global dynamic component.
+You can use the `as` prop to change the element render, like the `tag` prop on Vue's global dynamic component.
 
 ```vue live=true
 <c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">

website/pages/breadcrumb.mdx

@@ -2,13 +2,13 @@ import SEO from '../components/SEO'
 
 <SEO
   title="Breadcrumb"
-  description="Breadcrumbs, or a breadcrumb navigation, can help to enhance how users navigate to previous page levels of a website, especially if that website has many pages or products."
+  description="Breadcrumbs, or breadcrumb navigation, can help to enhance how users navigate to previous page levels of a website, especially if that website has many pages or products."
 />
 
 
 # Breadcrumb
 
-Breadcrumbs, or a breadcrumb navigation, can help to enhance how users navigate
+Breadcrumbs, or breadcrumb navigation, can help to enhance how users navigate
 to previous page levels of a website, especially if that website has many pages
 or products.
 
@@ -17,11 +17,11 @@ or products.
 See `CBreadcrumb`'s [accessibility report](https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CBreadcrumb/accessibility.md)
 
 ## Import 
-Chakra UI exports 4 Breadcrumb related components:
+Chakra UI exports four Breadcrumb related components:
 
 - `CBreadcrumb`: The parent container for breadcrumbs.
 - `CBreadcrumbItem`: Individual breadcrumb element containing a link and a divider.
-- `CBreadcrumbLink`: The breadcrumb link, obviously.
+- `CBreadcrumbLink`: The breadcrumb link.
 - `CBreadcrumbSeparator`: The visual separator between each breadcrumb
 
 <br />
@@ -84,7 +84,7 @@ on the `CBreadcrumb` to `false`, and manually add the `CBreadcrumbSeparator` as
 `CBreadcrumbItem`.
 
 You can then pass style props to change the styling of the `CBreadcrumbSeparator`. You can also override
-the content of the `CBreadcrumbSeparator` by passing its default slot.
+the content of the `CBreadcrumbSeparator` bypassing its default slot.
 
 ```vue live=true
 <c-breadcrumb :add-separator="false">
@@ -131,7 +131,7 @@ breadcrumbs.
 To use the `CBreadcrumb` with a routing Library like [Vue Router](https://router.vuejs.org),
 all you need to do is to pass the `as` prop to the `CBreadcrumbLink` component.
 
-It'll replace the rendered `a` tag with with `router-link` or `nuxt-link`.
+It will replace the rendered `a` tag with `router-link` or `nuxt-link`.
 
 ```vue live=true
 <c-breadcrumb separator="›">
@@ -152,7 +152,7 @@ It'll replace the rendered `a` tag with with `router-link` or `nuxt-link`.
 - The `CBreadcrumb` `nav` has `aria-label` set to `breadcrumb`.
 - The `CBreadcrumbItem` with `isCurrentPage` prop adds the `aria-current=page` to
   the `CBreadcrumbLink`.
-- The separator has `role` set to `presentation` to denote that its for
+- The separator has `role` set to `presentation` to denote that it's for
   presentation purposes.
 
 

website/pages/button.mdx

@@ -85,7 +85,7 @@ You can add left and right icons to the Button component. See how to [add icons]
 
 ### Button loading state
 
-Pass `isLoading` prop to the Button component to show it's loading state. You can optionally pass `loadingText` prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner.
+Pass `isLoading` prop to the Button component to show its loading state. You can optionally pass `loadingText` prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner.
 
 ```vue live=true
 <c-button-group :spacing="4">
@@ -106,7 +106,7 @@ Pass `isLoading` prop to the Button component to show it's loading state. You ca
 ### Accessibility
 
 - `CButton` has `role` button.
-- When `CButton` has focus, `space` and `enter` activates it.
+- When `CButton` has focus, `space` and `enter` activate it.
 
 ### Composition
 
@@ -123,7 +123,7 @@ Pass `isLoading` prop to the Button component to show it's loading state. You ca
 
 ### Custom Button
 
-In event you need to make your own custom button, you can leverage the `PseudoBox` component. It provides the `hover`, `focus`, `active` and `disabled` style props to style the button.
+In the event you need to make your own custom button, you can leverage the `PseudoBox` component. It provides the `hover`, `focus`, `active` and `disabled` style props to style the button.
 
 ```vue live=true
 <c-pseudo-box
@@ -147,7 +147,7 @@ In event you need to make your own custom button, you can leverage the `PseudoBo
 
 ## Props
 
-The Button composes the `CPseudoBox` component so you can pass props for `CPseudoBox`. These are props related to the Button component.
+The button composes the `CPseudoBox` component so you can pass props for `CPseudoBox`. These are props related to the Button component.
 
 | Name                  | Type                                            | Default | Description                                                                                             |
 | --------------------- | ------------------------------------------------| --------| ------------------------------------------------------------------------------------------------------- |