TypedConfirmField

Source: client/lib/theme/vueda-tailwind/form/index.js

Muted confirmation box that groups the label and input before a destructive action.

Vue component: TypedConfirmField

Slot	Default classes	Description
root	2 classes	Muted confirmation box that groups the label and input before a destructive action.
label	text-[12px] font-medium leading-tight text-foreground	Instruction label for the expected typed confirmation value.
expectedChip	3 classes	Inline mono chip that echoes the exact expected value.
input	6 classes	Mono input for the typed confirmation value, using the shared input focus-ring contract.

root

Muted confirmation box that groups the label and input before a destructive action.

Default classes:

flex flex-col gap-1.5 px-3.5 py-3 rounded-vueda-card hairline hairline-border
bg-[color-mix(in_oklab,var(--muted)_40%,var(--background))]

Source: client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:17

label

Instruction label for the expected typed confirmation value.

Default classes:

text-[12px] font-medium leading-tight text-foreground

Source: client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:24

expectedChip

Inline mono chip that echoes the exact expected value.

Default classes:

inline-flex items-center px-1.5 py-0.5 mx-0.5
rounded-[3px] hairline hairline-border bg-background
font-mono text-[12px] font-semibold leading-none text-foreground

Source: client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:28

input

Mono input for the typed confirmation value, using the shared input focus-ring contract.

Default classes:

h-8 px-2.5 w-full min-w-0
rounded-vueda-control hairline bg-background
font-mono text-[12.5px] font-medium leading-none text-foreground
placeholder:text-muted-foreground placeholder:font-normal
shadow-vueda-control transition-shadow
focus-visible:hairline-ring focus-visible:focus-ring-shadow focus-visible:outline-none

Source: client/lib/theme/vueda-tailwind/form/TypedConfirmField.theme.js:36