docs: revise heading case style

documents/scripts/element.injector.js

@@ -44,7 +44,7 @@ const handler = async () => {
       const hasApi = apiReferenceIndices.some(index => index !== -1);
 
       if(hasApi) {
-        content += '\n\n---\n' + '\n## API Reference\n';
+        content += '\n\n---\n' + '\n## API reference\n';
       }
 
       for(let i=0; i<apiReferenceIndices.length; i++) {

documents/src/pages/elements/email-field.md

@@ -47,7 +47,7 @@ p {
 </ef-email-field>
 ```
 
-## Getting value
+## Getting a value
 The field's value can be accessed directly using the `value` property.
 
 ```html
@@ -99,14 +99,14 @@ emailField?.addEventListener("value-changed", (event) => {
 });
 ```
 
-## Input Validation
+## Input validation
 `ef-email-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email). When a user types an invalid value into the control, error style will be shown to notify the user.
 
 You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page.
 
 Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not.
 
-### Input Length
+### Input length
 The `maxlength` attribute limits the number of characters that users can type into the input and the `minlength` attribute is used to set the minimum of characters required. `ef-email-field` will show error styles if the condition is not met.
 
 @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#maxlength).
@@ -197,7 +197,7 @@ emailField?.addEventListener("input", () => {
 });
 ```
 
-### Using pattern
+### Using a pattern
 You can use a regular expression to validate the input value by adding the `pattern` attribute.
 
 ::
@@ -283,7 +283,7 @@ emailField?.addEventListener("input", () => {
 });
 ```
 
-### Custom Validation
+### Custom validation
 
 For advance use cases, default validation and error state of the field can be overridden. To do this, make sure that `maxLength` & `minLength` are not set and `pattern` is set to `''`, then validate with your customised validation logic and update `error` property accordingly.
 
@@ -444,7 +444,7 @@ fullName.addEventListener("input", inputHandler);
 email.addEventListener("input", inputHandler);
 ```
 
-## Showing icon
+## Showing an icon
 An inline icon can be displayed inside the input using `icon`.
 
 ```html

documents/src/pages/elements/number-field.md

@@ -56,7 +56,7 @@ Number field can be used in a similar fashion to the native number input.
 <ef-number-field id="total" value="1000"></ef-number-field>
 ```
 
-## Getting value
+## Getting a value
 Just like the HTML native input, the number field input value is a `string` which can be accessed using the `value` property.
 
 ```html
@@ -122,7 +122,7 @@ numberField?.addEventListener("value-changed", (event) => {
 });
 ```
 
-## Input Validation
+## Input validation
 `ef-number-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number). When a user types an invalid value into the control, error style will be shown to notify the user.
 
 You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page.
@@ -246,7 +246,7 @@ The step attribute specifies the interval between valid numbers. For instance, w
 <ef-number-field id="any" step="any"></ef-number-field>
 ```
 
-### Custom Validation
+### Custom validation
 
 For advance use cases, default validation and error state of the field can be overridden. To do this, make sure that `max` & `min` are not set and `step` is set to `any`, then validate with your customised validation logic and update `error` property accordingly.
 

documents/src/pages/elements/password-field.md

@@ -95,7 +95,7 @@ ul {
 <ef-password-field id="password"></ef-password-field>
 ```
 
-## Getting value
+## Getting a value
 The value can be accessed through the `value` property.
 
 ```html
@@ -159,14 +159,14 @@ passwordField?.addEventListener("value-changed", (event) => {
 });
 ```
 
-## Input Validation
+## Input validation
 `ef-password-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password). When a user types an invalid value into the control, error style will be shown to notify the user.
 
 You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page.
 
 Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not.
 
-### Input Length
+### Input length
 The `maxlength` attribute limits the number of characters that can be typed into the input, and the `minlength` attribute sets the minimum of characters. `ef-password-field` will show error styles if a condition is not met.
 
 @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#maxlength).
@@ -256,7 +256,7 @@ passwordField?.addEventListener("input", () => {
 });
 ```
 
-### Using pattern
+### Using a pattern
 You can use a regular expression to validate the input value by setting it to the `pattern` attribute.
 
 ::
@@ -346,7 +346,7 @@ passwordField?.addEventListener("input", () => {
 });
 ```
 
-### Custom Validation
+### Custom validation
 
 For advance use cases, default validation and error state of the field can be overridden. To do this, make sure that `maxLength`, `minLength` and `pattern` are not set, then validate with your customised validation logic and update `error` property accordingly.
 

documents/src/pages/elements/search-field.md

@@ -33,7 +33,7 @@ language_tabs: [javascript, typescript]
 </ef-search-field>
 ```
 
-## Getting value
+## Getting a value
 The value can be accessed using the `value` property.
 
 You can also listen to the `value-changed` event, which triggers whenever user interactions change the value.
@@ -88,14 +88,14 @@ searchField?.addEventListener("value-changed", (event) => {
 });
 ```
 
-## Input Validation
+## Input validation
 `ef-search-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search). When a user types an invalid value into the control, error style will be shown to notify the user.
 
 You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page.
 
 Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not.
 
