@softize/opus 29.0.0 → 30.0.0

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

@@ -190,6 +190,30 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 - O botão de fechar tem o nome acessível `Fechar`. Botões só com ícone no cabeçalho precisam de
   `aria-label`.
 
+## Metadados junto à identidade
+
+Use `DrawerMeta` para badges, autoria e datas relacionados ao registro. A faixa fica
+abaixo da linha de título e ações, com espaço próprio; `DrawerDescription` continua
+reservado à orientação textual breve. Os itens quebram em várias linhas quando necessário.
+
+```tsx
+<Drawer defaultOpen>
+  <DrawerContent>
+    <DrawerHeader />
+    <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.
+
 ## Propriedades de Drawer
 
 | Propriedade    | Tipo                      | Padrão  | Descrição                                                                 |
@@ -335,3 +359,15 @@ 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.
+
+## Propriedades de DrawerMeta
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `children` | `ReactNode` | Badges, datas, autoria ou outros metadados do registro. |
+| `className` | `string` | Ajusta a faixa de metadados. |
+
+Aceita atributos nativos de `div`. O intervalo superior é de 0,75rem; os itens têm
+0,75rem entre colunas e 0,5rem entre linhas. O componente não insere separadores nem
+carrega dados. Omitir o slot não reserva espaço. Metadados não substituem orientações
+ou condições necessárias à decisão e não são anunciados como descrição do modal.

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

@@ -360,11 +360,28 @@ Não use `PageState` para uma falha parcial. Se outra parte da página continua
 estado na própria seção com [`DataState`](/ui/data-state), [`ActionView`](/ui/action-view),
 [`ActionList`](/ui/action-list) ou [`Alert`](/ui/alert).
 
+## Metadados junto à identidade
+
+Use `PageMeta` para badges, autoria e datas relacionados ao registro. A faixa fica
+abaixo da linha de título e ações, com espaço próprio; `PageDescription` continua
+reservado à orientação textual breve. Os itens quebram em várias linhas quando necessário.
+
+```tsx preview col
+render(
+<Page title="Manual de atendimento" description="Orientações para a equipe." meta={<><Badge>Publicado</Badge><span>Por Ana</span></>}>
+  <p>Conteúdo do manual.</p>
+</Page>
+);
+```
+
+A composição aceita um único `PageMeta` e exige um `PageTitle`. Na forma explícita, coloque-o em `PageIntro` ou no `PageHeader` compacto. Não coloque o slot solto no corpo.
+
 ## Propriedades de Page
 
 | Propriedade   | Tipo                       | Padrão      | Descrição                                                                                                                                                          |
 | ------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `description` | `ReactNode`                |             | Orientação opcional sob o título na forma curta.                                                                                                                   |
+| `meta` | `ReactNode` | | Forma curta: metadados sob o título e a orientação. Exige `title`. |
 | `title`       | `ReactNode`                |             | O h1 da página.                                                                                                                                                    |
 | `actions`     | `ReactNode`                |             | Ações contextuais no extremo oposto do cabeçalho.                                                                                                                  |
 | `layout`      | `'flow' \| 'fill'`         | `'flow'`    | Ocupação de altura, não anatomia: `fill` limita a página ao shell para que uma região interna role e leva essa altura até uma `ActionList` composta em `PageBody`. |
@@ -503,7 +520,7 @@ Aceita atributos HTML de `div` e exige um `PageTitle`. Recebe opcionalmente `Pag
 
 | Propriedade | Tipo                          | Descrição                                                                |
 | ----------- | ----------------------------- | ------------------------------------------------------------------------ |
-| `children`  | `ReactNode`                   | Um `PageTitle` e, opcionalmente, `PageDescription` e `PageIntroActions`. |
+| `children`  | `ReactNode`                   | Um `PageTitle` e, opcionalmente, `PageDescription`, `PageMeta` e `PageIntroActions`. |
 | `className` | `string`                      | Classes adicionais da introdução.                                        |
 | demais      | Atributos de `HTMLDivElement` | Repassados à região introdutória.                                        |
 
