@softize/opus 29.0.0 → 31.0.0

package/src/ui/docs/content/dialog.md

@@ -52,58 +52,19 @@ Seus filhos diretos recebem o ritmo estrutural de `1rem`. Um grupo compacto, uma
 linha declara a própria relação em um wrapper filho; `flush` fica reservado ao conteúdo que
 controla todo o inset.
 O backdrop escurece a página sem aplicar desfoque.
-O fechamento do cabeçalho usa uma ação circular neutra e sutil. `closeSize` escolhe entre `xs` e
-`sm`; o padrão é `sm`.
+O fechamento do cabeçalho usa uma ação circular neutra e sutil. `closeSize` escolhe entre `xs`,
+`sm` e `default`; o padrão é `xs` (`1,5rem`).
 O `ButtonGroup` preserva a largura natural das ações por padrão. Use `distribution="equal"`
 somente para decisões deliberadamente equivalentes. O `DialogFooter` organiza a faixa, mas não
 decide a distribuição nem a aparência dos botões.
 `DialogClose` encerra o modal sem exigir estado controlado. Use `open` e `onOpenChange` quando outra
 parte da interface também precisar controlar a abertura.
 
-## Regiões separadas ou contínuas
+## Regiões com divisores automáticos
 
-`layout` declara a anatomia da superfície inteira e fica em `DialogContent`; os slots leem esse
-valor e não o recebem. O padrão é `sectioned`: as regiões têm o mesmo recuo, o rodapé ganha uma
-faixa sutil e as fronteiras entre regiões vizinhas ganham um divisor. É o modal de tarefa, com
-cabeçalho, conteúdo e ações claramente separados.
-
-Use `layout="continuous"` para uma superfície curta, em que o espaço basta para separar as regiões
-e a linha seria um ruído — um aviso de uma frase, uma escolha rápida.
-
-```tsx preview
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">Publicar contrato</Button>
-  </DialogTrigger>
-  <DialogContent layout="continuous">
-    <DialogHeader>
-      <DialogTitle>Publicar contrato</DialogTitle>
-    </DialogHeader>
-    <DialogBody>
-      <p className="text-sm text-muted-foreground">
-        A versão publicada passa a valer para todos os consumidores.
-      </p>
-    </DialogBody>
-    <DialogFooter>
-      <ButtonGroup mode="spaced">
-        <DialogClose asChild>
-          <Button variant="ghost">Cancelar</Button>
-        </DialogClose>
-        <Button>Publicar</Button>
-      </ButtonGroup>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-Os divisores do modo seccionado são derivados da vizinhança: cada região desenha a linha quando há
-uma região do outro lado. Um cabeçalho sem corpo não fecha nada, e um cabeçalho seguido direto de um
-rodapé produz uma linha só. A tela não escreve `border-b` nem `border-t`.
-
-A faixa sutil do rodapé é a mesma no `Dialog` e no [`Drawer`](/ui/drawer): as duas famílias
-compartilham a anatomia, e um fluxo que troca de superfície não muda de aparência no meio.
-
-`mode="alert"` mantém a composição centrada da resposta obrigatória e não usa `layout`.
+Cabeçalho, corpo e rodapé usam recuo de `1rem`. Os divisores dependem das regiões presentes:
+um cabeçalho isolado não desenha linha; seguido diretamente pelo rodapé, produz uma linha só.
+A tela não declara uma variante visual nem reconstrói bordas nos slots.
 
 ## Ações e navegação no cabeçalho
 
@@ -126,13 +87,13 @@ fluxo modal encadeado, em que a superfície permanece aberta e troca de etapa.
   <DialogContent>
     <DialogHeader>
       <DialogNavigation>
-        <Button variant="ghost" size="icon-sm" aria-label="Voltar para a lista">
+        <Button variant="ghost" size="icon" aria-label="Voltar para a lista">
           <ArrowLeft />
         </Button>
       </DialogNavigation>
       <DialogTitle>Evento 4821</DialogTitle>
       <DialogActions>
-        <Button variant="ghost" size="icon-sm" aria-label="Mais ações">
+        <Button variant="ghost" size="icon" aria-label="Mais ações">
           <Ellipsis />
         </Button>
       </DialogActions>
@@ -146,10 +107,10 @@ fluxo modal encadeado, em que a superfície permanece aberta e troca de etapa.
 </Dialog>
 ```
 
