Sign-up field

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Sign-up field" pattern (@codeatlasdev/ui demo #841, inputs/password-strength) in my app.

Call get_demo({ ids: ["#841"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Sign-up and reset-password forms that need strength feedback that does not rely on colour alone.

Keep these library parts, with the props and tokens the demo uses:
- PasswordStrength, TextField from "@codeatlasdev/ui"

Behaviour to keep:
- `let password = $state('')` bound with `<TextField label="Password" type="password" bind:value={password} />`
- `<PasswordStrength value={password} />` directly under the field
- Column is `max-width: 20rem` with `gap: var(--ca-space-2)`

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• PasswordStrength @codeatlasdev/ui
• TextField @codeatlasdev/ui

How it is built

• `let password = $state('')` bound with `<TextField label="Password" type="password" bind:value={password} />`
• `<PasswordStrength value={password} />` directly under the field
• Column is `max-width: 20rem` with `gap: var(--ca-space-2)`

Related

• #842 Your own rule component/input
• #500 Password component/input
• #843 Sign-in form component/input
• #056 Default component/input
• #057 With icons component/input
• #058 States component/input