Cannot set class of `main` area in `navset_card_tab()`

If you want to put a fill item inside the card body of a navset_card_tab() or navset_card_pill() when the navset card has a global sidebar, it turns out to be quite hard to get right.

The default looks like this:

plot_output_fill <- function() {
  x <- div(
    style = css(
      background_color = "#216B7288",
      width = "100%",
      height = "400px"
    )
  )
  as_fill(x)
}

navs_tab_card(
  sidebar = sidebar("global sidebar"),
  nav("One", plot_output_fill(), fillable = TRUE)
)

To get it to look right, you need to add the p-0 class in two places.

navs_tab_card(
  sidebar = sidebar("global sidebar"),
  nav("One", plot_output_fill(), fillable = TRUE)
) |>
  tagAppendAttributes(
    class = "p-0",
    .cssSelector = ".bslib-sidebar-layout > .main"
  ) |>
  tagAppendAttributes(
    class = "p-0",
    .cssSelector = ".tab-pane > .card-body.html-fill-item"
  )

And actually that's even kind of a lie. The .bslib-sidebar-layout > .main selector will actually match any main content areas from a sidebar layout within the card. The correct selector is .card > .bslib-sidebar-layout > .main, but that's not supported by tagAppendAttributes() (yet?).

A class argument to layout_sidebar(), is passed to the main content area, but in navset_card_*(), or in navset_*() functions in general, named arguments are disallowed.

navs_tab_card(
  sidebar = sidebar("global sidebar"),
  class = "NAVSET-CARD-BODY-CLASS",
  nav("One", plot_output_fill(), fillable = TRUE)
)
#> Error in buildTabset(..., ulClass = paste0("nav nav-", type), id = id, : 
#> Tabs should all be unnamed arguments, but some are named: class

Classes that you add in other places all go to the wrong container.

html_structure <- function(tags) {
  x <- xml2::read_html(format(tags))
  text_nodes <- xml2::xml_find_all(x, "//text()")
  xml2::xml_remove(text_nodes)
  x %>%
    xml2::xml_find_first("//body") |>
    xml2::xml_child() |>
    xml2::html_structure()
}

navs_tab_card(
  sidebar = sidebar("global sidebar"),
  nav(
    "One",
    class = "NAV-CLASS",
    card_body(
      class = "NAV-CARD-BODY-CLASS",
      plot_output_fill()
    )
  )
) |> html_structure()
#> <div.card.bslib-card.html-fill-item.html-fill-container [data-require-bs-caller, data-require-bs-version]>
#>   <div.card-header>
#>     <!-- snip -->
#>   <div.bslib-sidebar-layout.html-fill-item [data-bslib-sidebar-border, data-require-bs-caller, data-require-bs-version, data-sidebar-init-auto-collapse, style]>
#>     <div.main.html-fill-container [role]>
#>       <div.tab-content.html-fill-item.html-fill-container [data-tabsetid]>
#>         <div#tab-1735-1 .tab-pane.NAV-CLASS.active.html-fill-item.html-fill-container [data-value]>
#>           <div.card-body.html-fill-item.html-fill-container.NAV-CARD-BODY-CLASS [style]>
#>             <div.html-fill-item [style]>
#>     <div#bslib-sidebar-4475 .sidebar [role]>
#>     <button.collapse-toggle [type, title, aria-expanded, aria-controls]>

Start at the navs_tab_card and navset_card_* entry points, then compare how layout_sidebar passes a class to its main content area. The change is done when the card navset allows the main content area to receive a class without CSS selectors or named-tab arguments, and the fill layout renders correctly with a global sidebar.