use:mask action

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

Build the "use:mask action" pattern (@codeatlasdev/ui demo #024, inputs/masked-field) in my app.

Call get_demo({ ids: ["#024"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Adding input masking to a custom or third-party input that is not a MaskedField.

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

Behaviour to keep:
- `use:mask={maskCPF}` on a plain `<input` with `bind:value`
- `placeholder="000.000.000-00"` and `inputmode="numeric"`
- `<label class="lbl" for="mask-action-input">` is linked to `id="mask-action-input"`
- Output line prints `value = {value || '–'}`

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

How it is built

• `use:mask={maskCPF}` on a plain `<input` with `bind:value`
• `placeholder="000.000.000-00"` and `inputmode="numeric"`
• `<label class="lbl" for="mask-action-input">` is linked to `id="mask-action-input"`
• Output line prints `value = {value || '–'}`

Related

• #023 Documents and dates component/input
• #025 Phone and CEP component/input
• #056 Default component/input
• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input