@softize/opus 15.2.2 → 16.1.0

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

@@ -3,12 +3,12 @@
 Use a família `Dialog` quando a pessoa precisar concluir uma tarefa ou responder sem perder o
 contexto da página. A forma escolhida depende do tipo de interrupção:
 
-| Necessidade | Escolha |
-|---|---|
-| Exibir uma tarefa ou conteúdo modal que pode ser fechado. | Componha `Dialog`. |
-| Exigir uma resposta e impedir o fechamento pelo clique externo. | Componha `Dialog mode="alert"`. |
+| Necessidade                                                                      | Escolha                                                  |
+| -------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| Exibir uma tarefa ou conteúdo modal que pode ser fechado.                        | Componha `Dialog`.                                       |
+| Exigir uma resposta e impedir o fechamento pelo clique externo.                  | Componha `Dialog mode="alert"`.                          |
 | Pedir reconhecimento, confirmação binária ou uma string sem montar a superfície. | Use `dialog.alert`, `dialog.confirm` ou `dialog.prompt`. |
-| Escolher entre vários resultados simples. | Use `dialog.choose`. |
+| Escolher entre vários resultados simples.                                        | Use `dialog.choose`.                                     |
 
 Para conteúdo ancorado e não modal, use `Popover`. Para uma lista de ações, use `Menu`.
 
@@ -26,7 +26,6 @@ borda semântica, raio `xl` e elevação para permanecer distinta da página.
   <DialogContent>
     <DialogHeader>
       <DialogTitle>Novo workspace</DialogTitle>
-      <DialogDescription>O workspace agrupa os repositórios e agentes do cliente.</DialogDescription>
     </DialogHeader>
     <DialogBody className="space-y-2">
       <Label htmlFor="workspace-name">Nome</Label>
@@ -53,61 +52,83 @@ um contrato pronto. As chamadas são assíncronas e resolvem somente depois da r
 
 ```tsx preview
 function Demo() {
-  const [result, setResult] = useState('Nenhuma resposta.')
+  const [result, setResult] = useState("Nenhuma resposta.");
 
   return (
     <div className="flex flex-wrap items-center gap-3">
       <DialogHost />
-      <Button variant="outline" size="sm" onClick={async () => {
-        await dialog.alert({
-          title: 'Sessão expirada',
-          description: 'Entre novamente para continuar.',
-        })
-        setResult('Aviso reconhecido.')
-      }}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={async () => {
+          await dialog.alert({
+            title: "Sessão expirada",
+            body: "Entre novamente para continuar.",
+          });
+          setResult("Aviso reconhecido.");
+        }}
+      >
         Abrir aviso
       </Button>
-      <Button variant="outline" size="sm" onClick={async () => {
-        const accepted = await dialog.confirm({
-          title: 'Excluir sessão?',
-          description: 'O worktree e o preview desta sessão serão removidos.',
-          action: 'Excluir',
-          context: 'danger',
-        })
-        setResult(accepted ? 'Sessão excluída.' : 'Sessão mantida.')
-      }}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={async () => {
+          const accepted = await dialog.confirm({
+            title: "Excluir sessão?",
+            body: "O worktree e o preview desta sessão serão removidos.",
+            action: "Excluir",
+            context: "danger",
+          });
+          setResult(accepted ? "Sessão excluída." : "Sessão mantida.");
+        }}
+      >
         Confirmar exclusão
       </Button>
-      <Button variant="outline" size="sm" onClick={async () => {
-        const name = await dialog.prompt({
-          title: 'Renomear snapshot',
-          action: 'Renomear',
-          placeholder: 'Ex.: versão final',
-        })
-        setResult(name === null ? 'Nome mantido.' : `Novo nome: ${name}`)
-      }}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={async () => {
+          const name = await dialog.prompt({
+            title: "Renomear snapshot",
+            action: "Renomear",
+            placeholder: "Ex.: versão final",
+          });
+          setResult(name === null ? "Nome mantido." : `Novo nome: ${name}`);
+        }}
+      >
         Renomear snapshot
       </Button>
-      <Button variant="outline" size="sm" onClick={async () => {
-        const choice = await dialog.choose({
-          title: 'Fechar editor?',
-          description: 'O contrato possui alterações que ainda não foram salvas.',
-          actions: [
-            { result: 'continue', label: 'Continuar editando', initialFocus: true },
-            { result: 'discard', label: 'Descartar', variant: 'outline' },
-            { result: 'save', label: 'Salvar e fechar' },
-          ],
-        })
-        setResult(choice === null ? 'Editor mantido.' : `Resultado: ${choice}`)
-      }}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={async () => {
+          const choice = await dialog.choose({
+            title: "Fechar editor?",
+            body: "O contrato possui alterações que ainda não foram salvas.",
+            actions: [
+              {
+                result: "continue",
+                label: "Continuar editando",
+                initialFocus: true,
+              },
+              { result: "discard", label: "Descartar", variant: "outline" },
+              { result: "save", label: "Salvar e fechar" },
+            ],
+          });
+          setResult(
+            choice === null ? "Editor mantido." : `Resultado: ${choice}`,
+          );
+        }}
+      >
         Fechar editor
       </Button>
       <span className="text-sm text-muted-foreground">{result}</span>
     </div>
-  )
+  );
 }
 
-render(<Demo />)
+render(<Demo />);
 ```
 
 `dialog.alert` devolve `Promise<void>`, `dialog.confirm` devolve `Promise<boolean>`,