@@ -536,3 +553,15 @@ controla a moldura externa; em PageBody, controla o viewport.
 PageShell permite rolagem de contingência quando a rota renderiza um fallback ou um
 wrapper sem altura definida. Para manter o header fixo, a rota deve preservar a cadeia
 flexível de altura até Page. Uma Page diretamente no shell já segue esse contrato.
+
+## Propriedades de PageMeta
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `children` | `ReactNode` | Badges, datas, autoria ou outros metadados do registro. |
+| `className` | `string` | Ajusta a faixa de metadados. |
+
+Aceita atributos nativos de `div`. O intervalo superior é de 0,75rem; os itens têm
+0,75rem entre colunas e 0,5rem entre linhas. O componente não insere separadores nem
+carrega dados. Omitir o slot não reserva espaço. Metadados não substituem orientações
+ou condições necessárias à decisão e não substituem a descrição textual da região.

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

@@ -432,6 +432,24 @@ faixa que cobre o conteúdo ao rolar — usa `bg-[var(--surface-background,var(-
 página, vale `--background`; dentro de uma superfície elevada, o fundo dela. Um contêiner da
 aplicação que pinte outro fundo declara a mesma variável com a cor que usa.
 
+## Metadados junto à identidade
+
+Use `SurfaceMeta` para badges, autoria e datas relacionados ao registro. A faixa fica
+abaixo da linha de título e ações, com espaço próprio; `SurfaceDescription` continua
+reservado à orientação textual breve. Os itens quebram em várias linhas quando necessário.
+
+```tsx preview col
+render(
+<Surface as="article" title="Manual de atendimento" meta={<><Badge>Publicado</Badge><span>Por Ana</span></>}>
+  <p>Conteúdo do manual.</p>
+</Surface>
+);
+```
+
+A composição aceita um único `SurfaceMeta` e exige um `SurfaceTitle`. Na forma explícita, coloque-o em `SurfaceHeader`. Em `fieldset`, coloque os metadados no corpo; a legenda permanece restrita a título e mídia decorativa.
+
+O total da coleção continua ao lado do título: use `count` na forma curta ou `SurfaceCount` na explícita. Se um `SurfaceMeta` antigo representava esse total, migre para `SurfaceCount`.
+
 ## Propriedades de Surface
 
 | Propriedade   | Tipo                                            | Padrão         | Descrição                                                                                              |
@@ -446,6 +464,7 @@ aplicação que pinte outro fundo declara a mesma variável com a cor que usa.
 | `media`       | `ReactNode`                                     |                | Forma curta: conteúdo do slot de mídia, antes do título. Exige `title`.                                |
 | `count`       | `number`                                        |                | Forma curta: total de itens ao lado do título. Exige `title`; indisponível em `fieldset`.              |
 | `description` | `ReactNode`                                     |                | Forma curta: frase de apoio sob o título. Exige `title`; indisponível em `fieldset`.                   |
+| `meta` | `ReactNode` | | Forma curta: metadados sob o título e a orientação. Exige `title`; indisponível em `fieldset`. |
 | `actions`     | `ReactNode`                                     |                | Forma curta: ações sobre a superfície inteira. Exige `title`; indisponível em `fieldset`.              |
 | `className`   | `string`                                        |                | Compõe sobre a superfície. Na caixa simples, é onde entra o recuo.                                     |
 | `children`    | `ReactNode`                                     |                | Filhos livres, que formam o corpo, ou os slots `SurfaceHeader`, `SurfaceBody` e `SurfaceFooter`.       |
@@ -456,7 +475,7 @@ As demais propriedades são as nativas do elemento escolhido em `as`.
 
 | Propriedade | Tipo        | Padrão | Descrição                                                                                                                                                                                               |
 | ----------- | ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children`  | `ReactNode` |        | No máximo um de cada: `SurfaceMedia`, `SurfaceTitle`, `SurfaceMeta`, `SurfaceDescription` e `SurfaceActions`. Em `fieldset`, o `SurfaceTitle` é obrigatório e somente ele e `SurfaceMedia` são aceitos. |
