From 41ee75bbfe1968467d09083774849c4c883bdc14 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Fri, 20 Dec 2024 09:45:23 -0500
Subject: [PATCH] Fix capitalization

---
 docs/docs/native/details.md            |  2 +-
 docs/docs/native/index.md              |  2 +-
 docs/docs/native/input.md              | 10 +++++-----
 docs/docs/native/table.md              |  2 +-
 docs/docs/utilities/appearance.md      |  4 ++--
 docs/docs/utilities/color.md           |  2 +-
 docs/docs/utilities/size.md            |  2 +-
 docs/docs/utilities/visually-hidden.md |  2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/docs/native/details.md b/docs/docs/native/details.md
index cdb82d696..0b9febd88 100644
--- a/docs/docs/native/details.md
+++ b/docs/docs/native/details.md
@@ -18,7 +18,7 @@ Details show a brief summary and expand to show additional content.
 
 ## Examples
 
-### Right-to-Left languages
+### Right-to-Left Languages
 
 The details styling automatically adapts to right-to-left languages:
 
diff --git a/docs/docs/native/index.md b/docs/docs/native/index.md
index 077ba2a0b..522fa6d98 100644
--- a/docs/docs/native/index.md
+++ b/docs/docs/native/index.md
@@ -25,7 +25,7 @@ Here’s what we have so far:
   {%- endfor -%}
 </ul>
 
-## Opting out of Native Styles
+## Opting Out of Native Styles
 
 So you've decided to use Native Styles and now you need to style an element or a part of a page completely differently, what to do?
 You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)!
diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md
index 93c6bbca7..a1d39d291 100644
--- a/docs/docs/native/input.md
+++ b/docs/docs/native/input.md
@@ -20,7 +20,7 @@ wa-code-demo::part(preview) {
 }
 </style>
 
-## Text fields
+## Text Fields
 
 ```html {.example}
 <label>Input (text) <input type="text" placeholder="placeholder"></label>
@@ -48,7 +48,7 @@ wa-code-demo::part(preview) {
 <wa-textarea label="WA Textarea"></wa-textarea>
 ```
 
-## Choice inputs
+## Choice Inputs
 
 ```html {.example}
 <label><input type="checkbox"> Input (checkbox)</label>
@@ -59,7 +59,7 @@ wa-code-demo::part(preview) {
 <wa-radio value="radio-1">WA Radio</wa-radio>
 ```
 
-## Color picker
+## Color Picker
 
 Basic:
 
@@ -87,7 +87,7 @@ With swatches:
  swatches="#0070ef; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;"></wa-color-picker>
 ```
 
-## Time and date Pickers
+## Time and Date Pickers
 
 ```html {.example}
 <label>Input (datetime-local) <input type="datetime-local"></label>
@@ -107,7 +107,7 @@ With swatches:
 <wa-range label="WA Range"></wa-range>
 ```
 
-## Select dropdowns
+## Select Dropdowns
 
 ```html {.example}
 <label>Select
diff --git a/docs/docs/native/table.md b/docs/docs/native/table.md
index 630adfb58..8e2a26a2b 100644
--- a/docs/docs/native/table.md
+++ b/docs/docs/native/table.md
@@ -46,7 +46,7 @@ elements:
 </table>
 ```
 
-## Alternating rows
+## Alternating Rows
 
 You can use the `wa-zebra-rows` class to add alternating row colors to your table:
 
diff --git a/docs/docs/utilities/appearance.md b/docs/docs/utilities/appearance.md
index 30ed917c0..d0cca6b47 100644
--- a/docs/docs/utilities/appearance.md
+++ b/docs/docs/utilities/appearance.md
@@ -1,5 +1,5 @@
 ---
-title: Appearance variants
+title: Appearance Variants
 ---
 
 You may have noticed that some Web Awesome components like `<wa-button>` allow you to change their overall style by using an `appearance` attribute:
@@ -47,7 +47,7 @@ This is all we need to do:
 </style>
 ```
 
-## With color variants
+## With Color Variants
 
 These properties also work well with the [color variants](/docs/utilities/color/) utility classes:
 
diff --git a/docs/docs/utilities/color.md b/docs/docs/utilities/color.md
index 991244fb9..7132c4528 100644
--- a/docs/docs/utilities/color.md
+++ b/docs/docs/utilities/color.md
@@ -1,5 +1,5 @@
 ---
-title: Color variants
+title: Color Variants
 ---
 
 You may have noticed that some Web Awesome components like `<wa-button>` allow you to change the color by using a `variant` attribute:
diff --git a/docs/docs/utilities/size.md b/docs/docs/utilities/size.md
index dc2300b76..2a5bb4b4f 100644
--- a/docs/docs/utilities/size.md
+++ b/docs/docs/utilities/size.md
@@ -47,7 +47,7 @@ For example, assume we wanted to make a custom `.tag` class with size variants.
 </style>
 ```
 
-## Advanced: Customizing the three sizes
+## Advanced: Customizing Sizes
 
 But what if you are creating a style that should **generally** be smaller (e.g. a badge) or larger (e.g. a pull quote)?
 For example, suppose we wanted to define a custom `.tag2` class just like `.tag` in the previous section,
diff --git a/docs/docs/utilities/visually-hidden.md b/docs/docs/utilities/visually-hidden.md
index f2f5533e9..41d38e939 100644
--- a/docs/docs/utilities/visually-hidden.md
+++ b/docs/docs/utilities/visually-hidden.md
@@ -46,7 +46,7 @@ Adding a label may seem redundant at times, but they're very helpful for unsight
 </wa-card>
 ```
 
-### Force visually hidden
+### Force Visually Hidden
 
 There are cases where you want to _always_ visually hide certain content, even when it's focused.
 For example when hiding a checkbox to render a custom one: