ActionForm

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

Outer wrapper. Caps content at the 7xl content column so a confirmation form does not stretch the full width of a wide viewport.

Vue component: ActionForm

Slot	Default classes	Description
root	max-w-7xl	Outer wrapper. Caps content at the 7xl content column so a confirmation form does not stretch the full width of a wide viewport.
inner	flex flex-col gap-1 md:gap-2 2xl:gap-4	Vertical stack for the form body (selected objects, message, fields). Gap scales up at breakpoints to keep section spacing legible on larger viewports.
selectedObjects		Selected-objects panel passthrough when ActionForm renders standalone. When embedded in ModelActionForm, the inner card owns the tinted chip-strip container; this slot stays empty so the parent recipe is authoritative.
message		Confirm-prompt passthrough when ActionForm renders standalone. The canonical 2 px primary left-rule recipe lives on ModelActionForm.message; this slot is intentionally empty for embedded usage.
buttons	4 classes	Pinned actions strip closing the card body: horizontal row with a top hairline and a tinted-muted background that picks up the bottom radius via rounded-b-vueda-card when nested in ModelActionForm.card. Wraps on narrow viewports rather than stacking column.
buttonsSpacer	flex-1 min-w-0	Flexible filler between the confirm / cancel cluster and the optional hint, keeping the buttons pinned to the start of the strip.
buttonsHint	2 classes	Right-aligned actions-hint slot inside the pinned strip, sized for keyboard shortcuts, reversibility notes, or audit hints. Muted-foreground at 12 px so the hint reads as supporting copy beside the action buttons.
list	flex flex-col gap-1 md:gap-2 lg:max-w-max	Vertical list used when ActionForm is consumed outside the ModelActionForm chip-strip recipe (e.g. plain stacked rows of selected objects). Caps at max-w-max on lg+ so the column hugs its longest row.
listItem		Row entry in the standalone list. Empty by default so the consumer can supply its own row chrome; the chip recipe lives on ModelActionForm.listItem.
nonFieldErrorBlock		Non-field error block passthrough. Empty by default; the structured per-field validation alert below covers most cases, and consumers can opt into a richer block when they need free-form server errors above the form.
validation	3 classes	Structured per-field validation alert rendered when formContext.state.anyError is set and at least one field carries an error. Destructive 6%-mix fill with a destructive-tinted border; tone tracks danger via data-tone="danger" on the alert root so future skins can route through group-data-[tone=danger]/action-form-validation: variants.
validationIcon	3 classes	Destructive 36 px icon tile leading the validation alert. Matches the icon-tile recipe used on the ModelActionForm.bannerIcon banner so the two destructive surfaces read as siblings.
validationBody	flex flex-col gap-1 min-w-0	Inner body column inside the validation alert (title, description, bullet list). min-w-0 lets the bullet list ellipsize a long field message instead of pushing the alert wider.
validationTitle	text-[14px] font-semibold leading-[1.3] text-foreground	Validation alert title. 14 px / 600 / foreground; carries the "Fix these to continue" headline copy.
validationDesc	text-[12px] font-normal leading-[1.5] text-muted-foreground	One-line description beneath the validation title. 12 px / muted-foreground so the headline / supporting-copy hierarchy reads at a glance.
validationList	flex flex-col gap-0.5 m-0 mt-1 p-0 list-none	Tight unmarked list of per-field errors. Removes the default <ul> margin and bullet glyph since the row itself carries the field / message pairing.
validationListItem	flex items-baseline gap-2 text-[12px] leading-[1.5]	One row in the validation list: mono field name beside the human-readable message. Baseline-aligned so descenders stay even with the field label.
validationField	font-mono text-[11.5px] font-medium text-foreground shrink-0	Field-name fragment in a validation row. Mono / 11.5 px / 500 / foreground; shrink-0 keeps the name from wrapping when the message is long.
validationMsg	text-[12px] font-normal text-muted-foreground	Human-readable message fragment in a validation row. 12 px / muted-foreground so the field name reads as the primary token and the message as supporting copy.

root

Outer wrapper. Caps content at the 7xl content column so a confirmation form does not stretch the full width of a wide viewport.

Default classes:

max-w-7xl

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

inner

Vertical stack for the form body (selected objects, message, fields). Gap scales up at breakpoints to keep section spacing legible on larger viewports.

