ScopeChip

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

Pill container. Info tint with a matching hairline.

Vue component: ScopeChip

Slot	Default classes	Description
root	3 classes	Pill container. Info tint with a matching hairline.
label	callback	Label segment. Read-only; truncates a long value (such as a UUID) with an ellipsis. Carries the left pill radius, and the right one when the chip has no clear control.
divider	h-4 w-hairline shrink-0 bg-[color-mix(in_oklab,var(--info)_30%,transparent)]	Hairline divider between the label and the clear control.
remove	2 classes	Clear segment (the trailing dismiss control). Carries the right pill radius. Stretches to the chip's full height so the hover target covers the pill.

root

Pill container. Info tint with a matching hairline.

Default classes:

inline-flex max-w-full items-center rounded-full hairline text-xs font-semibold
[--vueda-hairline-color:color-mix(in_oklab,var(--info)_30%,transparent)]
bg-[color-mix(in_oklab,var(--info)_10%,transparent)] text-foreground

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

label

Label segment. Read-only; truncates a long value (such as a UUID) with an ellipsis. Carries the left pill radius, and the right one when the chip has no clear control.

Callback:

({ clearable }) => [
                "min-w-0 truncate rounded-l-full py-1 pl-2.5",
                clearable ? "pr-2" : "rounded-r-full pr-2.5",
            ]

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

divider

Hairline divider between the label and the clear control.

Default classes:

h-4 w-hairline shrink-0 bg-[color-mix(in_oklab,var(--info)_30%,transparent)]

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

remove

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

Default classes:

inline-flex shrink-0 items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:opacity-100
hover:bg-[color-mix(in_oklab,var(--info)_15%,transparent)]

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