@softize/opus 30.0.0 → 31.1.0

package/src/ui/docs/content/date-input.md

@@ -0,0 +1,67 @@
+## Digitar ou escolher uma data
+
+Use `DateInput` para preencher uma data civil, como uma entrega ou um feriado. O campo
+exibe `DD/MM/AAAA` e abre o calendário em português ao clicar em qualquer parte do controle.
+O clique mantém o foco na digitação. O ícone é decorativo e não adiciona uma parada de Tab;
+o atalho `Alt` + seta para baixo leva o foco para o calendário.
+
+```tsx preview col md
+function Demo() {
+  const [date, setDate] = useState("2026-11-02")
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="delivery-date">Data de entrega</Label>
+      <DateInput id="delivery-date" value={date} onValueChange={setDate} />
+    </div>
+  )
+}
+render(<Demo />)
+```
+
+A máscara insere as barras durante a digitação: basta informar `02112026`. Também é possível
+digitar `02/11/2026`, colar `2026-11-02` ou escolher o dia no
+calendário. Uma data válida é emitida como `2026-11-02`; apagar o campo emite `''`. O componente
+mantém o dia civil, sem transformá-lo em um instante UTC.
+
+Texto incompleto ou uma data impossível permanecem no campo com a máscara, sem conversão para ISO.
+Valide o valor antes de persistir: o componente não troca `31/02/2026` por um dia de março nem
+preserva silenciosamente a data anterior. No `ActionForm`, o schema do contrato mantém essa
+responsabilidade.
+
+## Formulário declarativo
+
+Declare `widget: 'date'` no campo do contrato e use um schema de data civil. O
+[`ActionForm`](/ui/action-form) compõe o `DateInput` com rótulo, hint, erro e foco de validação.
+
+```tsx
+const fields = { date: { label: "Data", widget: "date" as const } }
+const input = z.object({ date: z.string().date("Informe uma data válida.") })
+```
+
+## Teclado e estados
+
+Com foco no campo, `Alt` + seta para baixo abre o calendário e leva o foco até ele. As setas navegam pelos dias;
+selecionar uma data fecha o calendário e devolve o foco ao campo. `Escape` fecha o calendário
+sem fechar o diálogo que o contém. É possível substituir trechos selecionados e apagar com
+`Backspace` ou `Delete`, sem ficar preso às barras da máscara. `disabled` e `readOnly` impedem
+a abertura pelo campo e pelo atalho.
+Associe `Label.htmlFor` ao `id` e use `aria-describedby` para ajuda ou erro.
+
+Para manter um mês inteiro visível, use [`Calendar`](/ui/calendar). Para um campo com estado
+interno, forneça `defaultValue`; `value` e `onValueChange` tornam o componente controlado.
+
+## Propriedades de DateInput
+
+| Propriedade | Tipo | Padrão | Efeito |
+| --- | --- | --- | --- |
+| `value` | `string` | — | Valor controlado: ISO quando válido, texto durante digitação inválida ou incompleta. |
+| `defaultValue` | `string` | `''` | Valor inicial no modo não controlado; restaurado no reset do formulário nativo. |
+| `onValueChange` | `(value: string) => void` | — | Recebe a data civil, o texto em edição ou `''`. |
+| `name` | `string` | — | Envia o valor por um campo oculto no formulário nativo, sem converter para a apresentação brasileira. |
+| `placeholder` | `string` | `DD/MM/AAAA` | Exemplo de formato no campo vazio. |
+| `disabled`, `readOnly` | `boolean` | `false` | Impedem edição e abertura do calendário. |
+| `id`, `ref`, `form`, `onBlur`, `aria-*` | Atributos do input | — | Identificação, foco, vínculo com formulário e descrição acessível do campo visível. |
+| `className` | `string` | — | Classes da moldura do campo, seguindo o Input com adorno. |
+
+O componente não aceita `type`, `onChange`, `icon`, `trailing`, `min`, `max` ou `step`.
+O contrato define os limites de negócio; `onValueChange` substitui o evento de alteração nativo.

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>
 ```
 
@@ -469,20 +432,22 @@ reservado à orientação textual breve. Os itens quebram em várias linhas quan
 ```tsx
 <Dialog defaultOpen>
   <DialogContent>
-    <DialogHeader />
+    <DialogHeader>
+      <DialogTitle>Manual de atendimento</DialogTitle>
+      <DialogDescription>Orientações para a equipe.</DialogDescription>
+      <DialogMeta>
+        <Badge>Publicado</Badge>
+        <span>Por Ana</span>
+      </DialogMeta>
+    </DialogHeader>
     <DialogBody>
-      <DialogIntro>
-        <DialogTitle>Manual de atendimento</DialogTitle>
-        <DialogDescription>Orientações para a equipe.</DialogDescription>
-        <DialogMeta><Badge>Publicado</Badge><span>Por Ana</span></DialogMeta>
-      </DialogIntro>
       <p>Conteúdo do manual.</p>
     </DialogBody>
   </DialogContent>
 </Dialog>
 ```
 
-A composição aceita um único `DialogMeta` e exige um `DialogTitle`. Na forma explícita, coloque-o em `DialogIntro` ou no `DialogHeader` compacto. Não coloque o slot solto no corpo.
+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`.
 
@@ -506,19 +471,19 @@ O modo `alert` conserva sua composição especializada e não recebe `DialogMeta
 
 ## 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. |
 
@@ -644,63 +609,30 @@ 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. |
+| 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

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>
 ```
 
@@ -199,20 +175,22 @@ reservado à orientação textual breve. Os itens quebram em várias linhas quan
 ```tsx
 <Drawer defaultOpen>
   <DrawerContent>
-    <DrawerHeader />
+    <DrawerHeader>
+      <DrawerTitle>Manual de atendimento</DrawerTitle>
+      <DrawerDescription>Orientações para a equipe.</DrawerDescription>
+      <DrawerMeta>
+        <Badge>Publicado</Badge>
+        <span>Por Ana</span>
+      </DrawerMeta>
+    </DrawerHeader>
     <DrawerBody>
-      <DrawerIntro>
-        <DrawerTitle>Manual de atendimento</DrawerTitle>
-        <DrawerDescription>Orientações para a equipe.</DrawerDescription>
-        <DrawerMeta><Badge>Publicado</Badge><span>Por Ana</span></DrawerMeta>
-      </DrawerIntro>
       <p>Conteúdo do manual.</p>
     </DrawerBody>
   </DrawerContent>
 </Drawer>
 ```
 
-A composição aceita um único `DrawerMeta` e exige um `DrawerTitle`. Na forma explícita, coloque-o em `DrawerIntro` ou no `DrawerHeader` compacto. Não coloque o slot solto no corpo.
+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
 
@@ -239,20 +217,20 @@ A composição aceita um único `DrawerMeta` e exige um `DrawerTitle`. Na forma
 
 ## 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. |
 
@@ -305,67 +283,30 @@ 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. |
+| 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

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>

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

@@ -70,6 +70,9 @@ Associe `htmlFor` no `Label` ao `id` do campo para que o clique no rótulo mova
 `type` é repassado ao `<input>` nativo, permitindo que o navegador escolha teclado e validação
 adequados.
 
+Para datas com digitação em formato brasileiro e calendário do Opus, use
+[`DateInput`](/ui/date-input).
+
 ```tsx preview col md
 <Input type="email" placeholder="Ex.: joao@softize.com.br" />
 <Input type="password" placeholder="Token de serviço" />