@softize/opus 22.2.0 → 24.0.0

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

@@ -29,9 +29,11 @@ distinta da página.
     <DialogHeader>
       <DialogTitle>Criar workspace</DialogTitle>
     </DialogHeader>
-    <DialogBody className="space-y-2">
-      <Label htmlFor="workspace-name">Nome</Label>
-      <Input id="workspace-name" placeholder="Ex.: Empresa X" />
+    <DialogBody>
+      <div className="space-y-2">
+        <Label htmlFor="workspace-name">Nome</Label>
+        <Input id="workspace-name" placeholder="Ex.: Empresa X" />
+      </div>
     </DialogBody>
     <DialogFooter>
       <ButtonGroup mode="spaced">
@@ -46,6 +48,9 @@ distinta da página.
 ```
 
 O corpo cresce até o limite da janela e passa a rolar; cabeçalho e rodapé permanecem visíveis.
+Seus filhos diretos recebem o ritmo estrutural de `1.5rem`. Um grupo compacto, uma grade ou 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`.
@@ -131,7 +136,9 @@ fluxo modal encadeado, em que a superfície permanece aberta e troca de etapa.
       </DialogActions>
     </DialogHeader>
     <DialogBody>
-      <p className="text-sm text-muted-foreground">Detalhe do evento selecionado.</p>
+      <p className="text-sm text-muted-foreground">
+        Detalhe do evento selecionado.
+      </p>
     </DialogBody>
   </DialogContent>
 </Dialog>
@@ -147,9 +154,9 @@ decidir aparece no começo do corpo, como texto ou `Alert`.
 ## Identificar a tarefa com um ícone
 
 Use `DialogMedia` quando um ícone ajuda a reconhecer a tarefa antes da leitura do título. No modo
-padrão, ele abre a linha do cabeçalho com a mesma moldura de [`IconTile`](/ui/icon-tile) das demais
-superfícies. No `mode="alert"`, a moldura cresce e fica centralizada acima do título, porque ali o
-ícone é o principal sinal de reconhecimento da resposta.
+padrão, ele apenas reserva e alinha o espaço antes do título. Componha [`IconTile`](/ui/icon-tile)
+explicitamente quando o ícone precisar de moldura; passe o glifo diretamente quando não precisar.
+O mesmo contrato vale no `mode="alert"`: a mídia não ganha tamanho, fundo ou borda automaticamente.
 
 ```tsx preview
 render(
@@ -161,13 +168,17 @@ render(
       <DialogContent>
         <DialogHeader>
           <DialogMedia>
-            <Share2 />
+            <IconTile size="sm">
+              <Share2 />
+            </IconTile>
           </DialogMedia>
           <DialogTitle>Compartilhar contrato</DialogTitle>
         </DialogHeader>
-        <DialogBody className="space-y-2">
-          <Label htmlFor="share-email">E-mail</Label>
-          <Input id="share-email" placeholder="nome@empresa.com.br" />
+        <DialogBody>
+          <div className="space-y-2">
+            <Label htmlFor="share-email">E-mail</Label>
+            <Input id="share-email" placeholder="nome@empresa.com.br" />
+          </div>
         </DialogBody>
         <DialogFooter>
           <ButtonGroup mode="spaced">
@@ -185,8 +196,10 @@ render(
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogMedia context="danger">
-            <ShieldOff />
+          <DialogMedia>
+            <IconTile size="lg" context="danger">
+              <ShieldOff />
+            </IconTile>
           </DialogMedia>
           <DialogTitle>Revogar acesso de Marina?</DialogTitle>
         </DialogHeader>
@@ -211,7 +224,8 @@ render(
 );
 ```
 
-Na API imperativa, a opção `media` recebe o ícone e o apresenta na mesma moldura do alerta.
+Na API imperativa, a opção `media` preserva o nó recebido. Passe um `IconTile` quando quiser
+moldura.
 
 ## Pedir uma resposta pela API imperativa
 