@@ -136,17 +157,23 @@ Monte um `DialogHost` no shell do aplicativo, ao lado do `Toaster`:
 Sem o host, a chamada lança um erro imediatamente. Solicitações concorrentes entram em uma fila e
 aparecem uma por vez, preservando a resposta de cada `await`.
 
-### Adicionar conteúdo próprio
+### Adicionar contexto relevante
 
-Use `body` quando a descrição não for suficiente, como em uma lista de recursos afetados:
+O título basta quando apenas nomeia a tarefa. Use `body` para uma consequência, instrução ou outro
+contexto que realmente ajude a pessoa a decidir. O conteúdo aparece no início do corpo e pode ser
+texto, um `Alert` ou uma composição própria:
 
 ```tsx
 const accepted = await dialog.confirm({
-  title: 'Encerrar três sessões?',
-  description: 'Os agentes vinculados serão interrompidos.',
-  body: <AffectedSessions />,
-  action: 'Encerrar sessões',
-})
+  title: "Encerrar três sessões?",
+  body: (
+    <Alert
+      context="warning"
+      description="Os agentes vinculados serão interrompidos."
+    />
+  ),
+  action: "Encerrar sessões",
+});
 ```
 
 Use `ActionTrigger` quando a confirmação já pertencer ao contrato de uma action. Use
@@ -163,7 +190,7 @@ layout específico.
 
 ```tsx preview
 function ResponseDialogDemo() {
-  const [result, setResult] = useState('Nenhuma resposta.')
+  const [result, setResult] = useState("Nenhuma resposta.");
 
   return (
     <div className="space-y-3">
@@ -174,10 +201,12 @@ function ResponseDialogDemo() {
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Fechar editor?</DialogTitle>
-            <DialogDescription>
-              O contrato possui alterações que ainda não foram salvas.
-            </DialogDescription>
           </DialogHeader>
+          <DialogBody>
+            <p className="text-sm text-muted-foreground">
+              O contrato possui alterações que ainda não foram salvas.
+            </p>
+          </DialogBody>
           <DialogFooter className="grid-cols-3">
             <DialogClose result="continue" initialFocus asChild>
               <Button variant="ghost">Continuar editando</Button>
@@ -193,10 +222,10 @@ function ResponseDialogDemo() {
       </Dialog>
       <p className="text-sm text-muted-foreground">{result}</p>
     </div>
-  )
+  );
 }
 
-render(<ResponseDialogDemo />)
+render(<ResponseDialogDemo />);
 ```
 
 `DialogClose` fecha a superfície sem escolher a aparência. Use `asChild` e componha um `Button`;
@@ -207,7 +236,8 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Ence
 
 ## Acessibilidade
 
