ViewTwoFactorAuth

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

Outer wrapper. Empty; the embedded AuthorizingForm owns the framed card and viewport-centred chrome, so this key is left open as the consumer-facing override surface.

Vue component: ViewTwoFactorAuth

Slot	Default classes	Description
root		Outer wrapper. Empty; the embedded AuthorizingForm owns the framed card and viewport-centred chrome, so this key is left open as the consumer-facing override surface.
buttons	flex flex-col gap-2 pt-4	Vertical button stack inside the AuthorizingForm's action-bar slot. Stacks the resend / verify / recovery-toggle trio in a single column with 8 px gaps and a 16 px top inset so the cluster reads as a footer beneath the method picker and OTP grid.
recoveryToggle	self-start	Ghost CTA that flips the form body between verified-method mode and recovery-code mode. self-start anchors the button to the start of the column so it reads as an escape hatch beside the primary verify CTA, not a peer of it.
recoveryInput	font-mono tracking-[0.04em]	Class forwarded to the WidgetTextInput rendered for the recovery-code path. Mono with a small letter-spacing bump so the dashed code reads as machine-input alongside the OTP grid it replaces.
cooldownChip	3 classes	Inline cooldown pill beside the resend button while the 60-second send-code cooldown is active. Mono / 11 px / tabular-nums keeps the counting digits column-aligned as the seconds tick down; muted fill + muted-foreground keep the pill from competing with the disabled resend button it sits beside. The chip is announced via aria-live="polite" on the consumer side; this recipe handles visual chrome only.

root

Outer wrapper. Empty; the embedded AuthorizingForm owns the framed card and viewport-centred chrome, so this key is left open as the consumer-facing override surface.

Source: client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:17

buttons

Vertical button stack inside the AuthorizingForm's action-bar slot. Stacks the resend / verify / recovery-toggle trio in a single column with 8 px gaps and a 16 px top inset so the cluster reads as a footer beneath the method picker and OTP grid.

Default classes:

flex flex-col gap-2 pt-4

Source: client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:21

recoveryToggle

Ghost CTA that flips the form body between verified-method mode and recovery-code mode. self-start anchors the button to the start of the column so it reads as an escape hatch beside the primary verify CTA, not a peer of it.

Default classes:

self-start

Source: client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:25

recoveryInput

Class forwarded to the WidgetTextInput rendered for the recovery-code path. Mono with a small letter-spacing bump so the dashed code reads as machine-input alongside the OTP grid it replaces.

Default classes:

font-mono tracking-[0.04em]

Source: client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:29

cooldownChip

Inline cooldown pill beside the resend button while the 60-second send-code cooldown is active. Mono / 11 px / tabular-nums keeps the counting digits column-aligned as the seconds tick down; muted fill + muted-foreground keep the pill from competing with the disabled resend button it sits beside. The chip is announced via aria-live="polite" on the consumer side; this recipe handles visual chrome only.

Default classes:

inline-flex items-center justify-center px-2 py-0.5 rounded-full
bg-muted/70 text-muted-foreground
font-mono text-[11px] font-medium leading-none tabular-nums

Source: client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:33