Merge pull request #6319 from jacobtylerwalls/fix-typos

Fix various typos

apps/showcase/doc/iconfield/AccessibilityDoc.vue

@@ -1,7 +1,7 @@
 <template>
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
-        <p>IconField and InputIcon does not require any roles and attributes.</p>
+        <p>IconField and InputIcon do not require any roles and attributes.</p>
 
         <h3>Keyboard Support</h3>
         <p>Components does not include any interactive elements.</p>

apps/showcase/doc/inputgroup/AccessibilityDoc.vue

@@ -1,7 +1,7 @@
 <template>
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
-        <p>InputGroup and InputGroupAddon does not require any roles and attributes.</p>
+        <p>InputGroup and InputGroupAddon do not require any roles and attributes.</p>
 
         <h3>Keyboard Support</h3>
         <p>Component does not include any interactive elements.</p>

apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue

@@ -4,11 +4,11 @@
             The <i>@layer</i> is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
             <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" class="doc-link">MDN</a> to begin with. In styled mode, when the <i>cssLayer</i> option is enabled at theme configuration, PrimeVue wraps the built-in style classes under
             the <i>primevue</i> cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is
-            written. The <i>cssLayer</i> is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
+            written. The <i>cssLayer</i> is disabled by default to avoid compatibility issues with 3rd party CSS libraries which require a layer configuration for compatibility that is discussed in the next reset section.
         </p>
         <p>
             For example, let's assume you need to remove the rounded borders of the ToggleSwitch component defined by the theme in use. In order to achieve this, <i>.p-toggleswitch .p-toggleswitch-slider</i> selector needs to be overriden. Without
-            the layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
+            the layers, we'd have to write a stronger css or use <i>!important</i>, however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
             Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
         </p>
         <div class="card flex justify-center">

apps/showcase/doc/theming/styled/customization/ComponentDoc.vue

@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead. This
+            The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building your own style, building your own preset should be preferred instead. This
             configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example.
         </p>
     </DocSectionText>

apps/showcase/doc/tree/selection/CheckboxDoc.vue

@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
         <p>
-            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node obje to indicate
+            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
             selection.
         </p>
     </DocSectionText>

apps/showcase/doc/treeselect/CheckboxDoc.vue

@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
         <p>
-            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node obje to indicate
+            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
             selection.
         </p>
     </DocSectionText>

apps/showcase/pages/configuration/index.vue

@@ -7,7 +7,7 @@
         <div class="doc-main">
             <div class="doc-intro">
                 <h1>Configuration</h1>
-                <p>Application widge configuration for PrimeVue.</p>
+                <p>Application widget configuration for PrimeVue.</p>
             </div>
             <DocSections :docs="docs" />
         </div>

apps/showcase/pages/templates/atlantis/index.vue

@@ -74,7 +74,7 @@ export default {
                                 {
                                     id: 2,
                                     title: 'Component Themes',
-                                    description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
+                                    description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create your own theme by defining couple SASS variables.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-component-themes.png'
                                 },
                                 {

apps/showcase/pages/templates/verona/index.vue

@@ -75,7 +75,7 @@ export default {
                                 {
                                     id: 2,
                                     title: 'Component Themes',
-                                    description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
+                                    description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create your own theme by defining couple SASS variables.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-component-themes.png'
                                 },
                                 {