ViewDestroy

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

Outer wrapper. Empty; the card below owns all visible chrome.

Vue component: ViewDestroy

Slot	Default classes	Description
root		Outer wrapper. Empty; the card below owns all visible chrome.
card	4 classes	Outer danger card. Opens a group/view-destroy named scope, carries a destructive-bordered card with an 8 % destructive ring, and wraps the embedded ModelActionForm in :bare="true" tone="danger" so the inner card is suppressed and this surface stays authoritative.
banner	border-destructive/20 bg-destructive/[0.06]	Banner row at the top of the danger card: destructive 6 %-mix background, destructive-tinted bottom hairline. Mirrors the ModelActionForm.banner layout so danger and tone-routed banners read as siblings.
bannerIcon	bg-destructive text-destructive-foreground	36 px destructive icon tile leading the banner. Fixed destructive recipe (no tone routing) since ViewDestroy is the danger specialization; matches ModelActionForm.bannerIcon under the danger tone.
bannerBody		Inner column beside the icon: title above description. min-w-0 lets long titles ellipsize instead of pushing the banner wider.
bannerTitle		Banner title. 14 px / 600 / foreground; the destructive action's "what is about to happen" headline.
bannerDescription		One-line description beneath the title (typically the ConsequencesBullets fallback or its leading sentence). 12 px / muted-foreground per the headline / supporting-copy hierarchy.
body	p-4	Body region beneath the banner: holds the consequences cascade and the embedded ModelActionForm. 16 px padding so the card edge stays clear of the chip-strip border.

root

Outer wrapper. Empty; the card below owns all visible chrome.

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

card

Outer danger card. Opens a group/view-destroy named scope, carries a destructive-bordered card with an 8 % destructive ring, and wraps the embedded ModelActionForm in :bare="true" tone="danger" so the inner card is suppressed and this surface stays authoritative.

Default classes:

group/view-destroy
rounded-vueda-card border-hairline bg-card overflow-hidden
border-destructive/50
shadow-[0_0_0_3px_color-mix(in_oklab,var(--destructive)_8%,transparent)]

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

banner

Banner row at the top of the danger card: destructive 6 %-mix background, destructive-tinted bottom hairline. Mirrors the ModelActionForm.banner layout so danger and tone-routed banners read as siblings.

Default classes:

border-destructive/20 bg-destructive/[0.06]

Composes: _ActionBanner.banner

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

bannerIcon

36 px destructive icon tile leading the banner. Fixed destructive recipe (no tone routing) since ViewDestroy is the danger specialization; matches ModelActionForm.bannerIcon under the danger tone.

Default classes:

bg-destructive text-destructive-foreground

Composes: _ActionBanner.bannerIcon

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

bannerBody

Inner column beside the icon: title above description. min-w-0 lets long titles ellipsize instead of pushing the banner wider.

Composes: _ActionBanner.bannerBody

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

bannerTitle

Banner title. 14 px / 600 / foreground; the destructive action's "what is about to happen" headline.

Composes: _ActionBanner.bannerTitle

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

bannerDescription

One-line description beneath the title (typically the ConsequencesBullets fallback or its leading sentence). 12 px / muted-foreground per the headline / supporting-copy hierarchy.

Composes: _ActionBanner.bannerDesc

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

body

Body region beneath the banner: holds the consequences cascade and the embedded ModelActionForm. 16 px padding so the card edge stays clear of the chip-strip border.

Default classes:

p-4

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