-O header compartilha a geometria de Page e Surface delimitada: padding de `1rem` e
-linha mínima de `2rem`, nos dois layouts. Declare `size="sm"` nos botões textuais e
-`size="icon-sm"` nos de ícone (`2rem`), incluindo o retorno. `CloseButton` já usa
-`icon-sm` por padrão. Conteúdo maior pode expandir a linha; rodapés preservam sua escala.
+O header compartilha a geometria de Drawer e Surface delimitada: padding de `1rem` e
+linha mínima de `2,25rem`, na anatomia única. Declare `size="default"` nos botões textuais e
+`size="icon"` nos de ícone (`2,25rem`), incluindo o retorno. O fechamento nativo do modal
+também usa essa escala por padrão. Conteúdo maior pode expandir a linha; rodapés preservam sua escala.
 
 O cabeçalho aceita `DialogDescription` como subheading opcional para orientar sobre a finalidade.
 Omita quando repetir o título. Condições, regras de negócio e consequências necessárias à decisão
@@ -159,7 +120,9 @@ pular o texto compromete a decisão, não sua extensão.
 ```tsx
 <DialogHeader>
   <DialogTitle>Organizar pasta</DialogTitle>
-  <DialogDescription>Escolha onde a pasta e suas subpastas aparecem.</DialogDescription>
+  <DialogDescription>
+    Escolha onde a pasta e suas subpastas aparecem.
+  </DialogDescription>
 </DialogHeader>
 ```
 
@@ -460,6 +423,34 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Arqu
   age onde a pessoa está. O modo `alert` cobre a camada até a resposta.
 - `DialogHost` apresenta uma solicitação por vez para que cada resposta tenha um alvo inequívoco.
 
+## Metadados junto à identidade
+
+Use `DialogMeta` para badges, autoria e datas relacionados ao registro. A faixa fica
+abaixo da linha de título e ações, com espaço próprio; `DialogDescription` continua
+reservado à orientação textual breve. Os itens quebram em várias linhas quando necessário.
+
+```tsx
+<Dialog defaultOpen>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Manual de atendimento</DialogTitle>
+      <DialogDescription>Orientações para a equipe.</DialogDescription>
+      <DialogMeta>
+        <Badge>Publicado</Badge>
+        <span>Por Ana</span>
+      </DialogMeta>
+    </DialogHeader>
+    <DialogBody>
+      <p>Conteúdo do manual.</p>
+    </DialogBody>
+  </DialogContent>
+</Dialog>
+```
+
+A composição aceita um único `DialogMeta` e exige um `DialogTitle`. Coloque-o em `DialogHeader`. Não coloque o slot solto no corpo.
+
+O modo `alert` conserva sua composição especializada e não recebe `DialogMeta`.
+
 ## Propriedades de Dialog
 
 | Propriedade    | Tipo                       | Padrão      | Descrição                                                                           |
@@ -480,19 +471,19 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Arqu
 
 ## Propriedades de DialogContent
 
