ViewRecoveryCodes

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

Outer wrapper. Empty; the embedded AuthForm owns the framed card chassis, and the slots inside it own all visible chrome.

Vue component: ViewRecoveryCodes

Slot	Default classes	Description
root		Outer wrapper. Empty; the embedded AuthForm owns the framed card chassis, and the slots inside it own all visible chrome.
inner	my-4 hairline hairline-border rounded-vueda-card py-4 px-2	Bordered code-panel card inside the AuthForm body, rendered when the user has a TOTP device configured. Card-radius border with 16 px / 8 px padding so the unused-codes grid reads as a deliberate display surface rather than another form row; the print-hidden affordances above and below this card keep the printed output clean. The endpoint returns unused codes only, so there is no used-code state to render; ViewRecoveryCodes.listItem would carry one if the server ever exposed it.
messageContainer	mx-4 my-6 print:hidden	Wrapper around the "each code works once" Alert. print:hidden drops the alert from printed output so the page prints as a clean list of codes; mx-4 my-6 centres the alert inside the bordered card with breathing room above the grid.
listContainer	m-4 gap-4 justify-center grow select-all flex	Container around the two-column code grid. select-all on the wrapper lets a triple-click copy the whole grid; grow lets the container claim remaining vertical space inside the card so short / long code lists both centre vertically.
list	2 classes	Two-column grid of unused recovery codes. grid-cols-2 with asymmetric gap-x-6 gap-y-1 so the columns read as two readable runs rather than a dense block; select-all reinforces the wrapper's copy behaviour so a click directly on the list also copies the full set. The default <ol> margin and bullet glyph are reset since the per-item numbering on ViewRecoveryCodes.listItemNum carries the index.
listItem	3 classes	One code row. grid-cols-[22px_1fr] reserves a 22 px column for the index so all codes align on the same baseline regardless of digit count; mono / 14 px / 500 with a small letter-spacing bump so the dashed code reads as machine-input. A data-used="true" variant would swap the row to line-through text-muted-foreground, but the endpoint returns unused codes only, so nothing sets it today.
listItemNum	2 classes	Numbered prefix at the start of each code row. Mono / 11 px / muted-foreground with tabular-nums keeps the indices column-aligned as the count crosses the single-to-double-digit boundary; right-aligned inside the 22 px gutter so the period sits next to the code rather than the row edge.
actionBarTitleTextContainer	flex flex-col my-4	"Generate new recovery codes" title / blurb stack rendered in the action-bar slot above the regenerate button. Vertical stack so the bold title and the supporting paragraph beneath it read as a labelled pair, with 16 px vertical insets so the stack reads as a separable section above the submit cluster.
savingOptionButtons	flex items-center gap-2 justify-center mx-4 mb-4 print:hidden	Centered row of Download / Print / Copy buttons beneath the code grid. print:hidden drops the buttons from printed output so the affordances do not appear next to the codes on paper; horizontal layout at all viewport widths since the three buttons fit on a phone-width screen.
savingOptionButton	min-w-[120px]	Per-button class applied to each saving-option button. min-w-[120px] floors the buttons so Download / Print / Copy all read as a balanced trio regardless of label width; the variant chrome (outline) comes from the Button props on the consumer side.
emptyActions	flex flex-col sm:flex-row gap-2 justify-center	Action cluster shown in place of the regenerate column when the user has no TOTP device configured. Stacks "Set up a device" + "Go Back" on narrow viewports and inlines them at sm+ so the empty branch matches the regenerate-form column rhythm above.
actionBar	flex flex-col gap-2 justify-center min-w-min print:hidden	Action-bar column holding the regenerate title / blurb and the regenerate + go-back buttons. print:hidden drops the whole bar from printed output; min-w-min keeps the column from collapsing below its longest unbreakable word so the regenerate CTA stays legible at narrow widths.

root

Outer wrapper. Empty; the embedded AuthForm owns the framed card chassis, and the slots inside it own all visible chrome.

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

inner

