ModelActionForm

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

Outer wrapper. Empty so the card or bare slot owns all visible chrome; layout decisions belong to whichever inner shell the form renders.

Vue component: ModelActionForm

Slot	Default classes	Description
root		Outer wrapper. Empty so the card or bare slot owns all visible chrome; layout decisions belong to whichever inner shell the form renders.
bare	contents	Bare-mode wrapper used when the form is embedded in an outer toned card (e.g. ViewDestroy.card). Renders display: contents so chip-row tone routing still works via the parent group/view-destroy scope while suppressing this form's own card chrome.
card	10 classes	Canonical confirmation card. Opens a group/model-action-form named scope so descendants opt into tone via group-data-[tone=…]/model-action-form: variants, and routes a data-[tone=…]: border + 8% ring (box-shadow: 0 0 0 3px <tone>/8%) per tone.
banner	8 classes	Tone-tracked banner row at the top of the card. Background and border tint route from the card's data-tone via group-data-[tone=…]/model-action-form: variants; bottom hairline separates the banner from the body.
bannerIcon	8 classes	36 px circular icon tile leading the banner. Tile fill and foreground swap with tone (info / success / warning / danger) via the group/model-action-form scope; matches the destructive tile recipe on ActionForm.validationIcon so danger surfaces read as siblings.
bannerBody		Inner column beside the icon: title, description, optional meta strip. min-w-0 lets a long title ellipsize instead of pushing the banner wider.
bannerTitle		Banner title. 14 px / 600 / foreground; the action's "what is about to happen" headline.
bannerDesc		One-line description beneath the banner title. 12 px / muted-foreground so the headline / supporting-copy hierarchy reads at a glance.
bannerMeta	2 classes	Optional mono meta strip below the banner description (e.g. "action archive · scope 4 selected"). Mono with a small letter-spacing bump so machine-readable values stay legible at 11 px.
body	p-4 flex flex-col gap-3	Card body region beneath the banner. Holds the selected-objects panel, confirm prompt, and extra-fields stack with a 12 px gap between sections.
inner	flex flex-col gap-1 md:gap-2 2xl:gap-4 mt-1	Inner stack used by the embedded ActionForm.inner when ModelActionForm composes ActionForm. Mirrors the ActionForm rhythm so the field column reads continuously across the two shells.
selectedObjects	6 classes	Selected-objects panel: tinted-muted background, hairline, card radius. Tone routing tints the panel destructive when nested in either the ViewDestroy.card group/view-destroy scope or this form's own group/model-action-form scope at tone="danger"; neutral otherwise.
selectedHead	flex flex-row items-baseline justify-between flex-wrap gap-2	Eyebrow head row above the chip strip: label on the left, mono count on the right. Wraps when the count grows long so the label never overflows the panel.
selectedHeadCount	2 classes	Mono count beside the eyebrow label (e.g. 12 selected). Mono / 11 px / tabular-nums so digits stay column-aligned as the count changes.
selectedObjectsLabel	2 classes	Page-level eyebrow label above the chip strip. Uses the 11 px / 600 / 0.06em uppercase recipe.
message	4 classes	Confirm-prompt panel: tinted-muted background with a 2 px primary left rule that signals "read this before you submit". Inner flex-col accommodates multi-paragraph guidance without breaking the rule's visual anchor.
messageText	text-[13px] leading-[1.5] text-foreground m-0	Paragraph element inside the confirm-prompt panel. 13 px / foreground; resets the default <p> margin so consecutive paragraphs stack on the panel's own gap.
extraFields	flex flex-col gap-3	Extra-fields slot below the confirm prompt for action-specific inputs (reason, scope, etc.). Standard 12 px form-field stack so embedded fields line up with the surrounding field column.
buttons	flex flex-col lg:flex-row gap-1 md:gap-2 flex-wrap lg:flex-nowrap	Internal button cluster passthrough when ModelActionForm composes its own confirm / cancel pair. The pinned actions strip recipe lives on ActionForm.buttons; this slot lays out the buttons stacked at narrow widths and inline at lg+.
list	flex flex-row flex-wrap gap-2	Chip-row container inside the selected-objects panel. Wraps so a large selection folds across multiple rows instead of overflowing the card. The list / listItem / listItemLabel / listItemPk slot family is the kit's preferred selected-object dialect; the standalone ActionForm.list stack is the alternative for non-card consumers.
listItem	7 classes	One chip in the selected-objects strip: label + mono PK on a card-toned background with a hairline border. Tints destructive when nested in either the ViewDestroy.card group/view-destroy scope or this form's own danger scope; neutral otherwise.
listItemLabel	text-[12px] font-medium text-foreground leading-none	Human-readable label fragment of a chip. 12 px / 500 / foreground so the label reads as the primary token in the chip.
listItemPk	3 classes	Mono PK fragment of a chip. 11 px / mono / muted-foreground; tints destructive at 80 % strength under danger so the PK still reads as supporting copy beside the label.
nonFieldErrorBlock		Non-field error block passthrough. Empty by default; the tone-tracked banner above and the per-field validation alert on ActionForm.validation carry most failure feedback.
confirmWarningGroup	4 classes	One warned object's group inside the confirmation dialog's per-object warnings view (see ActionForm.validation for the analogous per-field alert). A left rule in the warning tone separates each object's messages from the next, echoing ModelActionForm.message's primary-toned rule for the confirm prompt.
confirmWarningLabel	text-[12px] font-medium text-foreground	Label row above a warned object's messages, rendering the object's own display link via WidgetReadOnly. The messages themselves render via FieldWarningsList.

