FieldSetTabularInline

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

Card shell for tabular inline editing, including nested-fieldset inset chrome.

Vue component: FieldSetTabularInline

Slot	Default classes	Description
root	2 classes	Card shell for tabular inline editing, including nested-fieldset inset chrome.
inner	flex flex-col	Unpadded vertical stack so the embedded grid can merge with the card edge.
hr	hidden	Legacy divider slot kept hidden because the title bar owns the separator.
titleBar	4 classes	Eyebrow title bar for tabular inline fieldsets. See also: FieldSetStackedInline.titleBar.
titleBarToggle	4 classes	Interactive state layer for a hidable tabular title bar. See also: FieldSetStackedInline.titleBarToggle.
toggleIndicator	2 classes	Chevron container that rotates when the tabular fieldset collapses.
title		Title text slot inside the tabular title bar.
actionBar	2 classes	Trailing action group in the title bar.
itemActionBar	2 classes	Row action group used by the embedded grid action column.
body	flex flex-col	Grid body wrapper that stamps data-flush so ObjectsGrid.root drops duplicate chrome.
objectsGrid	w-full	Embedded objects grid host.
objectsGridHidden	hidden	Hidden grid state used when the empty invitation replaces the tabular body.
destroyPill	5 classes	Compact destructive status pill shown on rows marked for destroy.
field	min-w-1	Wrapper around each field rendered for card-mode tabular rows.
fieldInner		Pass-through wrapper immediately inside a rendered tabular field.
createButton		Pass-through hook for the Create action. Button styling comes from Button.
inLineCreateButton	!w-full h-full	Full-width inline create affordance used by row-shaped invitations.
toggleButton		Pass-through hook for a separate hide/show button. The title bar is the canonical toggle surface.
createButtonCard	border-dashed	Card-mode create invitation gets dashed chrome to read as an empty row affordance.
choresPanel	3 classes	Fieldset-level help and validation panel below the embedded grid.
emptyState	3 classes	Dashed invitation block used when no tabular rows exist. See also: FieldSetStackedInline.emptyState.
emptyStateIcon	3 classes	Muted icon disc inside the tabular empty-state invitation.
emptyStateTitle	text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground	Short empty-state headline for tabular inline rows.
emptyStateDesc	2 classes	Supporting empty-state hint copy for tabular inline rows.
themeOverride		Component-local override that gives embedded grid cells enough minimum width inside fieldsets.

root

Card shell for tabular inline editing, 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/FieldSetTabularInline.theme.js:18

inner

Unpadded vertical stack so the embedded grid can merge with the card edge.

Default classes:

flex flex-col

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

hr

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

Default classes:

hidden

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

titleBar

Eyebrow title bar for tabular inline fieldsets. See also: FieldSetStackedInline.titleBar.

Default classes:

flex items-center gap-2 2xs:gap-3 px-3 py-2 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/FieldSetTabularInline.theme.js:34

titleBarToggle

Interactive state layer for a hidable tabular title bar. See also: FieldSetStackedInline.titleBarToggle.

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/FieldSetTabularInline.theme.js:43

toggleIndicator

Chevron container that rotates when the tabular 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/FieldSetTabularInline.theme.js:52

title

Title text slot inside the tabular title bar.

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

actionBar

Trailing action group in the title bar.

Default classes:

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

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

itemActionBar

Row action group used by the embedded grid action column.

Default classes:

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

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

body

Grid body wrapper that stamps data-flush so ObjectsGrid.root drops duplicate chrome.

Default classes:

flex flex-col

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

objectsGrid

Embedded objects grid host.

Default classes:

w-full

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

objectsGridHidden

Hidden grid state used when the empty invitation replaces the tabular body.

Default classes:

hidden

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

destroyPill

Compact destructive status pill shown on rows marked for destroy.

Default classes:

inline-flex items-center justify-center shrink-0
px-1.5 h-5 rounded-vueda-control
bg-destructive/10 text-destructive
text-[10px] font-semibold uppercase tracking-[0.06em] leading-none
[font-variant-numeric:tabular-nums]

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

field

Wrapper around each field rendered for card-mode tabular rows.

Default classes:

min-w-1

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

fieldInner

Pass-through wrapper immediately inside a rendered tabular field.

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

createButton

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

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

inLineCreateButton

Full-width inline create affordance used by row-shaped invitations.

Default classes:

!w-full h-full

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

toggleButton

Pass-through hook for a separate hide/show button. The title bar is the canonical toggle surface.

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

createButtonCard

Card-mode create invitation gets dashed chrome to read as an empty row affordance.

Default classes:

border-dashed

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

choresPanel

Fieldset-level help and validation panel below the embedded grid.

Default classes:

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/FieldSetTabularInline.theme.js:117

emptyState

Dashed invitation block used when no tabular rows exist. See also: FieldSetStackedInline.emptyState.

Default classes:

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

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

emptyStateIcon

Muted icon disc inside the tabular 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/FieldSetTabularInline.theme.js:133

emptyStateTitle

Short empty-state headline for tabular inline rows.

Default classes:

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

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

emptyStateDesc

Supporting empty-state hint copy for tabular inline rows.

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/FieldSetTabularInline.theme.js:145

themeOverride

Component-local override that gives embedded grid cells enough minimum width inside fieldsets.

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