import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";

import * as stories from "./color-password.stories";

<Meta of={stories} />

```ts
import { ColorPasswordModule } from "@bitwarden/components";
```

<Title />
<Description />

<Primary />
<Controls />

## Password Count

The password count option is used in the Login type form. It is used to highlight each character's
position in the password string.

<Canvas of={stories.ColorPasswordCount} />

## Wrapped Password

When the password length is longer than the container's width, it should wrap as shown below.

<Canvas of={stories.WrappedColorPassword} />

<Canvas of={stories.WrappedColorPasswordCount} />

## Accessibility

The colors used in the colored password should maintain WCAG compliant contrast with theme
`background` and `background-alt` colors.