@@ -245,7 +259,11 @@ function Demo() {
           const accepted = await dialog.confirm({
             title: "Excluir rascunho?",
             body: "O rascunho e os comentários dele serão removidos.",
-            media: <Trash2 />,
+            media: (
+              <IconTile context="danger">
+                <Trash2 />
+              </IconTile>
+            ),
             action: "Excluir",
             context: "danger",
           });
@@ -443,42 +461,43 @@ 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 header; 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 header; 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.                                                                                                                                                                 |
 
 ## Propriedades de DialogHeader
 
-| Propriedade | Tipo        | Padrão | Descrição                                                  |
-| ----------- | ----------- | ------ | ---------------------------------------------------------- |
-| `className` | `string`    |        | Ajusta a faixa superior sobre o recuo do layout.           |
+| Propriedade | Tipo        | Padrão | Descrição                                                                                                                                 |
+| ----------- | ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `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. |
 
 ## Propriedades de DialogNavigation
 
-| Propriedade | Tipo        | Padrão | Descrição                                                      |
-| ----------- | ----------- | ------ | -------------------------------------------------------------- |
-| `className` | `string`    |        | Ajusta a região introdutória da linha.                         |
-| `children`  | `ReactNode` |        | Retorno de um fluxo modal encadeado, antes do título.          |
+| Propriedade | Tipo        | Padrão | Descrição                                             |
+| ----------- | ----------- | ------ | ----------------------------------------------------- |
+| `className` | `string`    |        | Ajusta a região introdutória da linha.                |
+| `children`  | `ReactNode` |        | Retorno de um fluxo modal encadeado, antes do título. |
 
 ## Propriedades de DialogActions
 
-| Propriedade | Tipo        | Padrão | Descrição                                                          |
-| ----------- | ----------- | ------ | ------------------------------------------------------------------ |
-| `className` | `string`    |        | Ajusta o agrupamento das ações.                                    |
-| `children`  | `ReactNode` |        | Ações da tela no cabeçalho, antes do botão de fechar.              |
+| Propriedade | Tipo        | Padrão | Descrição                                             |
+| ----------- | ----------- | ------ | ----------------------------------------------------- |
+| `className` | `string`    |        | Ajusta o agrupamento das ações.                       |
+| `children`  | `ReactNode` |        | Ações da tela no cabeçalho, antes do botão de fechar. |
 
 ## 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                                                              |
+| ----------- | ----------- | ------- | ---------------------------------------------------------------------- |
+| `flush`     | `boolean`   | `false` | Remove o inset para conteúdo que controla o próprio recuo.             |
+| `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
 
@@ -489,25 +508,18 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Arqu
 
 ## Propriedades de DialogTitle
 
-| Propriedade | Tipo        | Padrão | Descrição                            |
-| ----------- | ----------- | ------ | ------------------------------------ |
-| `level`     | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `h2` da primitiva | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível. |
-| `className` | `string`    |        | Ajusta o título. No modo padrão, ele trunca quando não cabe na linha; no alerta, fica centralizado e pode ocupar mais de uma linha. |
-| `children`  | `ReactNode` |        | Nome da tarefa ou do conteúdo modal. |
+| Propriedade | Tipo                         | Padrão            | Descrição                                                                                                                           |
+| ----------- | ---------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `level`     | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `h2` da primitiva | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível.                                                                 |
+| `className` | `string`                     |                   | Ajusta o título. No modo padrão, ele trunca quando não cabe na linha; no alerta, fica centralizado e pode ocupar mais de uma linha. |
+| `children`  | `ReactNode`                  |                   | Nome da tarefa ou do conteúdo modal.                                                                                                |
 
 ## Propriedades de DialogMedia
 
-A moldura vem do `IconTile`, como nas demais famílias. No `mode="alert"` ela cresce e centraliza:
-ali a mídia não acompanha uma linha de título, ela é o que faz a pessoa reconhecer a resposta.
-
-| Propriedade | Tipo                                                        | Padrão    | Descrição                                          |
-| ----------- | ----------------------------------------------------------- | --------- | -------------------------------------------------- |
-| `size`      | `'xs' \| 'sm' \| 'default' \| 'lg'`                          | `sm`      | Escala da moldura; no alerta vale a moldura maior. |
-| `context`   | `UiContext`                                                  | `neutral` | Cor semântica da moldura.                          |
-| `variant`   | `'subtle' \| 'outline'`                                      | `subtle`  | Tratamento visual da moldura.                      |
-| `className` | `string`                                                     |           | Ajustes pontuais da moldura.                       |
-| `children`  | `ReactNode`                                                  |           | Ícone que reforça o contexto da resposta.          |
-| `asChild` | `boolean` | `false` | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
+| Propriedade | Tipo        | Padrão | Descrição                                                               |
+| ----------- | ----------- | ------ | ----------------------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta o alinhamento do slot.                                           |
+| `children`  | `ReactNode` |        | `IconTile`, marca, imagem ou glifo. O slot não acrescenta apresentação. |
 
 ## Propriedades de DialogClose
 
@@ -540,7 +552,7 @@ imperativa.
 | -------- | ----------- | ------ | ------------------------------------------------ |
 | `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`.      |
+| `media`  | `ReactNode` |        | Exibe o nó recebido em `DialogMedia`.            |
 | `action` | `string`    | `'OK'` | Define o rótulo de reconhecimento.               |
 
 ## Opções de dialog.confirm
@@ -549,7 +561,7 @@ imperativa.
 | --------- | ----------------------- | ------------- | ------------------------------------------------------------------- |
 | `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`.                         |
+| `media`   | `ReactNode`             |               | Exibe o nó recebido em `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.                               |
@@ -560,7 +572,7 @@ imperativa.
 | -------------- | ----------------------- | ------------- | ------------------------------------------------------------------ |
 | `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`.                        |
+| `media`        | `ReactNode`             |               | Exibe o nó recebido em `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.                              |
@@ -573,7 +585,7 @@ imperativa.
 | --------- | ------------------------- | ------ | ------------------------------------------------ |
 | `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`.      |
+| `media`   | `ReactNode`               |        | Exibe o nó recebido em `DialogMedia`.            |
 | `actions` | `readonly DialogChoice[]` |        | Declara os resultados disponíveis.               |
 
 ## Propriedades de DialogChoice
@@ -586,3 +598,33 @@ imperativa.
 | `context`      | `ButtonContext` | Última ação: `primary`; demais: `neutral` | Define o significado semântico.                       |
 | `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 header 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`.

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

@@ -18,9 +18,11 @@ cantos, em qualquer valor de `side`.
     <DrawerHeader>
       <DrawerTitle>ABC-1D23</DrawerTitle>
     </DrawerHeader>
-    <DrawerBody className="space-y-1 text-sm text-muted-foreground">
-      <p>Corolla XEi 2022 · 38.400 km</p>
-      <p>Última revisão em 12 de maio.</p>
+    <DrawerBody className="text-sm text-muted-foreground">
+      <div className="space-y-1">
+        <p>Corolla XEi 2022 · 38.400 km</p>
+        <p>Última revisão em 12 de maio.</p>
+      </div>
     </DrawerBody>
   </DrawerContent>
 </Drawer>
@@ -42,9 +44,11 @@ neutra e sutil; `closeSize` escolhe entre `xs` e `sm`, com `sm` como padrão.
     <DrawerHeader>
       <DrawerTitle>Editar veículo</DrawerTitle>
     </DrawerHeader>
-    <DrawerBody className="space-y-2">
-      <Label htmlFor="vehicle-owner">Responsável</Label>
-      <Input id="vehicle-owner" defaultValue="Marina Alves" />
+    <DrawerBody>
+      <div className="space-y-2">
+        <Label htmlFor="vehicle-owner">Responsável</Label>
+        <Input id="vehicle-owner" defaultValue="Marina Alves" />
+      </div>
     </DrawerBody>
     <DrawerFooter>
       <ButtonGroup mode="spaced">
@@ -102,9 +106,9 @@ título ocupa a folga, as ações vão para o extremo oposto e o botão de fecha
 nó que não seja um desses slots interrompe a renderização com um erro; contexto e conteúdo
 pertencem ao `DrawerBody`.
 
-`DrawerMedia` é a moldura de ícone do Opus — o mesmo [`IconTile`](/ui/icon-tile) —, útil para
-identificar o tipo do recurso aberto. `DrawerNavigation` carrega o retorno de um fluxo encadeado,
-em que o painel permanece aberto e troca de etapa.
+`DrawerMedia` reserva o espaço que identifica o tipo do recurso aberto, sem acrescentar moldura.
+Componha [`IconTile`](/ui/icon-tile) quando ela ajudar na hierarquia. `DrawerNavigation` carrega o
+retorno de um fluxo encadeado, em que o painel permanece aberto e troca de etapa.
 
 ```tsx preview
 <Drawer>
@@ -118,8 +122,10 @@ em que o painel permanece aberto e troca de etapa.
           <ArrowLeft />
         </Button>
       </DrawerNavigation>
-      <DrawerMedia context="primary">
-        <CarFront />
+      <DrawerMedia>
+        <IconTile size="sm" context="primary">
+          <CarFront />
+        </IconTile>
       </DrawerMedia>
       <DrawerTitle>ABC-1D23</DrawerTitle>
       <DrawerActions>
@@ -210,13 +216,10 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 
 ## Propriedades de DrawerMedia
 
-| Propriedade | Tipo                                                                     | Padrão      | Descrição                                                                                                                  |
-| ----------- | ------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `size`      | `'xs' \| 'sm' \| 'default' \| 'lg'`                                      | `'sm'`      | Tamanho da moldura e do glifo na escala compartilhada.                                                                     |
-| `context`   | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor.                                                                                              |
-| `variant`   | `'subtle' \| 'outline'`                                                  | `'subtle'`  | Usa preenchimento tonal ou acrescenta borda.                                                                               |
-| `className` | `string`                                                                 |             | Ajusta a moldura sem substituir a escala.                                                                                  |
-| `asChild`   | `boolean`                                                                | `false`     | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
+| Propriedade | Tipo        | Padrão | Descrição                                                               |
+| ----------- | ----------- | ------ | ----------------------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta o alinhamento do slot.                                           |
+| `children`  | `ReactNode` |        | `IconTile`, marca, imagem ou glifo. O slot não acrescenta apresentação. |
 
 ## Propriedades de DrawerNavigation
 
@@ -244,7 +247,14 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 
 `DrawerBody` aceita os atributos de `HTMLDivElement` e ocupa a região flexível e rolável entre
 `DrawerHeader` e `DrawerFooter`. O cabeçalho nomeia o painel; contexto relevante entra no começo
-do corpo como texto ou `Alert`.
+do corpo como texto ou `Alert`. Seus filhos diretos recebem o ritmo estrutural; use `flush` quando
+o conteúdo controlar o próprio inset e um wrapper filho para relações internas mais compactas.
+
+| Propriedade | Tipo        | Padrão  | Descrição                                                  |
+| ----------- | ----------- | ------- | ---------------------------------------------------------- |
+| `flush`     | `boolean`   | `false` | Remove o inset para conteúdo que controla o próprio recuo. |
+| `className` | `string`    |         | Ajusta ocupação, overflow, alinhamento ou tipografia.      |
+| `children`  | `ReactNode` |         | Blocos principais do painel.                               |
 
 ## Propriedades de DrawerFooter
 
@@ -252,3 +262,37 @@ do corpo como texto ou `Alert`.
 | ----------- | ----------- | ------ | ------------------------------------------------------------- |
 | `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 header 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`.

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

@@ -37,14 +37,14 @@ vincula ao controle, ligue-o ao controle por `aria-labelledby` para manter o nom
 
 ## Conjunto com legenda e erro
 
-Use [`Content`](/ui/content) com `as="fieldset"` para nomear um conjunto de campos relacionados. O título vira a legenda
+Use [`Surface`](/ui/surface) com `as="fieldset"` para nomear um conjunto de campos relacionados. O título vira a legenda
 nativa, enquanto `FieldGroup` define o espaçamento e `FieldSeparator` marca uma divisão.
 `FieldError` aparece somente quando existe mensagem de erro. Declare `data-invalid="true"` no
 `Field` para que o rótulo acompanhe o contexto de erro; `aria-invalid` marca apenas o controle. O
 `ActionForm` define os dois atributos sozinho.
 
 ```tsx preview col md
-<Content as="fieldset" title="Novo agente">
+<Surface as="fieldset" title="Novo agente">
   <FieldGroup>
     <Field data-invalid="true">
       <FieldLabel htmlFor="agent-name">Nome</FieldLabel>
@@ -69,7 +69,7 @@ nativa, enquanto `FieldGroup` define o espaçamento e `FieldSeparator` marca uma
       />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Campo desabilitado
@@ -86,15 +86,14 @@ declare também `data-disabled="true"` no `Field`: `FieldLabel` e `FieldTitle` e
 
 ## Conjunto com moldura
 
-Use a moldura para distinguir grupos vizinhos que continuem pertencendo ao mesmo formulário. O
-título permanece uma legenda semântica. A moldura é contínua por padrão; quando o agrupamento pedir
-o acabamento compacto com a legenda integrada à borda, declare `frameVariant="legend"`.
+Use a moldura para distinguir grupos vizinhos que continuem pertencendo ao mesmo formulário.
+Declare `as="fieldset"`: a `Surface` transforma o header em `legend` nativa e preserva o título
+como legenda semântica.
 
 ```tsx preview col md
-<Content
+<Surface
   as="fieldset"
   framed
-  frameVariant="legend"
   title={
     <span className="flex items-center gap-2">
       <IconTile size="xs">
@@ -110,13 +109,13 @@ o acabamento compacto com a legenda integrada à borda, declare `frameVariant="l
       <Input id="vehicle-plate" defaultValue="GBR1A03" />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Compatibilidade de FieldSet
 
 `FieldSet` e `FieldLegend` continuam disponíveis para composições existentes. Em código novo,
-prefira `Content as="fieldset"`: ele reúne legenda, corpo e moldura na mesma anatomia usada pelas
+prefira `Surface as="fieldset"`: ele reúne legenda, corpo e moldura na mesma anatomia usada pelas
 demais regiões nomeadas. A migração pode ser gradual porque os controles e o `FieldGroup` não mudam.
 
 ## Propriedades de FieldSet
@@ -127,11 +126,11 @@ demais regiões nomeadas. A migração pode ser gradual porque os controles e o
 
 ## Propriedades de Field
 
-| Propriedade    | Tipo                                         | Padrão       | Descrição                                                                                             |
-| -------------- | -------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
-| `orientation`  | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção fixa do campo. `responsive` permanece como alias compatível de `horizontal`.                  |
-| `data-invalid` | `boolean \| 'true' \| 'false'`               |              | Com `true`, aplica o contexto de erro ao campo e ao rótulo. O `ActionForm` define o atributo sozinho. |
-| `data-disabled` | `'true' \| 'false'`                         |              | Com `true`, esmaece `FieldLabel` e `FieldTitle`. Declare `disabled` também no controle. |
+| Propriedade     | Tipo                                         | Padrão       | Descrição                                                                                             |
+| --------------- | -------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
+| `orientation`   | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção fixa do campo. `responsive` permanece como alias compatível de `horizontal`.                  |
+| `data-invalid`  | `boolean \| 'true' \| 'false'`               |              | Com `true`, aplica o contexto de erro ao campo e ao rótulo. O `ActionForm` define o atributo sozinho. |
+| `data-disabled` | `'true' \| 'false'`                          |              | Com `true`, esmaece `FieldLabel` e `FieldTitle`. Declare `disabled` também no controle.               |
 
 ## Propriedades de FieldLegend
 

package/src/ui/docs/content/icon-tile.md

@@ -18,19 +18,20 @@ uma classe `size-*` preserva a própria medida.
 Slots genéricos de ícone, como `FieldLegend.icon`, não criam a moldura: passe o glifo quando quiser
 só o ícone e componha `IconTile` quando a moldura reforçar a hierarquia.
 
-Os slots de mídia das superfícies já são um `IconTile`: `CardMedia`, `ContentMedia`, `DialogMedia`,
-`DrawerMedia` e `PaneMedia` desenham a moldura sozinhos. Passe só o glifo e escolha `size`,
-`context` e `variant` no próprio slot. Em [`Content`](/ui/content), um `IconTile` passado em
-`media` é adotado pelo slot, que herda o que ele declara, em vez de desenhar uma moldura dentro da
-outra.
+Os slots de mídia estruturais não criam decoração. `SurfaceMedia`, `DialogMedia` e `DrawerMedia`
+reservam posição e alinhamento, mas preservam o nó recebido. Passe o glifo diretamente
+quando ele deve ficar solto; componha `IconTile` de forma explícita quando quiser moldura.
 
 ```tsx preview col md
-<Content
+<Surface
   as="fieldset"
   framed
-  frameVariant="legend"
   title="Veículo"
-  media={<CarFront aria-hidden="true" />}
+  media={
+    <IconTile size="xs">
+      <CarFront aria-hidden="true" />
+    </IconTile>
+  }
 >
   <FieldGroup>
     <Field>
@@ -38,7 +39,7 @@ outra.
       <Input id="icon-tile-plate" />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Propriedades de IconTile
@@ -59,10 +60,10 @@ não é renderizado pelo `IconTile`. Os padrões são os mesmos do componente: `
 
 ```ts
 function iconTileVariants(options?: {
-  context?: IconTileContext | null
-  variant?: IconTileVariant | null
-  size?: IconTileSize | null
-}): string
+  context?: IconTileContext | null;
+  variant?: IconTileVariant | null;
+  size?: IconTileSize | null;
+}): string;
 ```
 
 `resolveIconTileStyle` continua exportado, mas está depreciado e sai em uma próxima versão maior. Ele