-| Propriedade       | Tipo                          | Padrão        | Descrição                                                                                                                                                                                                     |
-| ----------------- | ----------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `showCloseButton` | `boolean`                     | `true`        | No modo padrão, inclui a ação de fechamento no cabeçalho; o modo de alerta exige uma resposta identificável.                                                                                                  |
-| `closeDisabled`   | `boolean`                     | `false`       | Mantém o botão de fechar visível e desabilitado e impede que Esc e o clique externo fechem a superfície. Handlers como `onEscapeKeyDown` e `onPointerDownOutside` continuam sendo chamados antes do bloqueio. |
-| `closeSize`       | `"xs" \| "sm"`                | `"sm"`        | Define o tamanho da ação circular de fechar.                                                                                                                                                                  |
-| `layout`          | `'continuous' \| 'sectioned'` | `'sectioned'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem. Ignorado em `mode="alert"`.                                                                                                         |
-| `className`       | `string`                      |               | Ajusta a superfície. A largura máxima é `32rem` no modo padrão e `20rem` no alerta; amplie o alerta com `max-w-lg` quando o rodapé tiver três ações.                                                          |
-| `children`        | `ReactNode`                   |               | Cabeçalho, corpo, rodapé ou conteúdo próprio.                                                                                                                                                                 |
+| Propriedade       | Tipo                        | Padrão      | Descrição                                                                                                                                                                                                     |
+| ----------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `showCloseButton` | `boolean`                   | `true`      | No modo padrão, inclui a ação de fechamento no cabeçalho; o modo de alerta exige uma resposta identificável.                                                                                                  |
+| `closeDisabled`   | `boolean`                   | `false`     | Mantém o botão de fechar visível e desabilitado e impede que Esc e o clique externo fechem a superfície. Handlers como `onEscapeKeyDown` e `onPointerDownOutside` continuam sendo chamados antes do bloqueio. |
+| `closeSize`       | `"xs" \| "sm" \| "default"` | `"xs"` | Define o tamanho da ação circular de fechar.                                                                                                                                                                  |
+| `className`       | `string`                    |             | Ajusta a superfície. A largura máxima é `32rem` no modo padrão e `20rem` no alerta; amplie o alerta com `max-w-lg` quando o rodapé tiver três ações.                                                          |
+| `children`        | `ReactNode`                 |             | Cabeçalho, corpo, rodapé ou conteúdo próprio.                                                                                                                                                                 |
 
 ## Propriedades de DialogHeader
 
 | Propriedade | Tipo        | Padrão | Descrição                                                                                                                                 |
 | ----------- | ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `tabs`      | `ReactNode` |        | `TabsList` sob o título, controlado por um `Tabs` ancestral. Não disponível no modo alert.                                                |
 | `className` | `string`    |        | Ajusta a faixa superior sobre o recuo do layout.                                                                                          |
 | `children`  | `ReactNode` |        | Somente `DialogNavigation`, `DialogMedia`, `DialogTitle` e `DialogActions`, no máximo um de cada; o fechamento padrão entra depois deles. |
 
@@ -618,53 +609,33 @@ imperativa.
 | `variant`      | `ButtonVariant` | Última ação: `solid`; demais: `outline`   | Define o tratamento visual.                           |
 | `disabled`     | `boolean`       | `false`                                   | Impede a escolha desta ação.                          |
 
-## Intro separada do chrome
-
-Quando o cabeçalho contém apenas navegação, ações globais e o fechamento, coloque o título do
-conteúdo no primeiro bloco de `DialogBody`. `DialogIntro` exige um `DialogTitle` e aceita um
-`DialogIntroActions`; o body continua responsável pelo espaço antes, entre e depois dos blocos.
-
-```tsx
-<Dialog>
-  <DialogContent>
-    <DialogHeader>
-      <DialogActions>
-        <Button variant="ghost">Ajuda</Button>
-      </DialogActions>
-    </DialogHeader>
-    <DialogBody>
-      <DialogIntro>
-        <DialogTitle>Editar evento</DialogTitle>
-        <DialogIntroActions>
-          <Button variant="outline">Revisar</Button>
-        </DialogIntroActions>
-      </DialogIntro>
-      <form>…</form>
-    </DialogBody>
-    <DialogFooter>…</DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-No formato compacto, mantenha `DialogTitle` e `DialogActions` no próprio `DialogHeader`. Para
-comparar as duas formas em cada `layout`, abra [Composições](/ui/compositions).
-
 ## Propriedades de DialogDescription
 
