From ffd361f4ee68e61e9cd6b7c5af15f166af037bfc Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Fri, 30 Aug 2024 17:40:44 -0400
Subject: [PATCH] Fix various typos

---
 apps/showcase/doc/iconfield/AccessibilityDoc.vue              | 2 +-
 apps/showcase/doc/inputgroup/AccessibilityDoc.vue             | 2 +-
 apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue  | 4 ++--
 .../doc/theming/styled/customization/ComponentDoc.vue         | 2 +-
 apps/showcase/doc/tree/selection/CheckboxDoc.vue              | 2 +-
 apps/showcase/doc/treeselect/CheckboxDoc.vue                  | 2 +-
 apps/showcase/pages/configuration/index.vue                   | 2 +-
 apps/showcase/pages/templates/atlantis/index.vue              | 2 +-
 apps/showcase/pages/templates/verona/index.vue                | 2 +-
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/showcase/doc/iconfield/AccessibilityDoc.vue b/apps/showcase/doc/iconfield/AccessibilityDoc.vue
index ec124bf96..59e583a38 100644
--- a/apps/showcase/doc/iconfield/AccessibilityDoc.vue
+++ b/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>
diff --git a/apps/showcase/doc/inputgroup/AccessibilityDoc.vue b/apps/showcase/doc/inputgroup/AccessibilityDoc.vue
index 90d4e289c..a9a17185d 100644
--- a/apps/showcase/doc/inputgroup/AccessibilityDoc.vue
+++ b/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>
diff --git a/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue b/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
index 43152ba13..16a58c474 100644
--- a/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
+++ b/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">
diff --git a/apps/showcase/doc/theming/styled/customization/ComponentDoc.vue b/apps/showcase/doc/theming/styled/customization/ComponentDoc.vue
index e3933913b..9d92d7c36 100644
--- a/apps/showcase/doc/theming/styled/customization/ComponentDoc.vue
+++ b/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>
diff --git a/apps/showcase/doc/tree/selection/CheckboxDoc.vue b/apps/showcase/doc/tree/selection/CheckboxDoc.vue
index 2467abd00..abe31e97a 100644
--- a/apps/showcase/doc/tree/selection/CheckboxDoc.vue
+++ b/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>
diff --git a/apps/showcase/doc/treeselect/CheckboxDoc.vue b/apps/showcase/doc/treeselect/CheckboxDoc.vue
index cc6582f61..425f963d1 100644
--- a/apps/showcase/doc/treeselect/CheckboxDoc.vue
+++ b/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>
diff --git a/apps/showcase/pages/configuration/index.vue b/apps/showcase/pages/configuration/index.vue
index 94bcb6412..6eb639695 100644
--- a/apps/showcase/pages/configuration/index.vue
+++ b/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>
diff --git a/apps/showcase/pages/templates/atlantis/index.vue b/apps/showcase/pages/templates/atlantis/index.vue
index b3bde1896..071cae8de 100644
--- a/apps/showcase/pages/templates/atlantis/index.vue
+++ b/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'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/verona/index.vue b/apps/showcase/pages/templates/verona/index.vue
index 5067096f7..a8c26c429 100644
--- a/apps/showcase/pages/templates/verona/index.vue
+++ b/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'
                                 },
                                 {