SortGroup

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

Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the page-chrome rhythm and carries a bottom hairline.

Vue component: SortGroup

Slot	Default classes	Description
strip	2 classes	Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the 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.
draggable	flex flex-wrap items-center gap-2	Drag-reorder container holding the sort chips; lays them out in the same flowing row as the strip so the wrapper adds no visual seam.
dragging	2 classes	Applied to the chips row only while a drag is in progress. Forces the grab-in-progress cursor on every handle and suppresses the per-handle hover background, so the chip that slides under the pointer (taking the dragged chip's old slot) does not read as the active handle.
eyebrow	2 classes	"Sort" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against --muted-foreground.
clear	ml-auto text-xs	Reset-sort control, pushed to the right edge of the chips strip.

strip

Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the 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(--sunken)_50%,var(--card))] text-foreground

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

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/display/SortGroup.theme.js:24

draggable

Drag-reorder container holding the sort chips; lays them out in the same flowing row as the strip so the wrapper adds no visual seam.

Default classes:

flex flex-wrap items-center gap-2

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

dragging

Applied to the chips row only while a drag is in progress. Forces the grab-in-progress cursor on every handle and suppresses the per-handle hover background, so the chip that slides under the pointer (taking the dragged chip's old slot) does not read as the active handle.

Default classes:

[&_.drag-handle]:cursor-grabbing
[&_.drag-handle:hover]:bg-transparent

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

eyebrow

"Sort" 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/display/SortGroup.theme.js:36

clear

Reset-sort control, pushed to the right edge of the chips strip.

Default classes:

ml-auto text-xs

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