-| Propriedade | Tipo | Padrão | Descrição |
-| --- | --- | --- | --- |
-| `children` | `ReactNode` | | Orientação opcional sob o título em `DialogHeader` ou `DialogIntro`. |
-| `id` | `string` | | Identificador para associação acessível explícita. |
-| `className` | `string` | | Ajusta a apresentação do parágrafo. |
-| `…props` | `ComponentProps<"p">` | | Atributos nativos. |
+| Propriedade | Tipo                  | Padrão | Descrição                                           |
+| ----------- | --------------------- | ------ | --------------------------------------------------- |
+| `children`  | `ReactNode`           |        | Orientação opcional sob o título em `DialogHeader`. |
+| `id`        | `string`              |        | Identificador para associação acessível explícita.  |
+| `className` | `string`              |        | Ajusta a apresentação do parágrafo.                 |
+| `…props`    | `ComponentProps<"p">` |        | Atributos nativos.                                  |
 
 ## Espaçamento do corpo
 
 O body separa os blocos diretos por `1rem`. Dialog e Drawer são superfícies delimitadas:
 o conteúdo mantém `1rem` até a borda inferior, mesmo sem uma propriedade `framed`.
-Em `sectioned`, o corpo tem `1rem` entre o conteúdo e cada divisória. Em `continuous`,
-o cabeçalho fornece o intervalo superior; sem cabeçalho, o próprio corpo abre esse recuo.
+O corpo mantém `1rem` entre o conteúdo e cada divisória.
 Use `flush` quando o conteúdo controlar seus próprios recuos.
 
-Na intro, `DialogTitle` usa a mesma escala de `PageTitle` (`1.875rem`). No header
-compacto, o título conserva a escala de `1.125rem`. O nível semântico não altera essas medidas.
+`DialogTitle` usa `1,125rem`, como PageTitle. O nível semântico não altera a escala visual.
+
+## Propriedades de DialogMeta
+
+| Propriedade | Tipo        | Descrição                                               |
+| ----------- | ----------- | ------------------------------------------------------- |
+| `children`  | `ReactNode` | Badges, datas, autoria ou outros metadados do registro. |
+| `className` | `string`    | Ajusta a faixa de metadados.                            |
+
+Aceita atributos nativos de `div`. O intervalo superior é de 0,75rem; os itens têm
+0,75rem entre colunas e 0,5rem entre linhas. O componente não insere separadores nem
+carrega dados. Omitir o slot não reserva espaço. Metadados não substituem orientações
+ou condições necessárias à decisão e não são anunciados como descrição do modal.
+`DialogMeta` não se aplica a `mode="alert"`; informações necessárias à resposta ficam no corpo do alerta.

package/src/ui/docs/content/drawer.md

@@ -33,7 +33,7 @@ cantos, em qualquer valor de `side`.
 `side` aceita `top`, `right`, `bottom` e `left`. `DrawerFooter` mantém as ações no rodapé e
 `DrawerClose` fecha o painel sem exigir controle manual de estado. O corpo preserva o mesmo
 alinhamento horizontal do cabeçalho e do rodapé. O fechamento do cabeçalho usa uma ação circular
