ConstraintsBar

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

Collapse wrapper. A grid-template-rows animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.

Vue component: ConstraintsBar

Slot	Default classes	Description
collapse	3 classes	Collapse wrapper. A grid-template-rows animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.
inner	overflow-hidden min-h-0	Clipping wrapper inside the collapse grid; hides the band content while the row collapses to zero height.
root	2 classes	The band wrapper. A single flex row that the hosted filter and sort groups flow into.
divider	h-5 w-hairline self-center bg-border	Hairline divider between the filters group and the sort group; shown only when both are active.

collapse

Collapse wrapper. A grid-template-rows animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.

Default classes:

grid transition-[grid-template-rows]
duration-[var(--vueda-duration-interaction)] ease-[var(--vueda-ease-interaction)]
motion-reduce:transition-none

Source: client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:18

inner

Clipping wrapper inside the collapse grid; hides the band content while the row collapses to zero height.

Default classes:

overflow-hidden min-h-0

Source: client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:26

root

The band wrapper. A single flex row that the hosted filter and sort groups flow into.

Default classes:

w-full flex flex-wrap items-center gap-x-3 gap-y-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/display/ConstraintsBar.theme.js:30

divider

Hairline divider between the filters group and the sort group; shown only when both are active.

Default classes:

h-5 w-hairline self-center bg-border

Source: client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:37