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 a host's own card. Renders `display: contents`, which suppresses this form's own card chrome and tone scope.
card	callback	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. With `page`, the same element drops the card chrome and only stacks the banner and body, because the view's gutter and the page title frame the page.
banner	callback	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. With `page`, the banner is an unframed row: the icon tile carries the tone, and the page supplies the spacing.
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	callback	Card body region beneath the banner. Holds the selected-objects panel, confirm prompt, and extra-fields stack with a 12 px gap between sections. With `page`, the body drops its padding and uses the view's gutter.
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	4 classes	Selected-objects panel: tinted-muted background, hairline, card radius. Tone routing tints the panel destructive when this form's own `group/model-action-form` scope is 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	callback	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. With `page`, the prompt is plain text, so the selected-records panel stays the page's one framed block.
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	5 classes	One chip in the selected-objects strip: label + mono PK on a card-toned background with a hairline border. Tints destructive in 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	2 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 a host's own card. Renders display: contents, which suppresses this form's own card chrome and tone scope.

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. With page, the same element drops the card chrome and only stacks the banner and body, because the view's gutter and the page title frame the page.

Callback:

javascript

({ page }) =>
                page
                    ? ["group/model-action-form", "flex flex-col gap-4"]
                    : [
                          "group/model-action-form",
                          "rounded-vueda-card border-hairline bg-card overflow-hidden",

                          // info (default)
                          "data-[tone=info]:border-border",
                          "data-[tone=info]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--ring)_8%,transparent)]",

                          // success
                          "data-[tone=success]:border-success/50",
                          "data-[tone=success]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--success)_8%,transparent)]",

                          // warning
                          "data-[tone=warning]:border-warning/50",
                          "data-[tone=warning]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--warning)_8%,transparent)]",

                          // danger
                          "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

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. With page, the banner is an unframed row: the icon tile carries the tone, and the page supplies the spacing.

Callback:

javascript

({ page }) =>
            page
                ? { class: ["flex items-start gap-3"] }
                : {
                      composes: ["_ActionBanner.banner"],
                      class: [
                          // info
                          "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)]",
                          // success
                          "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)]",
                          // warning
                          "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)]",
                          // danger
                          "group-data-[tone=danger]/model-action-form:border-destructive/20",
                          "group-data-[tone=danger]/model-action-form:bg-destructive/[0.06]",
                      ],
                  }

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

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:

text

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

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

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

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

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:

text

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

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. With page, the body drops its padding and uses the view's gutter.

Callback:

javascript

({ page }) => (page ? ["flex flex-col gap-3"] : ["p-4 flex flex-col gap-3"])

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

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

selectedObjects

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

Default classes:

text

rounded-vueda-card bg-muted/25 hairline hairline-border p-3
flex flex-col gap-2
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:121

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

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:

text

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

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

selectedObjectsLabel

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

Default classes:

text

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

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. With page, the prompt is plain text, so the selected-records panel stays the page's one framed block.

Callback:

javascript

({ page }) =>
                page
                    ? ["flex flex-col gap-1.5"]
                    : [
                          "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:147

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

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

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

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

listItem

One chip in the selected-objects strip: label + mono PK on a card-toned background with a hairline border. Tints destructive in this form's own danger scope; neutral otherwise.

Default classes:

text

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]/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:175

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

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

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

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

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

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:

text

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

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

ModelActionForm ​

root ​

bare ​

card ​

banner ​

bannerIcon ​

bannerBody ​

bannerTitle ​

bannerDesc ​

bannerMeta ​

body ​

inner ​

selectedObjects ​

selectedHead ​

selectedHeadCount ​

selectedObjectsLabel ​

message ​

messageText ​

extraFields ​

buttons ​

list ​

listItem ​

listItemLabel ​

listItemPk ​

nonFieldErrorBlock ​

confirmWarningGroup ​

confirmWarningLabel ​

ModelActionForm

root

bare

card

banner

bannerIcon

bannerBody

bannerTitle

bannerDesc

bannerMeta

body

inner

selectedObjects

selectedHead

selectedHeadCount

selectedObjectsLabel

message

messageText

extraFields

buttons

list

listItem

listItemLabel

listItemPk

nonFieldErrorBlock

confirmWarningGroup

confirmWarningLabel