+| `children`  | `ReactNode` |        | No máximo um de cada: `SurfaceMedia`, `SurfaceTitle`, `SurfaceCount`, `SurfaceMeta`, `SurfaceDescription` e `SurfaceActions`. Em `fieldset`, o `SurfaceTitle` é obrigatório e somente ele e `SurfaceMedia` são aceitos. |
 | `className` | `string`    |        | Ajusta a região do header.                                                                                                                                                                              |
 
 `SurfaceHeader` só existe como filho direto de `Surface`.
@@ -475,13 +494,6 @@ As demais propriedades são as nativas do elemento escolhido em `as`.
 | `children`  | `ReactNode` |        | Nome da superfície. O heading usa o `level` declarado em `Surface`. |
 | `className` | `string`    |        | Ajusta o título.                                                    |
 
-## Propriedades de SurfaceMeta
-
-| Propriedade | Tipo        | Padrão | Descrição                                                |
-| ----------- | ----------- | ------ | -------------------------------------------------------- |
-| `children`  | `ReactNode` |        | Metadado curto ao lado do título, como o total de itens. |
-| `className` | `string`    |        | Ajusta o metadado.                                       |
-
 ## Propriedades de SurfaceDescription
 
 | Propriedade | Tipo        | Padrão | Descrição                    |
@@ -520,3 +532,24 @@ um wrapper filho declara relações locais mais compactas.
 é opcional e não repete o título. A mesma regra vale para uma página (`level={1}`), uma seção ou
 um card: condições, limites e consequências necessários à decisão ficam no corpo ou junto do
 controle correspondente. Pular o subheading não deve comprometer a tarefa.
+
+## Propriedades de SurfaceCount
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `children` | `ReactNode` | Contador ao lado do título. |
+| `className` | `string` | Ajusta a apresentação do contador. |
+
+Aceita atributos nativos de `span`. Deve estar em `SurfaceHeader`, fora de `fieldset`.
+
+## Propriedades de SurfaceMeta
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `children` | `ReactNode` | Badges, datas, autoria ou outros metadados do registro. |
+| `className` | `string` | Ajusta a faixa de metadados. |
+
+Aceita atributos nativos de `div`. O intervalo superior é de 0,75rem; os itens têm
+0,75rem entre colunas e 0,5rem entre linhas. O componente não insere separadores nem
+carrega dados. Omitir o slot não reserva espaço. Metadados não substituem orientações
+ou condições necessárias à decisão e não substituem a descrição textual da região.

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

@@ -8,6 +8,13 @@ A variante padrão não possui borda externa; `TableBody` mantém somente as div
 Aplique `text-right` ao cabeçalho e às células quando o domínio pedir alinhamento numérico.
 `TableCaption` descreve a tabela abaixo do conteúdo.
 
+As células quebram texto entre palavras. Identificadores longos sem espaços podem exigir
+rolagem horizontal; aplique `wrap-anywhere` à célula quando quiser permitir quebra no meio
+desses valores. Use `whitespace-nowrap` para preservar valores inteiros, como números e datas.
+O contêiner limita a tabela ao espaço recebido e oferece rolagem horizontal quando o conteúdo
+ou larguras mínimas explícitas não cabem. Em uma composição flex ou grid, permita que o ancestral também
+encolha (`min-w-0`); a tabela não pode redefinir a largura de um ancestral.
+
 ```tsx preview col
 <Table>
   <TableCaption>Sessões recentes do workspace Empresa X.</TableCaption>

package/src/ui/react.tsx

@@ -177,6 +177,7 @@ export {
   DialogActions,
   DialogIntro,
   DialogIntroActions,
+  DialogMeta,
   DialogBody,
   DialogFooter,
   DialogTitle,
@@ -326,6 +327,7 @@ export {
   DrawerActions,
   DrawerIntro,
   DrawerIntroActions,
+  DrawerMeta,
   DrawerClose,
   DrawerContent,
   DrawerFooter,
@@ -517,6 +519,7 @@ export {
   PageHeader,
   PageIntro,
   PageIntroActions,
+  PageMeta,
   PageNavigation,
   PageBack,
   PageTitle,
@@ -549,6 +552,7 @@ export {
   SurfaceTitle,
   SurfaceDescription,
   SurfaceMeta,
+  SurfaceCount,
   SurfaceActions,
   SurfaceBody,
   SurfaceFooter,