root

Outer wrapper. Empty so the card or bare slot owns all visible chrome; layout decisions belong to whichever inner shell the form renders.

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

bare

Bare-mode wrapper used when the form is embedded in an outer toned card (e.g. ViewDestroy.card). Renders display: contents so chip-row tone routing still works via the parent group/view-destroy scope while suppressing this form's own card chrome.

Default classes:

contents

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

card

Canonical confirmation card. Opens a group/model-action-form named scope so descendants opt into tone via group-data-[tone=…]/model-action-form: variants, and routes a data-[tone=…]: border + 8% ring (box-shadow: 0 0 0 3px <tone>/8%) per tone.

Default classes:

group/model-action-form
rounded-vueda-card border-hairline bg-card overflow-hidden
data-[tone=info]:border-border
data-[tone=info]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--ring)_8%,transparent)]
data-[tone=success]:border-success/50
data-[tone=success]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--success)_8%,transparent)]
data-[tone=warning]:border-warning/50
data-[tone=warning]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--warning)_8%,transparent)]
data-[tone=danger]:border-destructive/50
data-[tone=danger]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--destructive)_8%,transparent)]

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

banner

Tone-tracked banner row at the top of the card. Background and border tint route from the card's data-tone via group-data-[tone=…]/model-action-form: variants; bottom hairline separates the banner from the body.

Default classes:

group-data-[tone=info]/model-action-form:border-border
group-data-[tone=info]/model-action-form:bg-[color-mix(in_oklab,var(--info)_6%,transparent)]
group-data-[tone=success]/model-action-form:border-success/20
group-data-[tone=success]/model-action-form:bg-[color-mix(in_oklab,var(--success)_6%,transparent)]
group-data-[tone=warning]/model-action-form:border-warning/20
group-data-[tone=warning]/model-action-form:bg-[color-mix(in_oklab,var(--warning)_6%,transparent)]
group-data-[tone=danger]/model-action-form:border-destructive/20
group-data-[tone=danger]/model-action-form:bg-destructive/[0.06]

Composes: _ActionBanner.banner

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

bannerIcon

36 px circular icon tile leading the banner. Tile fill and foreground swap with tone (info / success / warning / danger) via the group/model-action-form scope; matches the destructive tile recipe on ActionForm.validationIcon so danger surfaces read as siblings.

Default classes:

group-data-[tone=info]/model-action-form:bg-info
group-data-[tone=info]/model-action-form:text-info-foreground
group-data-[tone=success]/model-action-form:bg-success
group-data-[tone=success]/model-action-form:text-success-foreground
group-data-[tone=warning]/model-action-form:bg-warning
group-data-[tone=warning]/model-action-form:text-warning-foreground
group-data-[tone=danger]/model-action-form:bg-destructive
group-data-[tone=danger]/model-action-form:text-destructive-foreground

Composes: _ActionBanner.bannerIcon

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

bannerBody

Inner column beside the icon: title, description, optional meta strip. min-w-0 lets a long title ellipsize instead of pushing the banner wider.

Composes: _ActionBanner.bannerBody

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

bannerTitle

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

Composes: _ActionBanner.bannerTitle

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

bannerDesc

One-line description beneath the banner title. 12 px / muted-foreground so the headline / supporting-copy hierarchy reads at a glance.

Composes: _ActionBanner.bannerDesc

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

bannerMeta

Optional mono meta strip below the banner description (e.g. "action archive · scope 4 selected"). Mono with a small letter-spacing bump so machine-readable values stay legible at 11 px.

Default classes:

font-mono text-[11px] font-normal leading-[1.5] tracking-[0.04em]
text-muted-foreground

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

body

Card body region beneath the banner. Holds the selected-objects panel, confirm prompt, and extra-fields stack with a 12 px gap between sections.

Default classes:

p-4 flex flex-col gap-3

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

inner

Inner stack used by the embedded ActionForm.inner when ModelActionForm composes ActionForm. Mirrors the ActionForm rhythm so the field column reads continuously across the two shells.