Bordered code-panel card inside the AuthForm body, rendered when the user has a TOTP device configured. Card-radius border with 16 px / 8 px padding so the unused-codes grid reads as a deliberate display surface rather than another form row; the print-hidden affordances above and below this card keep the printed output clean. The endpoint returns unused codes only, so there is no used-code state to render; ViewRecoveryCodes.listItem would carry one if the server ever exposed it.

Default classes:

my-4 hairline hairline-border rounded-vueda-card py-4 px-2

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

messageContainer

Wrapper around the "each code works once" Alert. print:hidden drops the alert from printed output so the page prints as a clean list of codes; mx-4 my-6 centres the alert inside the bordered card with breathing room above the grid.

Default classes:

mx-4 my-6 print:hidden

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

listContainer

Container around the two-column code grid. select-all on the wrapper lets a triple-click copy the whole grid; grow lets the container claim remaining vertical space inside the card so short / long code lists both centre vertically.

Default classes:

m-4 gap-4 justify-center grow select-all flex

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

list

Two-column grid of unused recovery codes. grid-cols-2 with asymmetric gap-x-6 gap-y-1 so the columns read as two readable runs rather than a dense block; select-all reinforces the wrapper's copy behaviour so a click directly on the list also copies the full set. The default <ol> margin and bullet glyph are reset since the per-item numbering on ViewRecoveryCodes.listItemNum carries the index.

Default classes:

grid grid-cols-2 gap-x-6 gap-y-1 px-2 py-1
select-all m-0 list-none

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

listItem

One code row. grid-cols-[22px_1fr] reserves a 22 px column for the index so all codes align on the same baseline regardless of digit count; mono / 14 px / 500 with a small letter-spacing bump so the dashed code reads as machine-input. A data-used="true" variant would swap the row to line-through text-muted-foreground, but the endpoint returns unused codes only, so nothing sets it today.

Default classes:

grid grid-cols-[22px_1fr] items-baseline gap-2
font-mono text-[14px] font-medium leading-[1.6] tracking-[0.04em]
text-foreground

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

listItemNum

Numbered prefix at the start of each code row. Mono / 11 px / muted-foreground with tabular-nums keeps the indices column-aligned as the count crosses the single-to-double-digit boundary; right-aligned inside the 22 px gutter so the period sits next to the code rather than the row edge.

Default classes:

text-right font-mono text-[11px] font-normal leading-[1.6]
text-muted-foreground tabular-nums

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

actionBarTitleTextContainer

"Generate new recovery codes" title / blurb stack rendered in the action-bar slot above the regenerate button. Vertical stack so the bold title and the supporting paragraph beneath it read as a labelled pair, with 16 px vertical insets so the stack reads as a separable section above the submit cluster.

Default classes:

flex flex-col my-4

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

savingOptionButtons

Centered row of Download / Print / Copy buttons beneath the code grid. print:hidden drops the buttons from printed output so the affordances do not appear next to the codes on paper; horizontal layout at all viewport widths since the three buttons fit on a phone-width screen.

Default classes:

flex items-center gap-2 justify-center mx-4 mb-4 print:hidden

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

savingOptionButton

Per-button class applied to each saving-option button. min-w-[120px] floors the buttons so Download / Print / Copy all read as a balanced trio regardless of label width; the variant chrome (outline) comes from the Button props on the consumer side.

Default classes:

min-w-[120px]

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

emptyActions

Action cluster shown in place of the regenerate column when the user has no TOTP device configured. Stacks "Set up a device" + "Go Back" on narrow viewports and inlines them at sm+ so the empty branch matches the regenerate-form column rhythm above.

Default classes:

flex flex-col sm:flex-row gap-2 justify-center

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

actionBar

Action-bar column holding the regenerate title / blurb and the regenerate + go-back buttons. print:hidden drops the whole bar from printed output; min-w-min keeps the column from collapsing below its longest unbreakable word so the regenerate CTA stays legible at narrow widths.

Default classes:

flex flex-col gap-2 justify-center min-w-min print:hidden

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