-- `DialogTitle` e `DialogDescription` nomeiam e descrevem a superfície para tecnologias assistivas.
+- `DialogTitle` nomeia a superfície para tecnologias assistivas. Quando um texto conciso do corpo
+  também precisar descrevê-la, relacione seu `id` por `aria-describedby` em `DialogContent`.
 - O modo padrão permite fechamento externo; `mode="alert"` exige uma resposta explícita.
 - O comportamento selecionado por `mode` determina o papel de acessibilidade; `role` não configura
   o comportamento.
@@ -216,86 +246,79 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Ence
 
 ## Propriedades de Dialog
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `open` | `boolean` | | Controla a abertura. |
-| `defaultOpen` | `boolean` | `false` | Define a abertura inicial no modo não controlado. |
-| `onOpenChange` | `(open: boolean) => void` | | Recebe mudanças de abertura. |
-| `mode` | `'default' \| 'alert'` | `'default'` | Exige resposta explícita em `alert`; o componente deriva o papel de acessibilidade. |
-| `onResult` | `(result: string) => void` | | Recebe o resultado do `DialogClose` acionado. |
-| `modal` | `boolean` | `true` | No modo padrão, mantém foco e interação restritos à superfície aberta. |
+| Propriedade    | Tipo                       | Padrão      | Descrição                                                                           |
+| -------------- | -------------------------- | ----------- | ----------------------------------------------------------------------------------- |
+| `open`         | `boolean`                  |             | Controla a abertura.                                                                |
+| `defaultOpen`  | `boolean`                  | `false`     | Define a abertura inicial no modo não controlado.                                   |
+| `onOpenChange` | `(open: boolean) => void`  |             | Recebe mudanças de abertura.                                                        |
+| `mode`         | `'default' \| 'alert'`     | `'default'` | Exige resposta explícita em `alert`; o componente deriva o papel de acessibilidade. |
+| `onResult`     | `(result: string) => void` |             | Recebe o resultado do `DialogClose` acionado.                                       |
+| `modal`        | `boolean`                  | `true`      | No modo padrão, mantém foco e interação restritos à superfície aberta.              |
 
 ## Propriedades de DialogTrigger
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `asChild` | `boolean` | `false` | Usa o filho como gatilho sem criar outro elemento. |
-| `children` | `ReactNode` | | Controle que abre o diálogo. |
+| Propriedade | Tipo        | Padrão  | Descrição                                          |
+| ----------- | ----------- | ------- | -------------------------------------------------- |
+| `asChild`   | `boolean`   | `false` | Usa o filho como gatilho sem criar outro elemento. |
+| `children`  | `ReactNode` |         | Controle que abre o diálogo.                       |
 
 ## Propriedades de DialogContent
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `showCloseButton` | `boolean` | `true` | No modo padrão, exibe o botão de fechamento no canto; o modo de alerta exige uma resposta identificável. |
-| `className` | `string` | | Ajusta a superfície. |
-| `children` | `ReactNode` | | Cabeçalho, corpo, rodapé ou conteúdo próprio. |
+| Propriedade       | Tipo        | Padrão | Descrição                                                                                                |
+| ----------------- | ----------- | ------ | -------------------------------------------------------------------------------------------------------- |
+| `showCloseButton` | `boolean`   | `true` | No modo padrão, exibe o botão de fechamento no canto; o modo de alerta exige uma resposta identificável. |
+| `className`       | `string`    |        | Ajusta a superfície.                                                                                     |
+| `children`        | `ReactNode` |        | Cabeçalho, corpo, rodapé ou conteúdo próprio.                                                            |
 
 ## Propriedades de DialogHeader
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta a faixa superior. |
-| `children` | `ReactNode` | | Título, descrição e mídia opcional. |
+| Propriedade | Tipo        | Padrão | Descrição                |
+| ----------- | ----------- | ------ | ------------------------ |
+| `className` | `string`    |        | Ajusta a faixa superior. |
+| `children`  | `ReactNode` |        | Título e mídia opcional. |
 
 ## Propriedades de DialogBody
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta o corpo rolável do modo padrão ou o conteúdo próprio do alerta. |
-| `children` | `ReactNode` | | Conteúdo principal da tarefa. |
+| Propriedade | Tipo        | Padrão | Descrição                                                              |
+| ----------- | ----------- | ------ | ---------------------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta o corpo rolável do modo padrão ou o conteúdo próprio do alerta. |
+| `children`  | `ReactNode` |        | Conteúdo principal da tarefa.                                          |
 
 ## Propriedades de DialogFooter
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta a faixa do modo padrão ou a grade de respostas do alerta. |
-| `children` | `ReactNode` | | Ações secundárias e principal. |
+| Propriedade | Tipo        | Padrão | Descrição                                                        |
+| ----------- | ----------- | ------ | ---------------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta a faixa do modo padrão ou a grade de respostas do alerta. |
+| `children`  | `ReactNode` |        | Ações secundárias e principal.                                   |
 
 ## Propriedades de DialogTitle
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta o título. |
-| `children` | `ReactNode` | | Nome da tarefa ou do conteúdo modal. |
-
-## Propriedades de DialogDescription
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta a descrição. |
-| `children` | `ReactNode` | | Contexto, efeito ou consequência relevante. |
+| Propriedade | Tipo        | Padrão | Descrição                            |
+| ----------- | ----------- | ------ | ------------------------------------ |
+| `className` | `string`    |        | Ajusta o título.                     |
+| `children`  | `ReactNode` |        | Nome da tarefa ou do conteúdo modal. |
 
 ## Propriedades de DialogMedia
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta a moldura quadrada da mídia. |
-| `children` | `ReactNode` | | Ícone que reforça o contexto da resposta. |
+| Propriedade | Tipo        | Padrão | Descrição                                 |
+| ----------- | ----------- | ------ | ----------------------------------------- |
+| `className` | `string`    |        | Ajusta a moldura quadrada da mídia.       |
+| `children`  | `ReactNode` |        | Ícone que reforça o contexto da resposta. |
 
 ## Propriedades de DialogClose
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `initialFocus` | `boolean` | `false` | No modo de alerta, marca o controle como destino inicial seguro do foco. |
-| `result` | `string` | | Entrega esta resposta a `Dialog onResult` antes de fechar. |
-| `asChild` | `boolean` | `false` | Aplica o fechamento ao filho; use com `Button`. |
-| `children` | `ReactNode` | | Controle que fecha o diálogo. |
+| Propriedade    | Tipo        | Padrão  | Descrição                                                                |
+| -------------- | ----------- | ------- | ------------------------------------------------------------------------ |
+| `initialFocus` | `boolean`   | `false` | No modo de alerta, marca o controle como destino inicial seguro do foco. |
+| `result`       | `string`    |         | Entrega esta resposta a `Dialog onResult` antes de fechar.               |
+| `asChild`      | `boolean`   | `false` | Aplica o fechamento ao filho; use com `Button`.                          |
+| `children`     | `ReactNode` |         | Controle que fecha o diálogo.                                            |
 
 ## Propriedades de DialogOverlay
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `className` | `string` | | Ajusta a camada que cobre a página. |
+| Propriedade | Tipo     | Padrão | Descrição                           |
+| ----------- | -------- | ------ | ----------------------------------- |
+| `className` | `string` |        | Ajusta a camada que cobre a página. |
 
 ## Propriedades de DialogPortal
 