-neutra e sutil; `closeSize` escolhe entre `xs` e `sm`, com `sm` como padrão.
+neutra e sutil; `closeSize` escolhe entre `xs`, `sm` e `default`, com `xs` como padrão.
 
 ```tsx preview
 <Drawer>
@@ -66,37 +66,11 @@ O rodapé usa a mesma faixa sutil do [`Dialog`](/ui/dialog). As duas famílias c
 anatomia, então um fluxo que começa em um modal e continua em um painel não muda de aparência no
 meio.
 
-## Regiões separadas ou contínuas
+## Regiões com divisores automáticos
 
-`layout` declara a anatomia da superfície inteira e fica em `DrawerContent`; os slots leem esse
-valor e não o recebem. O padrão é `sectioned`: recuo igual nas três regiões, faixa no rodapé e
-divisor entre as regiões vizinhas. É o painel de trabalho, em que o corpo rola sob um cabeçalho e um
-rodapé fixos.
-
-Use `layout="continuous"` quando o painel apresentar um único bloco de leitura e a linha virar
-ruído.
-
-```tsx preview
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button variant="outline">Ver resumo</Button>
-  </DrawerTrigger>
-  <DrawerContent layout="continuous">
-    <DrawerHeader>
-      <DrawerTitle>Resumo da revisão</DrawerTitle>
-    </DrawerHeader>
-    <DrawerBody>
-      <p className="text-sm text-muted-foreground">
-        Concluída em 2 horas, sem pendências registradas.
-      </p>
-    </DrawerBody>
-  </DrawerContent>
-</Drawer>
-```
-
-Os divisores do modo seccionado são derivados da vizinhança: cada região desenha a linha quando há
-uma região do outro lado. Um cabeçalho sem corpo não fecha nada, e um cabeçalho seguido direto de um
-rodapé produz uma linha só. A tela não escreve `border-b` nem `border-t`.
+Cabeçalho, corpo e rodapé usam recuo de `1rem`. Os divisores dependem das regiões presentes:
+um cabeçalho isolado não desenha linha; seguido diretamente pelo rodapé, produz uma linha só.
+A tela não declara uma variante visual nem reconstrói bordas nos slots.
 
 ## Mídia, ações e navegação no cabeçalho
 
@@ -119,7 +93,7 @@ retorno de um fluxo encadeado, em que o painel permanece aberto e troca de etapa
   <DrawerContent side="right">
     <DrawerHeader>
       <DrawerNavigation>
-        <Button variant="ghost" size="icon-sm" aria-label="Voltar para a lista">
+        <Button variant="ghost" size="icon" aria-label="Voltar para a lista">
           <ArrowLeft />
         </Button>
       </DrawerNavigation>
@@ -130,7 +104,7 @@ retorno de um fluxo encadeado, em que o painel permanece aberto e troca de etapa
       </DrawerMedia>
       <DrawerTitle>ABC-1D23</DrawerTitle>
       <DrawerActions>
-        <Button variant="ghost" size="icon-sm" aria-label="Mais ações">
+        <Button variant="ghost" size="icon" aria-label="Mais ações">
           <Ellipsis />
         </Button>
       </DrawerActions>
@@ -144,10 +118,10 @@ retorno de um fluxo encadeado, em que o painel permanece aberto e troca de etapa
 </Drawer>
 ```
 
-O header compartilha a geometria de Page e Surface delimitada: padding de `1rem` e
-linha mínima de `2rem`, nos dois layouts. Declare `size="sm"` nos botões textuais e
-`size="icon-sm"` nos de ícone (`2rem`), incluindo o retorno. `CloseButton` já usa
-`icon-sm` por padrão. Conteúdo maior pode expandir a linha; rodapés preservam sua escala.
+O header compartilha a geometria de Dialog e Surface delimitada: padding de `1rem` e
+linha mínima de `2,25rem`, na anatomia única. Declare `size="default"` nos botões textuais e
+`size="icon"` nos de ícone (`2,25rem`), incluindo o retorno. O fechamento nativo do modal
+também usa essa escala por padrão. Conteúdo maior pode expandir a linha; rodapés preservam sua escala.
 
 O cabeçalho aceita `DrawerDescription` como subheading opcional para orientar sobre a finalidade.
 Omita quando repetir o título. Condições, regras de negócio e consequências necessárias à decisão
@@ -157,7 +131,9 @@ pular o texto compromete a decisão, não sua extensão.
 ```tsx
 <DrawerHeader>
   <DrawerTitle>Organizar pasta</DrawerTitle>
-  <DrawerDescription>Escolha onde a pasta e suas subpastas aparecem.</DrawerDescription>
+  <DrawerDescription>
+    Escolha onde a pasta e suas subpastas aparecem.
+  </DrawerDescription>
 </DrawerHeader>
 ```
 
@@ -190,6 +166,32 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 - O botão de fechar tem o nome acessível `Fechar`. Botões só com ícone no cabeçalho precisam de
   `aria-label`.
 
+## Metadados junto à identidade
+
+Use `DrawerMeta` para badges, autoria e datas relacionados ao registro. A faixa fica
+abaixo da linha de título e ações, com espaço próprio; `DrawerDescription` continua
+reservado à orientação textual breve. Os itens quebram em várias linhas quando necessário.
+
+```tsx
+<Drawer defaultOpen>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Manual de atendimento</DrawerTitle>
+      <DrawerDescription>Orientações para a equipe.</DrawerDescription>
+      <DrawerMeta>
+        <Badge>Publicado</Badge>
+        <span>Por Ana</span>
+      </DrawerMeta>
+    </DrawerHeader>
+    <DrawerBody>
+      <p>Conteúdo do manual.</p>
+    </DrawerBody>
+  </DrawerContent>
+</Drawer>
+```
+
+A composição aceita um único `DrawerMeta` e exige um `DrawerTitle`. Coloque-o em `DrawerHeader`. Não coloque o slot solto no corpo.
+
 ## Propriedades de Drawer
 
 | Propriedade    | Tipo                      | Padrão  | Descrição                                                                 |
