FilterChip

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

Pill container. Primary tint at rest; destructive tint flags a value the server rejected.

Vue component: FilterChip

Slot	Default classes	Description
root	callback	Pill container. Primary tint at rest; destructive tint flags a value the server rejected.
label	callback	Label segment: clicking it opens the edit popover. Carries the left pill radius. Stretches to the chip's full height so the hover target covers the full pill height.
divider	callback	Hairline divider between the label and the remove control.
remove	callback	Remove segment (the trailing dismiss control). Carries the right pill radius. Stretches to the chip's full height so the hover target matches the label segment.
popover	sm:min-w-[25%]	Edit-popover surface width floor for the embedded filter form.

root

Pill container. Primary tint at rest; destructive tint flags a value the server rejected.

Callback:

({ errored }) => [
                "inline-flex items-center rounded-full hairline text-xs font-semibold",
                errored
                    ? "[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)] bg-destructive/10 text-destructive"
                    : "[--vueda-hairline-color:color-mix(in_oklab,var(--primary)_30%,transparent)] bg-primary/10 text-primary",
            ]

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

label

Label segment: clicking it opens the edit popover. Carries the left pill radius. Stretches to the chip's full height so the hover target covers the full pill height.

Callback:

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

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

divider

Hairline divider between the label and the remove control.

Callback:

({ errored }) => ["h-4 w-hairline", errored ? "bg-destructive/30" : "bg-primary/30"]

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

remove

Remove segment (the trailing dismiss control). Carries the right pill radius. Stretches to the chip's full height so the hover target matches the label segment.

Callback:

({ errored }) => [
                "inline-flex items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:opacity-100",
                errored ? "hover:bg-destructive/15" : "hover:bg-primary/15",
            ]

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

popover

Edit-popover surface width floor for the embedded filter form.

Default classes:

sm:min-w-[25%]

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