FieldSetStackedInline

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

Card shell for stacked inline rows, including nested-fieldset inset chrome.

Vue component: FieldSetStackedInline

Slot	Default classes	Description
root	2 classes	Card shell for stacked inline rows, including nested-fieldset inset chrome.
inner	flex flex-col p-3 gap-2	Padded vertical stack that holds the title bar, row list, chores panel, and empty state.
hr	hidden	Legacy divider slot kept hidden because the title bar owns the fieldset separator.
titleBar	4 classes	Eyebrow title bar containing the disclosure trigger and a separate Create action.
titleTrigger	flex flex-1 min-w-0 items-center gap-2 2xs:gap-3 text-left [font:inherit] [text-transform:inherit] tracking-[inherit] -ml-3 -my-2 px-3 py-2 self-stretch	Disclosure label and chevron, beside the independent Create action.
titleBarToggle	4 classes	Interactive state layer for hidable title bars.
toggleIndicator	2 classes	Chevron container that rotates when the fieldset collapses.
title		Title text slot inside the title bar.
field	min-w-1	Wrapper around each rendered child field inside a stacked row.
inlineRows	flex flex-col gap-2	Vertical list of inline object rows.
inlineRow		Pass-through hook for each rendered row component. Row chrome lives on FieldSetStackedInlineRow.root.
inLineCreateButton	!w-full h-full	Full-width inline create affordance used when a row-shaped invitation is rendered.
toggleButton		Pass-through hook for the hide/show button when consumers render it separately.
actionBar	2 classes	Trailing action group beside the disclosure trigger.
itemActionBar	2 classes	Row-level action group for create, destroy, or selection controls.
createButton		Pass-through hook for the Create action. Button styling comes from Button.
choresPanel	3 classes	Fieldset-level help and validation panel below the row stack.
emptyState	3 classes	Dashed invitation block used when no inline rows exist.
emptyStateIcon	3 classes	Muted icon disc inside the empty-state invitation.
emptyStateTitle	text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground	Short empty-state headline.
emptyStateDesc	2 classes	Supporting empty-state hint copy.

root

Card shell for stacked inline rows, including nested-fieldset inset chrome.

Default classes:

bg-card border-hairline rounded-vueda-card overflow-clip
[[data-vueda-fieldset]_&]:border-0 [[data-vueda-fieldset]_&]:shadow-[inset_0_0_0_var(--vueda-hairline-width)_var(--border)]

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:18

inner

Padded vertical stack that holds the title bar, row list, chores panel, and empty state.

Default classes:

flex flex-col p-3 gap-2

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:26

hr

Legacy divider slot kept hidden because the title bar owns the fieldset separator.

Default classes:

hidden

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:30

titleBar

Eyebrow title bar containing the disclosure trigger and a separate Create action.

Default classes:

flex items-center gap-2 2xs:gap-3 px-3 py-2 -mx-3 -mt-3 mb-1 border-b-hairline
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em] leading-none
text-muted-foreground
[[data-vueda-fieldset]_&]:bg-[color-mix(in_oklab,var(--muted)_20%,var(--card))]

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:34

titleTrigger

Disclosure label and chevron, beside the independent Create action.

Default classes:

flex flex-1 min-w-0 items-center gap-2 2xs:gap-3 text-left [font:inherit] [text-transform:inherit] tracking-[inherit] -ml-3 -my-2 px-3 py-2 self-stretch

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:46

titleBarToggle

Interactive state layer for hidable title bars.

Default classes:

cursor-pointer select-none
hover:bg-accent hover:text-accent-foreground active:bg-accent-active active:text-accent-foreground
focus-visible:focus-ring-shadow
transition-colors

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:52

toggleIndicator

Chevron container that rotates when the fieldset collapses.

Default classes:

inline-flex items-center justify-center shrink-0 size-4
transition-transform duration-150

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:61

title

Title text slot inside the title bar.

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:65

field

Wrapper around each rendered child field inside a stacked row.

Default classes:

min-w-1

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:69

inlineRows

Vertical list of inline object rows.

Default classes:

flex flex-col gap-2

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:76

inlineRow

Pass-through hook for each rendered row component. Row chrome lives on FieldSetStackedInlineRow.root.

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:80

inLineCreateButton

Full-width inline create affordance used when a row-shaped invitation is rendered.

Default classes:

!w-full h-full

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:82

toggleButton

Pass-through hook for the hide/show button when consumers render it separately.

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:86

actionBar

Trailing action group beside the disclosure trigger.

Default classes:

grow-0 flex gap-1 2xs:gap-2 2xl:gap-4
ml-auto

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:90

itemActionBar

Row-level action group for create, destroy, or selection controls.

Default classes:

flex gap-1 2xs:gap-2 2xl:gap-4
items-baseline

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:94

createButton

Pass-through hook for the Create action. Button styling comes from Button.

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:98

choresPanel

Fieldset-level help and validation panel below the row stack.

Default classes:

-mx-3 -mb-3 px-3 py-2 border-t-hairline
bg-[color-mix(in_oklab,var(--muted)_15%,var(--card))]
flex flex-col gap-1

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:102

emptyState

Dashed invitation block used when no inline rows exist.

Default classes:

flex flex-col items-center justify-center gap-2
py-8 px-6 text-center
rounded-vueda-card border-2 border-dashed bg-muted/30

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:110

emptyStateIcon

Muted icon disc inside the empty-state invitation.

Default classes:

flex items-center justify-center
size-9 rounded-full bg-muted text-muted-foreground
text-[length:var(--vueda-text-title)] leading-none

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:118

emptyStateTitle

Short empty-state headline.

Default classes:

text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:126

emptyStateDesc

Supporting empty-state hint copy.

Default classes:

text-[length:var(--vueda-text-supporting)] font-normal leading-normal
text-muted-foreground max-w-[44ch]

Source: client/lib/theme/vueda-tailwind/form/FieldSetStackedInline.theme.js:130