SortChip

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

Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint.

Vue component: SortChip

Slot	Default classes	Description
root	3 classes	Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint.
label	callback	Label segment: field label and direction glyph. Clicking it flips direction. Stretches to full pill height so the hover target covers the pill. Carries the left pill radius only when no leading ordinal is shown.
handle	2 classes	Drag handle (.drag-handle, grab cursor): a grip glyph plus the priority ordinal. Leftmost segment carrying the left pill radius. Shown only with more than one sort, so it is also the reorder affordance for touch (no hover needed to discover it).
grip	leading-none opacity-70	Grip glyph inside the handle. The visible drag affordance; sized down to read as chrome beside the ordinal.
ordinal	font-mono text-[length:var(--vueda-text-micro)] font-medium tabular-nums text-muted-foreground	Priority ordinal. Mono and muted: it is positional read-out, and ordering priority is the one thing a sort chip carries that a filter chip does not.
field	font-semibold	Field label segment.
direction	text-muted-foreground	Direction glyph. Rendered descending by default; the SFC rotates it 180deg for ascending.
divider	h-4 w-hairline bg-border	Hairline divider between the label and the remove control.
remove	inline-flex items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:bg-accent hover:opacity-100	Remove segment (the trailing dismiss control). Carries the right pill radius; stretches to full pill height to match the label hover target.

root

Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint.

Default classes:

inline-flex items-center rounded-full hairline hairline-border-strong bg-card text-xs font-semibold text-foreground
[&.sortable-ghost]:opacity-40
[&.sortable-drag]:cursor-grabbing [&.sortable-drag]:hairline-primary [&.sortable-drag]:bg-primary/10 [&.sortable-drag]:text-primary

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

label

Label segment: field label and direction glyph. Clicking it flips direction. Stretches to full pill height so the hover target covers the pill. Carries the left pill radius only when no leading ordinal is shown.

Callback:

({ showOrdinal }) => [
                "inline-flex items-center self-stretch gap-1.5 py-1 pr-2 hover:bg-accent",
                showOrdinal ? "pl-1.5" : "rounded-l-full pl-2.5",
            ]

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

handle

Drag handle (.drag-handle, grab cursor): a grip glyph plus the priority ordinal. Leftmost segment carrying the left pill radius. Shown only with more than one sort, so it is also the reorder affordance for touch (no hover needed to discover it).

Default classes:

drag-handle inline-flex items-center self-stretch gap-0.5 rounded-l-full cursor-grab select-none py-1 pl-2 pr-1
text-[length:var(--vueda-text-micro)] text-muted-foreground hover:bg-accent

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

grip

Grip glyph inside the handle. The visible drag affordance; sized down to read as chrome beside the ordinal.

Default classes:

leading-none opacity-70

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

ordinal

Priority ordinal. Mono and muted: it is positional read-out, and ordering priority is the one thing a sort chip carries that a filter chip does not.

Default classes:

font-mono text-[length:var(--vueda-text-micro)] font-medium tabular-nums text-muted-foreground

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

field

Field label segment.

Default classes:

font-semibold

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

direction

Direction glyph. Rendered descending by default; the SFC rotates it 180deg for ascending.

Default classes:

text-muted-foreground

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

divider

Hairline divider between the label and the remove control.

Default classes:

h-4 w-hairline bg-border

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

remove

Remove segment (the trailing dismiss control). Carries the right pill radius; stretches to full pill height to match the label hover target.

Default classes:

inline-flex items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:bg-accent hover:opacity-100

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