@@ -309,57 +332,53 @@ imperativa.
 
 ## Opções de dialog.alert
 
-| Opção | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `title` | `ReactNode` | | Nomeia o aviso que exige reconhecimento. |
-| `description` | `ReactNode` | | Explica efeito, alcance ou próximo passo. |
-| `body` | `ReactNode` | | Acrescenta conteúdo próprio abaixo da descrição. |
-| `media` | `ReactNode` | | Exibe um ícone na moldura de `DialogMedia`. |
-| `action` | `string` | `'OK'` | Define o rótulo de reconhecimento. |
+| Opção    | Tipo        | Padrão | Descrição                                        |
+| -------- | ----------- | ------ | ------------------------------------------------ |
+| `title`  | `ReactNode` |        | Nomeia o aviso que exige reconhecimento.         |
+| `body`   | `ReactNode` |        | Apresenta contexto relevante no início do corpo. |
+| `media`  | `ReactNode` |        | Exibe um ícone na moldura de `DialogMedia`.      |
+| `action` | `string`    | `'OK'` | Define o rótulo de reconhecimento.               |
 
 ## Opções de dialog.confirm
 
-| Opção | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `title` | `ReactNode` | | Nomeia a decisão. |
-| `description` | `ReactNode` | | Explica a consequência necessária para decidir. |
-| `body` | `ReactNode` | | Acrescenta conteúdo próprio abaixo da descrição. |
-| `media` | `ReactNode` | | Exibe um ícone na moldura de `DialogMedia`. |
-| `action` | `string` | `'Confirmar'` | Define o rótulo do resultado afirmativo. |
-| `cancel` | `string` | `'Cancelar'` | Define o rótulo da resposta negativa. |
-| `context` | `'primary' \| 'danger'` | `'primary'` | Define o contexto da ação afirmativa. |
+| Opção     | Tipo                    | Padrão        | Descrição                                                           |
+| --------- | ----------------------- | ------------- | ------------------------------------------------------------------- |
+| `title`   | `ReactNode`             |               | Nomeia a decisão.                                                   |
+| `body`    | `ReactNode`             |               | Apresenta a consequência ou outro contexto necessário para decidir. |
+| `media`   | `ReactNode`             |               | Exibe um ícone na moldura de `DialogMedia`.                         |
+| `action`  | `string`                | `'Confirmar'` | Define o rótulo do resultado afirmativo.                            |
+| `cancel`  | `string`                | `'Cancelar'`  | Define o rótulo da resposta negativa.                               |
+| `context` | `'primary' \| 'danger'` | `'primary'`   | Define o contexto da ação afirmativa.                               |
 
 ## Opções de dialog.prompt
 
