SidebarMenuButtonChild

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

Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width.

Vue component: SidebarMenuButtonChild

Slot	Default classes	Description
root	callback	Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width.

root

Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width.

Callback:

({ variant, size }) => ({
            class: [
                // Layout and spacing.
                "peer/menu-button relative flex w-full items-center gap-2 rounded-vueda-control p-2 text-left text-sm",

                // Interactive states.
                "transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                "focus-visible:focus-ring focus-visible:focus-ring-sidebar active:bg-sidebar-accent-active active:text-sidebar-accent-foreground",

                // Disabled and action states.
                "disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8",
                "aria-disabled:pointer-events-none aria-disabled:opacity-50",

                // Active and open states.
                "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
                "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",

                // Collapsed state.
                "group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!",

                // Icons and child elements.
                "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",

                // Active rail.
                "data-[active=true]:before:absolute data-[active=true]:before:inset-y-0 data-[active=true]:before:left-0",
                "data-[active=true]:before:w-(--vueda-sidebar-active-rail) data-[active=true]:before:bg-sidebar-primary data-[active=true]:before:content-['']",
                "group-data-[collapsible=icon]:data-[active=true]:before:hidden",
                "data-[active=true]:[&>svg]:text-sidebar-primary",

                // Variant classes. The neutral hover (bg / text) is applied
                // unconditionally above, so only the outline-specific surface and
                // hairline edge (with its hover recolour) are expressed per-variant here.
                {
                    "bg-background hairline [--vueda-hairline-color:var(--sidebar-border)] hover:[--vueda-hairline-color:var(--sidebar-accent)]":
                        variant === "outline",
                },

                // Size classes. Default text size (text-sm) comes from the base above;
                // only the sm tier overrides it (text-xs).
                {
                    "h-8": !size || size === "default",
                    "h-7 text-xs": size === "sm",
                    "h-12 group-data-[collapsible=icon]:p-0!": size === "lg",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/navigation/SidebarMenuButtonChild.theme.js:16