Default classes:

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

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

selectedObjects

Selected-objects panel passthrough when ActionForm renders standalone. When embedded in ModelActionForm, the inner card owns the tinted chip-strip container; this slot stays empty so the parent recipe is authoritative.

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

message

Confirm-prompt passthrough when ActionForm renders standalone. The canonical 2 px primary left-rule recipe lives on ModelActionForm.message; this slot is intentionally empty for embedded usage.

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

buttons

Pinned actions strip closing the card body: horizontal row with a top hairline and a tinted-muted background that picks up the bottom radius via rounded-b-vueda-card when nested in ModelActionForm.card. Wraps on narrow viewports rather than stacking column.

Default classes:

flex flex-row flex-wrap items-center gap-2
px-4 py-3 mt-2
border-t-hairline bg-muted/25
rounded-b-vueda-card

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

buttonsSpacer

Flexible filler between the confirm / cancel cluster and the optional hint, keeping the buttons pinned to the start of the strip.

Default classes:

flex-1 min-w-0

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

buttonsHint

Right-aligned actions-hint slot inside the pinned strip, sized for keyboard shortcuts, reversibility notes, or audit hints. Muted-foreground at 12 px so the hint reads as supporting copy beside the action buttons.

Default classes:

ml-auto text-[12px] leading-none text-muted-foreground
inline-flex items-center gap-1.5

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

list

Vertical list used when ActionForm is consumed outside the ModelActionForm chip-strip recipe (e.g. plain stacked rows of selected objects). Caps at max-w-max on lg+ so the column hugs its longest row.

Default classes:

flex flex-col gap-1 md:gap-2 lg:max-w-max

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

listItem

Row entry in the standalone list. Empty by default so the consumer can supply its own row chrome; the chip recipe lives on ModelActionForm.listItem.

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

nonFieldErrorBlock

Non-field error block passthrough. Empty by default; the structured per-field validation alert below covers most cases, and consumers can opt into a richer block when they need free-form server errors above the form.

Default classes:

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

validation

Structured per-field validation alert rendered when formContext.state.anyError is set and at least one field carries an error. Destructive 6%-mix fill with a destructive-tinted border; tone tracks danger via data-tone="danger" on the alert root so future skins can route through group-data-[tone=danger]/action-form-validation: variants.

Default classes:

flex items-start gap-3 p-3 mb-2
rounded-vueda-card hairline [--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)]
bg-[color-mix(in_oklab,var(--destructive)_6%,transparent)]

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

validationIcon

Destructive 36 px icon tile leading the validation alert. Matches the icon-tile recipe used on the ModelActionForm.bannerIcon banner so the two destructive surfaces read as siblings.

Default classes:

flex items-center justify-center shrink-0
w-9 h-9 rounded-full bg-destructive text-destructive-foreground
text-[18px] leading-none

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

validationBody

Inner body column inside the validation alert (title, description, bullet list). min-w-0 lets the bullet list ellipsize a long field message instead of pushing the alert wider.

Default classes:

flex flex-col gap-1 min-w-0

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

validationTitle

Validation alert title. 14 px / 600 / foreground; carries the "Fix these to continue" headline copy.

Default classes:

text-[14px] font-semibold leading-[1.3] text-foreground

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

validationDesc

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

Default classes:

text-[12px] font-normal leading-[1.5] text-muted-foreground

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

validationList

Tight unmarked list of per-field errors. Removes the default <ul> margin and bullet glyph since the row itself carries the field / message pairing.

Default classes:

flex flex-col gap-0.5 m-0 mt-1 p-0 list-none

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

validationListItem

One row in the validation list: mono field name beside the human-readable message. Baseline-aligned so descenders stay even with the field label.

Default classes:

flex items-baseline gap-2 text-[12px] leading-[1.5]

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

validationField

Field-name fragment in a validation row. Mono / 11.5 px / 500 / foreground; shrink-0 keeps the name from wrapping when the message is long.

Default classes:

font-mono text-[11.5px] font-medium text-foreground shrink-0

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

validationMsg

Human-readable message fragment in a validation row. 12 px / muted-foreground so the field name reads as the primary token and the message as supporting copy.

Default classes:

text-[12px] font-normal text-muted-foreground

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