docs: update components example readme

packages/docs/components/Autocomplete.md

@@ -2,9 +2,9 @@
 
 <div class="vp-doc">
 
-The **autocomplete** input component allows you to search through a list of options.
+The **Autocomplete** input component allows you to search through a list of options.
 It is an advanced input that provides suggestions as the user types.
-Based on the dropdown component, the autocomplete component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+Based on the Dropdown component, the Autocomplete component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
 
 </div>
 

packages/docs/components/Button.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **button** component uses [HTML's native button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) by default.
+The **Button** component uses [HTML's native button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) by default.
 The `label` prop is used to populate the text of the button — or alternatively you can use the default slot.
 The button can be have different colors, sizes, and states.
 The component supports the W3C ARIA APG [Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).

packages/docs/components/Carousel.md

@@ -6,7 +6,7 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-A slideshow component for cycling through elements — images or slides of text—like a carousel.
+The **Carousel** component is a slideshow for cycling through elements — images or slides of text—like a carousel.
 
 </div>
 

packages/docs/components/Checkbox.md

@@ -2,10 +2,11 @@
 
 <div class="vp-doc">
 
-The checkbox input uses [HTML's native checkbox input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox).
+The **Checkbox** input component uses [HTML's native checkbox input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox).
 It can display one or many options to a user and is a great way to allow users to select multiple items from a list.
 The component supports single and multiple checkbox inputs.
 The component supports the W3C ARIA APG [Checkbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/docs/components/Collapse.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-An easy way to toggle the visibility of content.
+The **Collapse** component is an easy way to toggle the visibility of content.
 
 </div>
 

packages/docs/components/Datepicker.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **datepicker** input component allow users to select a date from a customizable calendar, and type the date directly into the input with full internationalization support.
+The **Datepicker** input component allow users to select a date from a customizable calendar, and type the date directly into the input with full internationalization support.
 The input opens a simple dropdown/modal for selecting a date, and uses the native datepicker for mobile.
 
 </div>

packages/docs/components/Datetimepicker.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **datetimepicker** input component allow users to select a date and time based on their browser’s locale from a customizable calendar, and type the date directly into the input with full internationalization support.
+The **Datetimepicker** input component allow users to select a date and time based on their browser’s locale from a customizable calendar, and type the date directly into the input with full internationalization support.
 The input opens a simple dropdown/modal for selecting a date, and uses the native datetimepicker for mobile.
 The component is based on the Datepicker component.
 

packages/docs/components/Dropdown.md

@@ -6,7 +6,7 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-The **dropdown** is very versatile and can be used as contextual overlays for displaying lists as a quick menu or even toggleable to allow users to select a value from a list of content options.
+The **Dropdown** component is very versatile and can be used as contextual overlays for displaying lists as a quick menu or even toggleable to allow users to select a value from a list of content options.
 Unlike native select elements, the dropdown input allows you to customize both its appearance and behavior.
 The component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
 

packages/docs/components/Field.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-Fields are used to add functionality to controls and to attach/group components and elements together.
+The **Field** component is used to add functionality to controls and to attach/group components and elements together.
 
 </div>
 

packages/docs/components/Icon.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-Icons take an important role of any application.
+The **Icon** component helps to display icons the right way. Icons are an important part of any application.
 Oruga is compatible with both [Material Design Icons](https://materialdesignicons.com/) and [FontAwesome 5](https://fontawesome.com/) but you can also add your own custom icon pack.
 
 </div>

packages/docs/components/Input.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **input** component uses [HTML's native text input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text).
+The **Input** component uses [HTML's native text input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text).
 It allows a user to enter a single line of text.
 Combine it with the Field component to access all functionalities.
 

packages/docs/components/Loading.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **loading** component allows you to display a loading state for use on a global state or a specific element.
+The **Loading** component allows you to display a loading state for use on a global state or a specific element.
 
 </div>
 

packages/docs/components/Menu.md

@@ -6,7 +6,7 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-The **menu** component displays a hierarchical list for any type of vertical navigation, where the items can be expanded or collapsed.
+The **Menu** component displays a hierarchical list for any type of vertical navigation, where the items can be expanded or collapsed.
 The component implements the W3C ARIA APG [Tree View Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
 
 </div>

packages/docs/components/Modal.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-A classic modal overlay, in which you can include any content you want.
+The **Modal** component is classic modal overlay, in which you can include any content you want.
 
 </div>
 

packages/docs/components/Notification.md

@@ -6,7 +6,7 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-The **notification** component is a lightweight and easily customizable alert message.
+The **Notification** component is a lightweight and easily customizable alert message.
 It is designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
 
 </div>

packages/docs/components/Pagination.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-A responsive and flexible pagination to indicate a series of related content exists across multiple pages.
+The **Pagination** component ia responsive and flexible way to indicate a series of related content exists across multiple pages.
 
 </div>
 

packages/docs/components/Radio.md

@@ -2,8 +2,9 @@
 
 <div class="vp-doc">
 
-The **radio** component uses [HTML's native radio inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) to allow a user to select one value from a set of options.
+The **Radio** input component uses [HTML's native radio inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) to allow a user to select one value from a set of options.
 The component supports the W3C ARIA APG [Radio Group Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/docs/components/Select.md

@@ -2,9 +2,9 @@
 
 <div class="vp-doc">
 
-The **select** component uses [HTML's native select input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
+The **Select** input component uses [HTML's native select input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
 Select inputs can be single value selections, or multi-value selections by using the `multiple` attribute.
-Use it with the Field to access all the functionalities.
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/docs/components/Sidebar.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **sidebar** component can be toggled to appear from the left, right, top, or bottom edge of the viewport.
+The **Sidebar** component can be toggled to appear from the left, right, top, or bottom edge of the viewport.
 The component can be used to show an overlay for navigation, shopping carts, and more.
 
 </div>

packages/docs/components/Skeleton.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-A placeholder for content to load.
+The **Skeleton** component is a placeholder for content to load.
 
 </div>
 

packages/docs/components/Slider.md

@@ -6,8 +6,9 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-The **slider** component let user select a value or range from a given range with a graphic slider.
+The **Slider** input component let user select a value or range from a given range with a graphic slider.
 The component implements the W3C ARIA APG [Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/docs/components/Steps.md

@@ -6,7 +6,7 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-The **steps** component allows you to create a wizard or easily break your process steps into multiple steps.
+The **Steps** component allows you to create a wizard or easily break your process steps into multiple steps.
 Breaking things down into multiple steps can improve the user experience by keeping them small and accessible compared to listing them all at once.
 
 </div>

packages/docs/components/Switch.md

@@ -2,9 +2,10 @@
 
 <div class="vp-doc">
 
-The **switch** input — sometimes called a "toggle" — offers a choice between one of two values;
+The **Switch** input component — sometimes called a "toggle" — offers a choice between one of two values;
 it's a great option when you want the user to toggle a feature on or off.
 This component implements the W3C ARIA APG [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/docs/components/Table.md

@@ -6,7 +6,7 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-The **table** component uses [HTML's native table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).
+The **Table** component uses [HTML's native table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).
 It allows tabular data to be displayed in a responsive way with special case cells.
 
 </div>

packages/docs/components/Tabs.md

@@ -6,7 +6,7 @@ sidebarDepth: 2
 
 <div class="vp-doc">
 
-The **tabs** component is a responsive horizontal navigation bar that allows the user to easily switch between content.
+The **Tabs** component is a responsive horizontal navigation bar that allows the user to easily switch between content.
 *Tab panels*are a set of individual content sections, where only one content panel can be displayed at a time.
 Each tab panel has an associated tab element that, when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, the top edge.
 The component implements the W3C ARIA APG [Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

packages/docs/components/Taginput.md

@@ -2,8 +2,9 @@
 
 <div class="vp-doc">
 
-The **taginput** component allows users to search through a list of options and apply any number of tags.
-The component is based on the autocomplete component and supports the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+The **Taginput** input component allows users to search through a list of options and apply any number of tags.
+The component is based on the Autocomplete component and supports the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/docs/components/Timepicker.md

@@ -2,9 +2,10 @@
 
 <div class="vp-doc">
 
-The **timepicker** input component allow users to select a time, and type the date directly into the input.
+The **Timepicker** input component allow users to select a time, and type the date directly into the input.
 The input opens a simple dropdown/modal for selecting a time, and uses the native timepicker for mobile.
 The component is based on the Select component.
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/docs/components/Tooltip.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **tooltip** component displays a short contextual help text when the user hovers over it.
+The **Tooltip** component displays a short contextual help text when the user hovers over it.
 The component implements the W3C ARIA APG [Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
 
 </div>

packages/docs/components/Upload.md

@@ -2,7 +2,8 @@
 
 <div class="vp-doc">
 
-The **upload** component uses [HTML's native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). It allows users to select files from their device for upload. In addition to native input features, it adds support for Drag and drop and clearing the input.
+The **Upload** input component uses [HTML's native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). It allows users to select files from their device for upload. In addition to native input features, it adds support for Drag and drop and clearing the input.
+Use it with the Field component to access all the functionalities.
 
 </div>
 

packages/oruga/src/components/autocomplete/examples/readme.md

@@ -1,3 +1,3 @@
-The **autocomplete** input component allows you to search through a list of options.
+The **Autocomplete** input component allows you to search through a list of options.
 It is an advanced input that provides suggestions as the user types.
-Based on the dropdown component, the autocomplete component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+Based on the Dropdown component, the Autocomplete component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).

packages/oruga/src/components/button/examples/readme.md

@@ -1,4 +1,4 @@
-The **button** component uses [HTML's native button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) by default.
+The **Button** component uses [HTML's native button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) by default.
 The `label` prop is used to populate the text of the button — or alternatively you can use the default slot.
 The button can be have different colors, sizes, and states.
 The component supports the W3C ARIA APG [Button   Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).

packages/oruga/src/components/carousel/examples/readme.md

@@ -1 +1 @@
-A slideshow component for cycling through elements — images or slides of text—like a carousel.
+The **Carousel** component is a slideshow for cycling through elements — images or slides of text—like a carousel.

packages/oruga/src/components/checkbox/examples/readme.md

@@ -1,4 +1,5 @@
-The checkbox input uses [HTML's native checkbox input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox). 
+The **Checkbox** input component uses [HTML's native checkbox input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox). 
 It can display one or many options to a user and is a great way to allow users to select multiple items from a list.
 The component supports single and multiple checkbox inputs.
-The component supports the W3C ARIA APG [Checkbox  Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
+The component supports the W3C ARIA APG [Checkbox  Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
+Use it with the Field component to access all the functionalities.

packages/oruga/src/components/collapse/examples/readme.md

@@ -1 +1 @@
-An easy way to toggle the visibility of content.
+The **Collapse** component is an easy way to toggle the visibility of content.

packages/oruga/src/components/datepicker/examples/readme.md

@@ -1,2 +1,2 @@
-The **datepicker** input component allow users to select a date from a customizable calendar, and type the date directly into the input with full internationalization support.
+The **Datepicker** input component allow users to select a date from a customizable calendar, and type the date directly into the input with full internationalization support.
 The input opens a simple dropdown/modal for selecting a date, and uses the native datepicker for mobile.

packages/oruga/src/components/datetimepicker/examples/readme.md

@@ -1,3 +1,3 @@
-The **datetimepicker** input component allow users to select a date and time based on their browser’s locale from a customizable calendar, and type the date directly into the input with full internationalization support.
+The **Datetimepicker** input component allow users to select a date and time based on their browser’s locale from a customizable calendar, and type the date directly into the input with full internationalization support.
 The input opens a simple dropdown/modal for selecting a date, and uses the native datetimepicker for mobile.
 The component is based on the Datepicker component.

packages/oruga/src/components/dropdown/examples/readme.md

@@ -1,3 +1,3 @@
-The **dropdown** is very versatile and can be used as contextual overlays for displaying lists as a quick menu or even toggleable to allow users to select a value from a list of content options.
+The **Dropdown** component is very versatile and can be used as contextual overlays for displaying lists as a quick menu or even toggleable to allow users to select a value from a list of content options.
 Unlike native select elements, the dropdown input allows you to customize both its appearance and behavior.
 The component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).

packages/oruga/src/components/field/examples/readme.md

@@ -1 +1 @@
-Fields are used to add functionality to controls and to attach/group components and elements together.
+The **Field** component is used to add functionality to controls and to attach/group components and elements together.

packages/oruga/src/components/icon/examples/readme.md

@@ -1,2 +1,2 @@
-Icons take an important role of any application.
+The **Icon** component helps to display icons the right way. Icons are an important part of any application.
 Oruga is compatible with both [Material Design Icons](https://materialdesignicons.com/) and [FontAwesome 5](https://fontawesome.com/) but you can also add your own custom icon pack.

packages/oruga/src/components/input/examples/readme.md

@@ -1,3 +1,3 @@
-The **input** component uses [HTML's native text input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text). 
+The **Input** component uses [HTML's native text input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text). 
 It allows a user to enter a single line of text.
 Combine it with the Field component to access all functionalities.

packages/oruga/src/components/loading/examples/readme.md

@@ -1 +1 @@
-The **loading** component allows you to display a loading state for use on a global state or a specific element. 
+The **Loading** component allows you to display a loading state for use on a global state or a specific element. 

packages/oruga/src/components/menu/examples/readme.md

@@ -1,2 +1,2 @@
-The **menu** component displays a hierarchical list for any type of vertical navigation, where the items can be expanded or collapsed.
+The **Menu** component displays a hierarchical list for any type of vertical navigation, where the items can be expanded or collapsed.
 The component implements the W3C ARIA APG [Tree View Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).

packages/oruga/src/components/modal/examples/readme.md

@@ -1 +1 @@
-A classic modal overlay, in which you can include any content you want.
+The **Modal** component is classic modal overlay, in which you can include any content you want.

packages/oruga/src/components/notification/examples/readme.md

@@ -1,2 +1,2 @@
-The **notification** component is a lightweight and easily customizable alert message. 
+The **Notification** component is a lightweight and easily customizable alert message. 
 It is designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. 

packages/oruga/src/components/pagination/examples/readme.md

@@ -1 +1 @@
-A responsive and flexible pagination to indicate a series of related content exists across multiple pages.
+The **Pagination** component ia responsive and flexible way to indicate a series of related content exists across multiple pages.