### Install Dependencies

Source: https://github.com/capacitor-community/safe-area/blob/master/CONTRIBUTING.md

Run this command to install project dependencies after cloning the repository.

```shell
npm install
```

--------------------------------

### Install Safe Area Plugin for Capacitor v8

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Install the safe area plugin and sync Capacitor for version 8. This is the standard installation procedure for Capacitor v8.

```bash
npm install @capacitor-community/safe-area
npx cap sync
```

--------------------------------

### Install SwiftLint

Source: https://github.com/capacitor-community/safe-area/blob/master/CONTRIBUTING.md

If you are on macOS, install SwiftLint using Homebrew for Swift code linting.

```shell
brew install swiftlint
```

--------------------------------

### Install Safe Area Plugin for Capacitor v7

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Install a specific version of the safe area plugin for Capacitor v7 and sync Capacitor. Use this command if you are on Capacitor v7.

```bash
npm install @capacitor-community/safe-area@^7.0.0
npx cap sync
```

--------------------------------

### showSystemBars

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Makes the system bars visible.

```APIDOC
## showSystemBars(...)

### Description
Shows the system bars.

### Method
```typescript
showSystemBars(options: SystemBarsVisibilityOptions) => Promise<void>
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **`options`** (SystemBarsVisibilityOptions) - Required - Options to control the visibility of system bars.
```

--------------------------------

### Verify Plugin Build

Source: https://github.com/capacitor-community/safe-area/blob/master/CONTRIBUTING.md

Builds and validates both web and native projects. This script is useful for CI to ensure the plugin builds correctly across all platforms.

```shell
npm run verify
```

--------------------------------

### Build Plugin

Source: https://github.com/capacitor-community/safe-area/blob/master/CONTRIBUTING.md

Builds the plugin's web assets and generates API documentation. This command compiles TypeScript and bundles the code for use in applications.

```shell
npm run build
```

--------------------------------

### Publish Plugin

Source: https://github.com/capacitor-community/safe-area/blob/master/CONTRIBUTING.md

Publishes the plugin to the npm registry. The `prepublishOnly` hook ensures the plugin is prepared before publishing.

```shell
npm publish
```

--------------------------------

### SystemBarsVisibilityOptions

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Options for controlling the visibility of system bars.

```APIDOC
## SystemBarsVisibilityOptions

### Description
Options for controlling the visibility of system bars.

### Properties
- **`type`** (SystemBarsType) - Required/Optional - The system bar to hide or show. Providing `null` means it will toggle both system bars.

### Default Values
- **`type`**: null
```

--------------------------------

### Show System Bars

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Use this method to show the system bars. Requires 'View controller-based status bar appearance' set to YES in Info.plist on iOS.

```typescript
showSystemBars(options: SystemBarsVisibilityOptions) => Promise<void>
```

--------------------------------

### Configure SafeArea Plugin in capacitor.config.json

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Use this JSON configuration in capacitor.config.json to set up the SafeArea plugin. All properties are optional and can be set to undefined to use default values.

```json
{
  "plugins": {
    "SafeArea": {
      "statusBarStyle": undefined,
      "navigationBarStyle": undefined,
      "detectViewportFitCoverChanges": undefined,
      "initialViewportFitCover": undefined,
      "offsetForKeyboardInsetBug": undefined
    }
  }
}
```

--------------------------------

### SystemBarsStyleOptions

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Options for styling the content of the system bars (status bar and navigation bar).

```APIDOC
## SystemBarsStyleOptions

### Description
Options for styling the content of the system bars.

### Properties
- **`style`** (SystemBarsStyle) - Required/Optional - Style of the content of the system bars.
- **`type`** (SystemBarsType) - Required/Optional - The system bar to which to apply the style. Providing `null` means it will be applied to both system bars. On iOS the home indicator cannot be styled. It will always automatically be applied a color by iOS out of the box.

### Default Values
- **`style`**: 'DEFAULT'
- **`type`**: null
```

--------------------------------

### SystemBarsStyle Enum

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Defines the possible styles for system bar content.

```APIDOC
## SystemBarsStyle Enum