-### Input Length
+### Input length
 The `maxlength` attribute limits the number of characters that users can enter and the `minlength` attribute sets the minimum number of characters required. `ef-search-field` will show error styles if a condition is not met.
 
 @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#maxlength).
@@ -185,7 +185,7 @@ searchField?.addEventListener("input", () => {
 });
 ```
 
-### Using pattern
+### Using a pattern
 You can use a regular expression to validate the input value by setting it to the `pattern` attribute.
 
 ::
@@ -271,7 +271,7 @@ searchField?.addEventListener("input", () => {
 });
 ```
 
-### Custom Validation
+### Custom validation
 
 For advance use cases, default validation and error state of the field can be overridden. To do this, make sure that `maxLength`, `minLength` and `pattern` are not set, then validate with your customised validation logic and update `error` property accordingly.
 
@@ -388,7 +388,7 @@ searchField.addEventListener("input", () => {
 });
 ```
 
-## Icon Action
+## Icon action
 The search icon can become actionable by adding the `icon-has-action` attribute to the element, so that `ef-search-field` will fire an `icon-click` event when a user clicks on the icon. You can add an event listener to this event to execute your code.
 
 ::

documents/src/pages/elements/text-field.md

@@ -59,7 +59,7 @@ Text field is used to accept text input from users and has similar behaviors to
 </ef-text-field>
 ```
 
-## Getting value
+## Getting a value
 The field's value can be accessed using the `value` property.
 
 You can also listen for the `value-changed` event. This event triggers when user interactions change the value.
@@ -88,14 +88,14 @@ textField?.addEventListener("value-changed", (event) => {
 });
 ```
 
-## Input Validation
+## Input validation
 `ef-text-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text). When a user types an invalid value into the control, error style will be shown to notify the user.
 
 You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page.
 
 Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not.
 
-### Input Length
+### Input length
 The `maxlength` attribute limits the number of characters that users can type into the input, and the `minlength` attribute sets the minimum number of characters required. `ef-text-field` will show error styles if a condition is not met.
 
 @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#maxlength).
@@ -190,7 +190,7 @@ textField?.addEventListener("input", () => {
 });
 ```
 
-### Using pattern
+### Using a pattern
 You can use a regular expression to validate the input value by setting it with the `pattern` attribute.
 
 ::
@@ -285,7 +285,7 @@ textField?.addEventListener("input", () => {
 });
 ```
 
-### Custom Validation
+### Custom validation
 
 For advance use cases, default validation and error state of the field can be overridden. To do this, make sure that `maxLength`, `minLength` and `pattern` are not set, then validate with your customised validation logic and update `error` property accordingly.
 
@@ -430,7 +430,7 @@ firstName.addEventListener("input", inputHandler);
 lastName.addEventListener("input", inputHandler);
 ```
 
-## Showing icon
+## Showing an icon
 An inline icon can be set to display inside the input using the `icon` attribute.
 
 ::