ButtonGroup

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

The segmented-cluster shell. Strips inner radii between adjacent children so a row (or column when orientation is vertical) of buttons, inputs, and Select triggers reads as one slab. Outline buttons use DPR-aware inset hairlines rather than layout borders, so adjacent outline buttons overlap by exactly --vueda-hairline-width to share one visible seam. Focus z-index promotion keeps the focus ring from being clipped by neighbours. Nested ButtonGroup children retain an 8px gap. The icon-only-stays-seamless / text-or-mixed-keeps-seams rule is applied by the component, not this slot.

Vue component: ButtonGroup

Slot	Default classes	Description
root	callback	The segmented-cluster shell. Strips inner radii between adjacent children so a row (or column when orientation is vertical) of buttons, inputs, and Select triggers reads as one slab. Outline buttons use DPR-aware inset hairlines rather than layout borders, so adjacent outline buttons overlap by exactly --vueda-hairline-width to share one visible seam. Focus z-index promotion keeps the focus ring from being clipped by neighbours. Nested ButtonGroup children retain an 8px gap. The icon-only-stays-seamless / text-or-mixed-keeps-seams rule is applied by the component, not this slot.

root

The segmented-cluster shell. Strips inner radii between adjacent children so a row (or column when orientation is vertical) of buttons, inputs, and Select triggers reads as one slab. Outline buttons use DPR-aware inset hairlines rather than layout borders, so adjacent outline buttons overlap by exactly --vueda-hairline-width to share one visible seam. Focus z-index promotion keeps the focus ring from being clipped by neighbours. Nested ButtonGroup children retain an 8px gap. The icon-only-stays-seamless / text-or-mixed-keeps-seams rule is applied by the component, not this slot.

Callback:

({ orientation }) => ({
            class: [
                // Layout and child focus handling.
                "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative",

                // Child sizing and nested groups.
                "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",

                // Orientation classes.
                {
                    "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot=button][data-emphasis=outline]:not(:first-child)]:-ml-[var(--vueda-hairline-width)]":
                        !orientation || orientation === "horizontal",
                    "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot=button][data-emphasis=outline]:not(:first-child)]:-mt-[var(--vueda-hairline-width)]":
                        orientation === "vertical",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/controls/ButtonGroup.theme.js:18