CSS: wrapper

body[class~="instui-display-flex"] — Linha do app-shell: navegação lateral, contêiner com cabeçalho e painel opcional.

✅ Use Wrapper quando:

• Construir uma página completa do produto Canvas que precisa de um shell de layout consistente

• A página usa GlobalNav como âncora de navegação principal

• A página precisa de painéis laterais: ContentTabList, TrailingContentArea ou um UtilityPanel

• É necessário preenchimento consistente do contêiner e largura máxima de conteúdo em toda a página 🚫 Não use Wrapper quando:

• Construir um Modal, Tray ou Drawer — esses têm seus próprios contêineres de layout

• Envolver uma subseção de uma página — Wrapper contém a página inteira, não uma região

Acessibilidade

• Mapear a área principal de conteúdo para um marco <main> com um link de pular navegação para que usuários de teclado possam contornar o GlobalNav
• Dar ao ContentTabList role="navigation" com um aria-label distinto, por exemplo "Navegação da página" — separado do marco do GlobalNav
• Dar ao TrailingContentArea role="complementary" com um aria-label descritivo que reflita seu conteúdo, por exemplo "Detalhes do estudante"
• Dar a cada UtilityPanel um aria-label distinto: "Assistente de IA", "Notificações" ou "Filtros"
• Quando um UtilityPanel abrir, mover o foco para dentro do painel; quando fechar, devolver o foco ao acionador que o abriu

Uso

@import "@pantoken/plugin-layouts/layouts.css";

Estrutura

body[class~="instui-display-flex"]
  side-nav-bar (component)
  .container
    modal.header (component)
      .top
        breadcrumb (component)
        .utilities (0..1)
          button + button (component, 1..n)
      .info
        .title
        .description (0..1)
      ‹content: header› (0..1)
      .actions (0..1)
        button + button (component, 1..n)
      tabs (component, 0..1)
        tabs (component)
      .filters (0..1)
        ‹content: filters›
    drawer-layout.content (component)
      list + card (component, 0..1)
      slot[name="content"].main
      slot[name="trailing"].trailing + card (component, 0..1)
  tabs.panel (component)
    card | agent-shell (component, 0..1)

flowchart TD n0["body[class~=&quot;instui-display-flex&quot;]"]:::cssdoc-root n1(["side-nav-bar"]):::cssdoc-component n2(".container"):::cssdoc-part n3(["modal.header"]):::cssdoc-component n4(".top"):::cssdoc-part n5(["breadcrumb"]):::cssdoc-component n6(".utilities"):::cssdoc-part n7(["button + button"]):::cssdoc-component n8(".info"):::cssdoc-part n9(".title"):::cssdoc-part n10(".description"):::cssdoc-part n11[/"‹content: header›"/]:::cssdoc-slot n12(".actions"):::cssdoc-part n13(["button + button"]):::cssdoc-component n14(["tabs"]):::cssdoc-component n15(["tabs"]):::cssdoc-component n16(".filters"):::cssdoc-part n17[/"‹content: filters›"/]:::cssdoc-slot n18(["drawer-layout.content"]):::cssdoc-component n19([".list + card"]):::cssdoc-component n20("slot[name=&quot;content&quot;].main"):::cssdoc-part n21(["slot[name=&quot;trailing&quot;].trailing + card"]):::cssdoc-component n22(["tabs.panel"]):::cssdoc-component n23(["card | agent-shell"]):::cssdoc-component n0 --> n1 n4 --> n5 n6 -->|1..n| n7 n4 -.->|0..1| n6 n3 --> n4 n8 --> n9 n8 -.->|0..1| n10 n3 --> n8 n3 -.->|0..1| n11 n12 -->|1..n| n13 n3 -.->|0..1| n12 n14 --> n15 n3 -.->|0..1| n14 n16 --> n17 n3 -.->|0..1| n16 n2 --> n3 n18 -.->|0..1| n19 n18 --> n20 n18 -.->|0..1| n21 n2 --> n18 n0 --> n2 n22 -.->|0..1| n23 n0 --> n22 click n1 "/api/css/side-nav-bar.md" click n3 "/api/css/modal.header.md" click n5 "/api/css/breadcrumb.md" click n7 "/api/css/button.md" click n13 "/api/css/button.md" click n14 "/api/css/tabs.md" click n15 "/api/css/tabs.md" click n18 "/api/css/drawer-layout.content.md" click n19 "/api/css/card.md" click n21 "/api/css/card.md" click n22 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Slots

Slot	Descrição
content	Conteúdo principal da página.
filters	Conteúdo de filtros opcionais dentro do cabeçalho.
header	Slot de cabeçalho opcional abaixo da descrição da página.
panel	Conteúdo do painel de utilidades.
trailing	Conteúdo complementar de retaguarda.

Partes

Parte	Descrição
.actions	Botões de cabeçalho opcionais no final da linha superior.
.container	Coluna principal da página que contém cabeçalho e conteúdo.
.content	Região de conteúdo primária dentro da coluna do contêiner.
.description	Descrição opcional da página abaixo do título.
.filters	Região opcional de filtros dentro do cabeçalho.
.header	Região do cabeçalho dentro da coluna do contêiner.
.info	Contêiner para o título da página e descrição opcional.
.list	Coluna de navegação opcional dentro do conteúdo.
.main	Coluna de conteúdo principal dentro do conteúdo.
.panel	Região do painel de utilidades que abre no lado direito da página.
.tabs	Abas de navegação opcionais no início da linha de conteúdo.
.title	Título da página abaixo da linha superior.
.top	Linha de grade contendo breadcrumbs e utilitários.
.trailing	Coluna complementar opcional dentro do conteúdo.
.utilities	Ações de utilidade no final da linha superior.

Estados

Estado	Descrição
:optional	—

Tokens consumidos

Token	Tipo	Valor
--instui-background-color-page	—	—

Subcomponentes

• agent-shell
• breadcrumb
• button
• card
• drawer-layout.content
• list
• modal.header
• side-nav-bar
• tabs
• tabs.panel

Relacionados

• card
• agent-shell
• breadcrumb
• tabs
• button
• heading