@@ -215,20 +217,20 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 
 ## Propriedades de DrawerContent
 
-| Propriedade       | Tipo                                     | Padrão        | Descrição                                                                                               |
-| ----------------- | ---------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
-| `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'`     | Borda de onde o painel aparece.                                                                         |
-| `layout`          | `'continuous' \| 'sectioned'`            | `'sectioned'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem.                               |
-| `showCloseButton` | `boolean`                                | `true`        | Inclui o botão de fechar no cabeçalho. Sem ele, Esc e o overlay continuam fechando o painel.            |
-| `closeDisabled`   | `boolean`                                | `false`       | Mantém o botão de fechar visível e desabilitado e impede que Esc e o clique no overlay fechem o painel. |
-| `closeSize`       | `"xs" \| "sm"`                           | `"sm"`        | Define o tamanho da ação circular de fechar.                                                            |
-| `className`       | `string`                                 |               | Ajusta o painel, como a largura.                                                                        |
-| `children`        | `ReactNode`                              |               | Cabeçalho, corpo e rodapé.                                                                              |
+| Propriedade       | Tipo                                     | Padrão      | Descrição                                                                                               |
+| ----------------- | ---------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- |
+| `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'`   | Borda de onde o painel aparece.                                                                         |
+| `showCloseButton` | `boolean`                                | `true`      | Inclui o botão de fechar no cabeçalho. Sem ele, Esc e o overlay continuam fechando o painel.            |
+| `closeDisabled`   | `boolean`                                | `false`     | Mantém o botão de fechar visível e desabilitado e impede que Esc e o clique no overlay fechem o painel. |
+| `closeSize`       | `"xs" \| "sm" \| "default"`              | `"xs"` | Define o tamanho da ação circular de fechar.                                                            |
+| `className`       | `string`                                 |             | Ajusta o painel, como a largura.                                                                        |
+| `children`        | `ReactNode`                              |             | Cabeçalho, corpo e rodapé.                                                                              |
 
 ## Propriedades de DrawerHeader
 
 | Propriedade | Tipo        | Padrão | Descrição                                                                                                                                 |
 | ----------- | ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `tabs`      | `ReactNode` |        | `TabsList` sob o título, controlado por um `Tabs` ancestral.                                                                              |
 | `className` | `string`    |        | Ajusta a faixa superior sobre o recuo do layout.                                                                                          |
 | `children`  | `ReactNode` |        | Somente `DrawerNavigation`, `DrawerMedia`, `DrawerTitle` e `DrawerActions`, no máximo um de cada; o fechamento padrão entra depois deles. |
 
@@ -281,57 +283,32 @@ o conteúdo controlar o próprio inset e um wrapper filho para relações intern
 | `className` | `string`    |        | Ajusta a faixa do rodapé, inclusive a distribuição das ações. |
 | `children`  | `ReactNode` |        | Ações persistentes, normalmente dentro de um `ButtonGroup`.   |
 