-| Opção | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `title` | `ReactNode` | | Nomeia a informação solicitada. |
-| `description` | `ReactNode` | | Explica como a informação será usada. |
-| `body` | `ReactNode` | | Acrescenta conteúdo próprio abaixo da descrição. |
-| `media` | `ReactNode` | | Exibe um ícone na moldura de `DialogMedia`. |
-| `action` | `string` | `'Confirmar'` | Define o rótulo do resultado afirmativo. |
-| `cancel` | `string` | `'Cancelar'` | Define o rótulo da resposta negativa. |
-| `context` | `'primary' \| 'danger'` | `'primary'` | Define o contexto da ação afirmativa. |
-| `placeholder` | `string` | | Orienta o formato esperado quando um exemplo ajuda. |
-| `defaultValue` | `string` | | Define e seleciona o valor inicial do campo. |
+| Opção          | Tipo                    | Padrão        | Descrição                                                          |
+| -------------- | ----------------------- | ------------- | ------------------------------------------------------------------ |
+| `title`        | `ReactNode`             |               | Nomeia a informação solicitada.                                    |
+| `body`         | `ReactNode`             |               | Explica como a informação será usada quando isso mudar a resposta. |
+| `media`        | `ReactNode`             |               | Exibe um ícone na moldura de `DialogMedia`.                        |
+| `action`       | `string`                | `'Confirmar'` | Define o rótulo do resultado afirmativo.                           |
+| `cancel`       | `string`                | `'Cancelar'`  | Define o rótulo da resposta negativa.                              |
+| `context`      | `'primary' \| 'danger'` | `'primary'`   | Define o contexto da ação afirmativa.                              |
+| `placeholder`  | `string`                |               | Orienta o formato esperado quando um exemplo ajuda.                |
+| `defaultValue` | `string`                |               | Define e seleciona o valor inicial do campo.                       |
 
 ## Opções de dialog.choose
 
