InputGroupButton

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

Pressable addon inside an InputGroup.root. Sized smaller than a standalone Button.root (xs, sm, plus icon-xs / icon-sm) so the button fits inside the input shell without breaking the row's h-vueda-control baseline. Shadow is suppressed because the group already carries shadow-vueda-control; an inset button drawing its own shadow would double-paint at the addon edge. The xs and icon-xs tiers use a tighter rounded-[calc(var(--radius)-5px)] so a 24px button reads as a chip inside a 32px shell rather than a miniature slab.

Vue component: InputGroupButton

Slot	Default classes	Description
root	callback	Pressable addon inside an InputGroup.root. Sized smaller than a standalone Button.root (xs, sm, plus icon-xs / icon-sm) so the button fits inside the input shell without breaking the row's h-vueda-control baseline. Shadow is suppressed because the group already carries shadow-vueda-control; an inset button drawing its own shadow would double-paint at the addon edge. The xs and icon-xs tiers use a tighter rounded-[calc(var(--radius)-5px)] so a 24px button reads as a chip inside a 32px shell rather than a miniature slab.

root

Pressable addon inside an InputGroup.root. Sized smaller than a standalone Button.root (xs, sm, plus icon-xs / icon-sm) so the button fits inside the input shell without breaking the row's h-vueda-control baseline. Shadow is suppressed because the group already carries shadow-vueda-control; an inset button drawing its own shadow would double-paint at the addon edge. The xs and icon-xs tiers use a tighter rounded-[calc(var(--radius)-5px)] so a 24px button reads as a chip inside a 32px shell rather than a miniature slab.

Callback:

({ size }) => ({
            class: [
                // Base classes. Gap is per-size (xs/sm); icon tiers need no gap.
                "text-sm shadow-none flex items-center",

                // Size classes. The tighter chip radius (xs + icon-xs) and zero padding
                // (icon-xs + icon-sm) are hoisted to their own keys so a sibling branch's
                // `false` cannot clear them (combineClasses last-write-wins).
                {
                    "h-6 gap-1 px-2 [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2": !size || size === "xs",
                    "h-vueda-control-sm px-vueda-control-px-sm gap-1.5 rounded-vueda-field has-[>svg]:px-vueda-control-px-sm":
                        size === "sm",
                    "size-6": size === "icon-xs",
                    "size-vueda-control-sm": size === "icon-sm",
                    "rounded-[calc(var(--radius)-5px)]": !size || size === "xs" || size === "icon-xs",
                    "p-0": size === "icon-xs" || size === "icon-sm",
                },
            ],
        })

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