Default classes:

flex flex-col gap-1 md:gap-2 2xl:gap-4 mt-1

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

selectedObjects

Selected-objects panel: tinted-muted background, hairline, card radius. Tone routing tints the panel destructive when nested in either the ViewDestroy.card group/view-destroy scope or this form's own group/model-action-form scope at tone="danger"; neutral otherwise.

Default classes:

rounded-vueda-card bg-muted/25 hairline hairline-border p-3
flex flex-col gap-2
group-data-[tone=danger]/view-destroy:bg-destructive/[0.06]
group-data-[tone=danger]/view-destroy:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)]
group-data-[tone=danger]/model-action-form:bg-destructive/[0.06]
group-data-[tone=danger]/model-action-form:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)]

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

selectedHead

Eyebrow head row above the chip strip: label on the left, mono count on the right. Wraps when the count grows long so the label never overflows the panel.

Default classes:

flex flex-row items-baseline justify-between flex-wrap gap-2

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

selectedHeadCount

Mono count beside the eyebrow label (e.g. 12 selected). Mono / 11 px / tabular-nums so digits stay column-aligned as the count changes.

Default classes:

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

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

selectedObjectsLabel

Page-level eyebrow label above the chip strip. Uses the 11 px / 600 / 0.06em uppercase recipe.

Default classes:

text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
text-muted-foreground leading-none

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

message

Confirm-prompt panel: tinted-muted background with a 2 px primary left rule that signals "read this before you submit". Inner flex-col accommodates multi-paragraph guidance without breaking the rule's visual anchor.

Default classes:

flex flex-col gap-1.5
rounded-vueda-control bg-muted/25
border-l-2 border-primary/60
px-3 py-2.5

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

messageText

Paragraph element inside the confirm-prompt panel. 13 px / foreground; resets the default <p> margin so consecutive paragraphs stack on the panel's own gap.

Default classes:

text-[13px] leading-[1.5] text-foreground m-0

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

extraFields

Extra-fields slot below the confirm prompt for action-specific inputs (reason, scope, etc.). Standard 12 px form-field stack so embedded fields line up with the surrounding field column.

Default classes:

flex flex-col gap-3

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

buttons

Internal button cluster passthrough when ModelActionForm composes its own confirm / cancel pair. The pinned actions strip recipe lives on ActionForm.buttons; this slot lays out the buttons stacked at narrow widths and inline at lg+.

Default classes:

flex flex-col lg:flex-row gap-1 md:gap-2 flex-wrap lg:flex-nowrap

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

list

Chip-row container inside the selected-objects panel. Wraps so a large selection folds across multiple rows instead of overflowing the card. The list / listItem / listItemLabel / listItemPk slot family is the kit's preferred selected-object dialect; the standalone ActionForm.list stack is the alternative for non-card consumers.

Default classes:

flex flex-row flex-wrap gap-2

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

listItem

One chip in the selected-objects strip: label + mono PK on a card-toned background with a hairline border. Tints destructive when nested in either the ViewDestroy.card group/view-destroy scope or this form's own danger scope; neutral otherwise.

Default classes:

inline-flex items-center gap-2 px-2 py-1 rounded-vueda-control
hairline hairline-border bg-card
text-[12px] font-medium text-foreground leading-none
group-data-[tone=danger]/view-destroy:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)]
group-data-[tone=danger]/view-destroy:bg-card
group-data-[tone=danger]/model-action-form:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)]
group-data-[tone=danger]/model-action-form:bg-card

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

listItemLabel

Human-readable label fragment of a chip. 12 px / 500 / foreground so the label reads as the primary token in the chip.

Default classes:

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

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

listItemPk

Mono PK fragment of a chip. 11 px / mono / muted-foreground; tints destructive at 80 % strength under danger so the PK still reads as supporting copy beside the label.

Default classes:

text-[11px] font-normal font-mono text-muted-foreground leading-none
group-data-[tone=danger]/view-destroy:text-destructive/80
group-data-[tone=danger]/model-action-form:text-destructive/80

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

nonFieldErrorBlock

Non-field error block passthrough. Empty by default; the tone-tracked banner above and the per-field validation alert on ActionForm.validation carry most failure feedback.

Default classes:

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

confirmWarningGroup

One warned object's group inside the confirmation dialog's per-object warnings view (see ActionForm.validation for the analogous per-field alert). A left rule in the warning tone separates each object's messages from the next, echoing ModelActionForm.message's primary-toned rule for the confirm prompt.

Default classes:

flex flex-col gap-1
rounded-vueda-control bg-muted/25
border-l-2 border-warning/60
px-3 py-2

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

confirmWarningLabel

Label row above a warned object's messages, rendering the object's own display link via WidgetReadOnly. The messages themselves render via FieldWarningsList.

Default classes:

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

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