Merge pull request #2531 from hashicorp/alex-ju/fix-typos

Fix few typos in docs

Author: alex-ju

website/docs/components/app-header/partials/specifications/anatomy.md

@@ -9,7 +9,7 @@
 | **Global**       |                                           |
 | Home link        | Required; supports multiple product logos |
 | Context switcher | Optional                                  |
-| **Utilies**      |                                           |
+| **Utilities**    |                                           |
 | Help dropdown    | Optional, but highly recommend ([WCAG guidelines](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html))     |
 | User dropdown    | Required                                  |
 | Search           | Optional                                  |

website/docs/components/app-side-nav/partials/code/how-to-use.md

@@ -21,7 +21,7 @@ The `Hds::AppSideNav` component provides a set of advanced features out of the b
 
 The App Side Nav component provides a top-level layout for the sidebar navigation.
 
-Cnsumers can yield the navigation content and add business logic to control the content within it.
+Consumers can yield the navigation content and add business logic to control the content within it.
 
 <!-- ```handlebars
 <div class="doc-app-sidenav-demo">

website/docs/components/application-state/partials/code/how-to-use.md

@@ -181,7 +181,7 @@ The `@titleTag` argument changes the HTML element that wraps the `[A].Header` ti
 </div>
 <Hds::ApplicationState as |A|>
   <A.Header @title="No templates have been created yet" @titleTag="h2" />
-  <A.Body @text="Make a template to easily provision infrastructure for any Waypoint application. Youll need a Terraform co-node module and instructions for your application developers." />
+  <A.Body @text="Make a template to easily provision infrastructure for any Waypoint application. You’ll need a Terraform co-node module and instructions for your application developers." />
   <A.Footer as |F|>
     <F.Button @icon="plus" @text="Create a template" />
     <F.Button @icon="upload" @text="Import" @color="secondary" />

website/docs/components/application-state/partials/guidelines/guidelines.md

@@ -87,7 +87,7 @@ When there is an empty state that occupies the majority of the page, do not disp
 
 Instead, use the Application State as the only means of drawing attention to the primary action.
 
-![Showing an empty state with a primary button with a page header with out a primay button](/assets/components/application-state/application-state-empty-state-do-keep-one-primary-cta.png)
+![Showing an empty state with a primary button with a page header with out a primary button](/assets/components/application-state/application-state-empty-state-do-keep-one-primary-cta.png)
 
 !!!
 

website/docs/components/code-block/partials/guidelines/guidelines.md

@@ -44,7 +44,7 @@ Use a `title` and/or `description` in the header to provide additional informati
 
 There can be an overlap between content that you may choose to include in the header as a `title` or `description`, and content that is part of the normal layout flow in a headline or paragraph. If it is necessary to elevate this content in the hierarchy of the page, we recommend including it in the normal layout flow, rather than as a `title` or `description` within the Code Block.
 
-![An example showcasing the Code Block paired with content in the nautral flow](/assets/components/code-block/code-block-dont-use-metadata.png)
+![An example showcasing the Code Block paired with content in the natural flow](/assets/components/code-block/code-block-dont-use-metadata.png)
 
 ## CopyButton
 

website/docs/components/form/masked-input/partials/code/component-api.md

@@ -24,10 +24,10 @@ The Masked Input component has two different variants with their own APIs:
     Applies an “invalid” appearance to the control but doesn’t modify its logical validity.
   </C.Property>
   <C.Property @name="visibilityToggleAriaLabel" @type="string" @default="Show masked content">
-    Override this value to provide a meaninful `aria-label` for the visibility toggle button.
+    Override this value to provide a meaningful `aria-label` for the visibility toggle button.
   </C.Property>
   <C.Property @name="visibilityToggleAriaMessageText" @type="string" @default="Input content is hidden">
-    Override this value to provide a meaninful `aria-live` message when the visibility toggle button is pressed.
+    Override this value to provide a meaningful `aria-live` message when the visibility toggle button is pressed.
   </C.Property>
   <C.Property @name="hasCopyButton" @type="boolean" @default="false">
     If set to `true`, it renders a [`Copy::Button`](/components/copy/button) next to the form control allowing the value of the input to be copied to the clipboard.
@@ -77,10 +77,10 @@ The Masked Input component has two different variants with their own APIs:
     Appends an `Optional` indicator next to the label text when user input is optional.
   </C.Property>
   <C.Property @name="visibilityToggleAriaLabel" @type="string" @default="Show masked content">
-    Override this value to provide a meaninful `aria-label` for the visibility toggle button.
+    Override this value to provide a meaningful `aria-label` for the visibility toggle button.
   </C.Property>
   <C.Property @name="visibilityToggleAriaMessageText" @type="string" @default="Input content is hidden">
-    Override this value to provide a meaninful `aria-live` message when the visibility toggle button is pressed.
+    Override this value to provide a meaningful `aria-live` message when the visibility toggle button is pressed.
   </C.Property>
   <C.Property @name="hasCopyButton" @type="boolean" @default="false">
     If set to `true`, it renders a [`Copy::Button`](/components/copy/button) next to the form control allowing the value of the input to be copied to the clipboard.

website/docs/components/form/primitives/partials/guidelines/guidelines.md

@@ -37,7 +37,7 @@ The default messages provide a consistent messaging pattern for the component by
 
 #### Usage in Figma
 
-For representative consistenty, the Figma component mirrors the default messages that are rendered in the Ember component and are labelled as such; `currentLength` (the default variant), `maxLength`, `minLength`, and `custom`.
+For representative consistency, the Figma component mirrors the default messages that are rendered in the Ember component and are labelled as such; `currentLength` (the default variant), `maxLength`, `minLength`, and `custom`.
 
 In all variants except the `custom` variant, we recommend _only_ overriding the numerical value (e.g., "{numerical value} characters is allowed"). Overriding the text in these variants will require a custom implementation on the engineering side, instead, the `custom` variant should be used.
 

website/docs/components/form/text-input/partials/code/component-api.md

@@ -70,10 +70,10 @@ The Text Input component has two different variants with their own APIs:
     Adds a visibility toggle button if `@type` is set to `password`.
   </C.Property>
   <C.Property @name="visibilityToggleAriaLabel" @type="string" @default="Show masked content">
-    Override this value to provide a meaninful `aria-label` for the visibility toggle button.
+    Override this value to provide a meaningful `aria-label` for the visibility toggle button.
   </C.Property>
   <C.Property @name="visibilityToggleAriaMessageText" @type="string" @default="Input content is hidden">
-    Override this value to provide a meaninful `aria-live` message when the visibility toggle button is pressed.
+    Override this value to provide a meaningful `aria-live` message when the visibility toggle button is pressed.
   </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).

website/docs/components/side-nav/partials/code/how-to-use.md

@@ -467,7 +467,7 @@ If you find yourself in the situation of wanting/needing to customize or change
 
 #### `ember-a11y-refocus`
 
-By default, the component uses the [ember-a11y-refocus](https://github.com/ember-a11y/ember-a11y-refocus) addon to provide a "navigator narrator" and a "Skip Link" to the navigation (see [the addon documentation for details)](https://github.com/ember-a11y/ember-a11y-refocus#what-this-addon-does).
+By default, the component uses the [ember-a11y-refocus](https://github.com/ember-a11y/ember-a11y-refocus) addon to provide a "navigator narrator" and a "Skip Link" to the navigation (see [the addon documentation for details](https://github.com/ember-a11y/ember-a11y-refocus#what-this-addon-does)).
 
 !!! Info
 

website/docs/patterns/form-patterns/partials/validation/validation.md

@@ -100,7 +100,7 @@ Display server-side errors using a Critical Inline [Alert](/components/alert) ab
 
 ## Validation interaction
 
-If a validation error occurs in a field outside of the viewport, scroll the user to the error. If there are multiple fields in error, scroll the user to the first (or topmost) error in the form. Form-level validation errors should be scrolled to first and take precendence over individual fields in error. This commonly occurs in long, complex forms when a form-level error occurs.
+If a validation error occurs in a field outside of the viewport, scroll the user to the error. If there are multiple fields in error, scroll the user to the first (or topmost) error in the form. Form-level validation errors should be scrolled to first and take precedence over individual fields in error. This commonly occurs in long, complex forms when a form-level error occurs.
 
 <video controls loop width="100%">
   <source src="/assets/patterns/form-patterns/validation-scroll.mp4" />

website/docs/utilities/disclosure-primitive/partials/code/component-api.md

@@ -7,7 +7,7 @@
       <C.Property @name="[T].onClickToggle" @type="function">
         A function to be called by the interactive element to toggle visibility of the content.
       </C.Property>
-      <C.Property @name="[T].isOpen" @type="boolead">
+      <C.Property @name="[T].isOpen" @type="boolean">
         Hook into this property to access the state of the internal `isOpen` tracked variable.
       </C.Property>
     </Doc::ComponentApi>