-| Opção | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `title` | `ReactNode` | | Nomeia a escolha. |
-| `description` | `ReactNode` | | Explica o contexto necessário para escolher. |
-| `body` | `ReactNode` | | Acrescenta conteúdo próprio antes das ações. |
-| `media` | `ReactNode` | | Exibe um ícone na moldura de `DialogMedia`. |
-| `actions` | `readonly DialogChoice[]` | | Declara os resultados disponíveis. |
+| Opção     | Tipo                      | Padrão | Descrição                                        |
+| --------- | ------------------------- | ------ | ------------------------------------------------ |
+| `title`   | `ReactNode`               |        | Nomeia a escolha.                                |
+| `body`    | `ReactNode`               |        | Apresenta o contexto necessário antes das ações. |
+| `media`   | `ReactNode`               |        | Exibe um ícone na moldura de `DialogMedia`.      |
+| `actions` | `readonly DialogChoice[]` |        | Declara os resultados disponíveis.               |
 
 ## Propriedades de DialogChoice
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `result` | `string` | | Valor único devolvido quando a ação for escolhida. |
-| `label` | `ReactNode` | | Rótulo que descreve o resultado da ação. |
-| `initialFocus` | `boolean` | `false` | Marca a única saída segura que recebe o foco inicial. |
-| `context` | `ButtonContext` | Última ação: `primary`; demais: `neutral` | Define o significado semântico. |
-| `variant` | `ButtonVariant` | Última ação: `solid`; demais: `ghost` | Define o tratamento visual. |
-| `disabled` | `boolean` | `false` | Impede a escolha desta ação. |
+| Propriedade    | Tipo            | Padrão                                    | Descrição                                             |
+| -------------- | --------------- | ----------------------------------------- | ----------------------------------------------------- |
+| `result`       | `string`        |                                           | Valor único devolvido quando a ação for escolhida.    |
+| `label`        | `ReactNode`     |                                           | Rótulo que descreve o resultado da ação.              |
+| `initialFocus` | `boolean`       | `false`                                   | Marca a única saída segura que recebe o foco inicial. |
+| `context`      | `ButtonContext` | Última ação: `primary`; demais: `neutral` | Define o significado semântico.                       |
+| `variant`      | `ButtonVariant` | Última ação: `solid`; demais: `ghost`     | Define o tratamento visual.                           |
+| `disabled`     | `boolean`       | `false`                                   | Impede a escolha desta ação.                          |

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

@@ -12,10 +12,10 @@ entra pela direita e pode ser fechado por Esc, pelo overlay ou pelo botão de fe
   <DrawerContent side="right">
     <DrawerHeader>
       <DrawerTitle>criarTicket</DrawerTitle>
-      <DrawerDescription>Ação · domínio Suporte</DrawerDescription>
     </DrawerHeader>
     <DrawerBody className="text-sm text-muted-foreground">
-      Campos, entrada/saída, arquivo…
+      <p>Ação · domínio Suporte</p>
+      <p>Campos, entrada/saída, arquivo…</p>
     </DrawerBody>
   </DrawerContent>
 </Drawer>
@@ -53,19 +53,20 @@ mesmo alinhamento horizontal entre título, conteúdo e ações.
 
 ## Propriedades de Drawer
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `open` | `boolean` | | Estado no modo controlado. |
-| `onOpenChange` | `(open: boolean) => void` | | Atualiza o estado para permitir abertura ou fechamento por código. |
+| Propriedade    | Tipo                      | Padrão | Descrição                                                          |
+| -------------- | ------------------------- | ------ | ------------------------------------------------------------------ |
+| `open`         | `boolean`                 |        | Estado no modo controlado.                                         |
+| `onOpenChange` | `(open: boolean) => void` |        | Atualiza o estado para permitir abertura ou fechamento por código. |
 
 ## Propriedades de DrawerContent
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Borda de onde o painel aparece. |
-| `showCloseButton` | `boolean` | `true` | Exibe o botão de fechamento. Desative quando o painel exigir uma ação explícita. |
+| Propriedade       | Tipo                                     | Padrão    | Descrição                                                                        |
+| ----------------- | ---------------------------------------- | --------- | -------------------------------------------------------------------------------- |
+| `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Borda de onde o painel aparece.                                                  |
+| `showCloseButton` | `boolean`                                | `true`    | Exibe o botão de fechamento. Desative quando o painel exigir uma ação explícita. |
 
 ## Propriedades de DrawerBody
 
 `DrawerBody` aceita os atributos de `HTMLDivElement` e ocupa a região flexível e rolável entre
-`DrawerHeader` e `DrawerFooter`.
+`DrawerHeader` e `DrawerFooter`. O cabeçalho nomeia o painel; contexto relevante entra no começo
+do corpo como texto ou `Alert`.