-## Intro separada do chrome
-
-Quando o cabeçalho contém apenas o recolhimento, ações globais e o fechamento, use `DrawerIntro`
-como primeiro bloco de `DrawerBody`. Ele exige um `DrawerTitle` e aceita `DrawerIntroActions`.
-Assim o título acompanha o conteúdo rolável enquanto o chrome permanece estável.
-
-```tsx
-<Drawer>
-  <DrawerContent showCloseButton={false}>
-    <DrawerHeader>
-      <DrawerNavigation>
-        <DrawerClose asChild>
-          <Button>Recolher</Button>
-        </DrawerClose>
-      </DrawerNavigation>
-      <DrawerActions>
-        <Button variant="ghost">Conversa</Button>
-      </DrawerActions>
-    </DrawerHeader>
-    <DrawerBody>
-      <DrawerIntro>
-        <DrawerTitle>Editar evento</DrawerTitle>
-        <DrawerIntroActions>
-          <Button variant="outline">Revisar</Button>
-        </DrawerIntroActions>
-      </DrawerIntro>
-      <form>…</form>
-    </DrawerBody>
-  </DrawerContent>
-</Drawer>
-```
-
-No formato compacto, mantenha `DrawerTitle` e `DrawerActions` no próprio `DrawerHeader`. Para
-comparar as duas formas em cada `layout`, abra [Composições](/ui/compositions).
-
 ## Propriedades de DrawerDescription
 
-| Propriedade | Tipo | Padrão | Descrição |
-| --- | --- | --- | --- |
-| `children` | `ReactNode` | | Orientação opcional sob o título em `DrawerHeader` ou `DrawerIntro`. |
-| `id` | `string` | | Identificador para associação acessível explícita. |
-| `className` | `string` | | Ajusta a apresentação do parágrafo. |
-| `…props` | `ComponentProps<"p">` | | Atributos nativos. |
+| Propriedade | Tipo                  | Padrão | Descrição                                           |
+| ----------- | --------------------- | ------ | --------------------------------------------------- |
+| `children`  | `ReactNode`           |        | Orientação opcional sob o título em `DrawerHeader`. |
+| `id`        | `string`              |        | Identificador para associação acessível explícita.  |
+| `className` | `string`              |        | Ajusta a apresentação do parágrafo.                 |
+| `…props`    | `ComponentProps<"p">` |        | Atributos nativos.                                  |
 
 ## Espaçamento do corpo
 
 O body separa os blocos diretos por `1rem`. Dialog e Drawer são superfícies delimitadas:
 o conteúdo mantém `1rem` até a borda inferior, mesmo sem uma propriedade `framed`.
-Em `sectioned`, o corpo tem `1rem` entre o conteúdo e cada divisória. Em `continuous`,
-o cabeçalho fornece o intervalo superior; sem cabeçalho, o próprio corpo abre esse recuo.
+O corpo mantém `1rem` entre o conteúdo e cada divisória.
 Use `flush` quando o conteúdo controlar seus próprios recuos.
 
-Na intro, `DrawerTitle` usa a mesma escala de `PageTitle` (`1.875rem`). No header
-compacto, o título conserva a escala de `1.125rem`. O nível semântico não altera essas medidas.
+`DrawerTitle` usa `1,125rem`, como PageTitle. O nível semântico não altera a escala visual.
+
+## Propriedades de DrawerMeta
+
+| Propriedade | Tipo        | Descrição                                               |
+| ----------- | ----------- | ------------------------------------------------------- |
+| `children`  | `ReactNode` | Badges, datas, autoria ou outros metadados do registro. |
+| `className` | `string`    | Ajusta a faixa de metadados.                            |
+
+Aceita atributos nativos de `div`. O intervalo superior é de 0,75rem; os itens têm
+0,75rem entre colunas e 0,5rem entre linhas. O componente não insere separadores nem
+carrega dados. Omitir o slot não reserva espaço. Metadados não substituem orientações
+ou condições necessárias à decisão e não são anunciados como descrição do modal.

package/src/ui/docs/content/field.md

@@ -5,7 +5,8 @@ montado à mão. Quando o formulário executa uma action, prefira [`ActionForm`]
 monta os mesmos campos a partir do contrato. Na orientação vertical, `FieldLabel` e o controle ficam
 empilhados. A ajuda fica junto ao rótulo, com [`LabelHelp`](/ui/action-form), o mesmo ícone que o
 `ActionForm` usa para `FieldSpec.help`. Use `FieldDescription` somente quando a frase precisar
-ficar visível o tempo todo abaixo do controle.
+ficar visível o tempo todo abaixo do controle. Essa orientação usa `text-xs` (`0,75rem`),
+enquanto o rótulo mantém `text-sm`.
 
 ```tsx preview col md
 <Field>