### Members
- **`Dark`** ('DARK') - Light system bar content on a dark background.
- **`Light`** ('LIGHT') - For dark system bar content on a light background.
- **`Default`** ('DEFAULT') - The style is based on the device appearance or the underlying content. If the device is using dark mode, the system bars content will be light. If the device is using light mode, the system bars content will be dark.
```

--------------------------------

### Configure Capacitor v8 for System Bars

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

For Capacitor v8, set 'insetsHandling' to 'disable' in 'capacitor.config.json' to manage system bars. This configuration is necessary when using the safe area plugin.

```json
{
  "plugins": {
    "SystemBars": {
      "insetsHandling": "disable"
    }
  }
}
```

--------------------------------

### Lint and Format Code

Source: https://github.com/capacitor-community/safe-area/blob/master/CONTRIBUTING.md

Checks code quality and formatting, and attempts to auto-fix issues. Integrates ESLint, Prettier, and SwiftLint for consistent code style.

```shell
npm run lint
```

```shell
npm run fmt
```

--------------------------------

### Configure SafeArea Plugin in capacitor.config.ts

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Use this TypeScript configuration in capacitor.config.ts for the SafeArea plugin. It provides type safety and allows for more complex configurations if needed. All properties are optional.

```typescript
/// <reference types="@capacitor-community/safe-area" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    SafeArea: {
      statusBarStyle: undefined,
      navigationBarStyle: undefined,
      detectViewportFitCoverChanges: undefined,
      initialViewportFitCover: undefined,
      offsetForKeyboardInsetBug: undefined,
    },
  },
};

export default config;
```

--------------------------------

### Set System Bars Style

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Use this method to set the style of the system bars. Requires 'View controller-based status bar appearance' set to YES in Info.plist on iOS.

```typescript
setSystemBarsStyle(options: SystemBarsStyleOptions) => Promise<void>
```

--------------------------------

### hideSystemBars

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Hides the system bars.

```APIDOC
## hideSystemBars(...)

### Description
Hides the system bars.

### Method
```typescript
hideSystemBars(options: SystemBarsVisibilityOptions) => Promise<void>
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **`options`** (SystemBarsVisibilityOptions) - Required - Options to control the visibility of system bars.
```

--------------------------------

### setSystemBarsStyle

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Sets the style of the system bars (e.g., status bar).

```APIDOC
## setSystemBarsStyle(...)

### Description
Sets the style of the system bars.

### Method
```typescript
setSystemBarsStyle(options: SystemBarsStyleOptions) => Promise<void>
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **`options`** (SystemBarsStyleOptions) - Required - Options to style the system bars.
```

--------------------------------

### SystemBarsType Enum

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Defines the types of system bars that can be targeted.

```APIDOC
## SystemBarsType Enum

### Members
- **`StatusBar`** ('STATUS_BAR') - The top status bar on both Android and iOS.
- **`NavigationBar`** ('NAVIGATION_BAR') - The navigation bar on both Android and iOS. On iOS this is the "home indicator". On Android this is either the "navigation bar" or the "gesture bar".
```

--------------------------------

### Configure Android Edge to Edge Behavior

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Disable detecting viewport fit cover changes and passing through insets on Android to only add padding around the webview.

```json
{
  "plugins": {
    "SafeArea": {
      "detectViewportFitCoverChanges": false,
      "initialViewportFitCover": false
    }
  }
}
```

--------------------------------

### Enable Edge-to-Edge Mode in MainActivity (Kotlin)

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Enable native edge-to-edge mode in your Android MainActivity using Kotlin. This is required for the safe area plugin to function correctly.

```kotlin
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import androidx.activity.EdgeToEdge;

class MainActivity : BridgeActivity() {
    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() // enable edge-to-edge mode
    }
}
```

--------------------------------

### Hide System Bars

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Use this method to hide the system bars. Requires 'View controller-based status bar appearance' set to YES in Info.plist on iOS.

```typescript
hideSystemBars(options: SystemBarsVisibilityOptions) => Promise<void>
```

--------------------------------

### Enable Edge-to-Edge Mode in MainActivity (Java)

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Enable native edge-to-edge mode in your Android MainActivity using Java. This is required for the safe area plugin to function correctly.

```java
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import androidx.activity.EdgeToEdge;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this); // enable edge-to-edge mode
    }
}
```

--------------------------------

### Set Viewport for Safe Area

Source: https://github.com/capacitor-community/safe-area/blob/master/README.md

Ensure the viewport is set to cover the device display to enable safe area insets. This is a standard web practice.

```html
<meta name="viewport" content="viewport-fit=cover" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.