FilterGroup

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

Root wrapper. contents so it adds no box of its own: the teleported menu trigger and the chips strip flow as direct children of the list layout.

Vue component: FilterGroup

Slot	Default classes	Description
root	contents	Root wrapper. contents so it adds no box of its own: the teleported menu trigger and the chips strip flow as direct children of the list layout.
strip	2 classes	Active-filter chips strip. Muted tint a tier below the card-toned toolbar; only rendered when filters are active. Shares the px-5 py-[10px] page-chrome rhythm and carries a bottom hairline.
subgroup	flex flex-wrap items-center gap-2	Bare chips group used when hosted inside a shared ConstraintsBar: the band chrome (border, tint, padding) belongs to the host, so this carries only the flex layout for the eyebrow and chips.
eyebrow	2 classes	"Filters" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against --muted-foreground.
clear	ml-auto text-xs	Clear-all control, pushed to the right edge of the chips strip.
messageWrapper	w-full flex my-2	Error message area, rendered only when a list filter error is present (so it reserves no margin when empty).

root

Root wrapper. contents so it adds no box of its own: the teleported menu trigger and the chips strip flow as direct children of the list layout.

Default classes:

contents

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

strip

Active-filter chips strip. Muted tint a tier below the card-toned toolbar; only rendered when filters are active. Shares the px-5 py-[10px] page-chrome rhythm and carries a bottom hairline.

Default classes:

w-full flex flex-wrap items-center gap-2 px-5 py-[10px]
border-b-hairline bg-[color-mix(in_oklab,var(--muted)_25%,var(--card))] text-foreground

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

subgroup

Bare chips group used when hosted inside a shared ConstraintsBar: the band chrome (border, tint, padding) belongs to the host, so this carries only the flex layout for the eyebrow and chips.

Default classes:

flex flex-wrap items-center gap-2

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

eyebrow

"Filters" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against --muted-foreground.

Default classes:

text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
text-muted-foreground leading-none

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

clear

Clear-all control, pushed to the right edge of the chips strip.

Default classes:

ml-auto text-xs

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

messageWrapper

Error message area, rendered only when a list filter error is present (so it reserves no margin when empty).

Default classes:

w-full flex my-2

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