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. With page, the cap moves to ActionForm.content, so the sticky action bar spans the page.

Vue component: ActionForm

Slot	Default classes	Description
root	callback	Outer wrapper. Caps content at the 7xl content column so a confirmation form does not stretch the full width of a wide viewport. With page, the cap moves to ActionForm.content, so the sticky action bar spans the page.
content	callback	Wrapper around the error display, the validation summary, and the form. Without page it adds no box (display: contents). With page, it is the page body under the sticky action bar: px-5 py-5 sets the gutter shared with ViewRead.body and ViewUpdate.body, and max-w-7xl caps the content column.
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.
stickyButtons	flex flex-row flex-wrap items-center gap-1 2xl:gap-2 w-full	Action row used in place of ActionForm.buttons when page moves the bar into a StickyBar. Wraps like the detail views' action bar and drops the strip's own hairline, tint, and padding, which the StickyBar supplies.
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		Form-scope feedback block above the fields: the non-field error alert, the structured validation alert for field errors no rendered field shows, and the non-field warning alert. Empty by default, so the alerts are spaced by their own vertical margins; 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 above the fields when formContext.state.anyError is set and at least one field error has no rendered field showing it beside the input. 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. With page, the cap moves to ActionForm.content, so the sticky action bar spans the page.

Callback:

({ page }) => (page ? [] : ["max-w-7xl"])

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

content

Wrapper around the error display, the validation summary, and the form. Without page it adds no box (display: contents). With page, it is the page body under the sticky action bar: px-5 py-5 sets the gutter shared with ViewRead.body and ViewUpdate.body, and max-w-7xl caps the content column.

Callback:

({ page }) => (page ? ["px-5 py-5 max-w-7xl"] : ["contents"])

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

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:25

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:29

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:33

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:37

stickyButtons

Action row used in place of ActionForm.buttons when page moves the bar into a StickyBar. Wraps like the detail views' action bar and drops the strip's own hairline, tint, and padding, which the StickyBar supplies.

Default classes:

flex flex-row flex-wrap items-center gap-1 2xl:gap-2 w-full

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

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:50

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:54

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:58

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:62

nonFieldErrorBlock

Form-scope feedback block above the fields: the non-field error alert, the structured validation alert for field errors no rendered field shows, and the non-field warning alert. Empty by default, so the alerts are spaced by their own vertical margins; 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:66

validation

Structured per-field validation alert rendered above the fields when formContext.state.anyError is set and at least one field error has no rendered field showing it beside the input. 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 my-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:70

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:78

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:86

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:90

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:94

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:98

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:102

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:106

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:110