@topjoao/top-design-system 0.1.0-beta.20 → 0.1.0-beta.22

package/README.md

@@ -234,8 +234,9 @@ sendo explorado recebem destaque.
 | `showAia`, `showSupport` | `boolean` / `false` | Exibem as ações opcionais. |
 | `aiaActive` | `boolean` / `false` | Estado visual do botão Aia. |
 | `aiaLabel`, `supportLabel` | `string` | Textos acessíveis e rótulos do Drawer. |
-| `actions` | `TopNavAction[]` / `[]` | Ações genéricas, como integrações, emitidas por `action`. |
-| `user` | `TopNavUser` | Dados exclusivamente visuais do usuário. |
+| `actions` | `TopNavAction[]` / `[]` | Ações genéricas, como integrações, emitidas por `action`. |
+| `client` | `TopNavClient` | Organização, cliente ou escopo ativo exibido no cabeçalho; não cria ação nem seletor. |
+| `user` | `TopNavUser` | Dados exclusivamente visuais do usuário. |
 | `userMenuItems` | `TopNavUserMenuItem[]` | Opções emitidas por `user-action`; suporta separadores. |
 | `favoriteItems` | `TopNavItem[]` / `[]` | Favoritos fornecidos pelo pai para dropdown e Drawer. |
 | `showFavoriteToggle` | `boolean` / `false` | Exibe a estrela da página atual. |
@@ -266,7 +267,7 @@ atalho abre primeiro o Drawer e foca a busca móvel. `Escape` fecha os painéis.
 | Slot | Uso |
 |---|---|
 | `brand` | Marca; recebe `{ compact }`. |
-| `context`, `scope` ou `client` | Contexto operacional; aliases com prioridade nessa ordem e `{ compact }`. |
+| `context`, `scope` ou `client` | Contexto operacional; aliases com prioridade nessa ordem, recebem `{ client, compact }`. O slot `client` substitui a apresentação padrão da prop `client`. |
 | `context-compact` | Variante explícita usada no último estágio de overflow. |
 | `actions` | Conteúdo adicional do cabeçalho; recebe `{ compact, close }`. |
 | `aia-icon`, `support-icon` | Ícones customizados das ações quadradas. |
@@ -280,24 +281,36 @@ atalho abre primeiro o Drawer e foca a busca móvel. `Escape` fecha os painéis.
 | `drawer-actions` | Ações; recebe `{ actions, select, close }`. |
 | `drawer-before-menu`, `drawer-after-menu` | Conteúdo antes/depois do trilho rolável. |
 | `drawer-menu` | Substitui a árvore; recebe `{ sections, select, close }`. |
-| `drawer-user` | Rodapé de usuário; recebe `{ user, open, toggle }`. |
-| `drawer-footer` | Conteúdo final adicional; recebe `{ close }`. |
+| `drawer-user` | Rodapé de usuário; recebe `{ user, open, toggle }`. |
+| `drawer-footer` | Conteúdo final adicional; recebe `{ close }`. |
+
+### Faixa de favoritos
+
+No desktop, `favoriteItems` aparece primeiro em uma faixa horizontal abaixo dos
+breadcrumbs. A biblioteca mede uma cópia invisível da faixa com
+`ResizeObserver`: se a largura real não couber, ela é substituída pelo dropdown
+`Favoritos`. O mesmo dropdown é usado depois que a página passa de `120px` de
+scroll e a faixa retorna apenas ao chegar a `24px` ou menos. Os valores evitam
+oscilações perto do topo e reproduzem o comportamento do AppSidebar.
 
 ### Aparência e responsividade
 
-`appearance` aceita `headerBackground`, `breadcrumbBackground`,
-`drawerBackground`, `drawerFooterBackground`, `textColor`, `mutedTextColor`,
-`accentColor`, `menuBackground`, `menuTextColor`, `menuHoverBackground`,
-`menuExploredBackground`, `borderColor`, `menuBorderColor` (a borda externa de
-6px), `menuOutlineColor`, `radius`, `drawerRadius`, `headerHeight` (`height` é
-mantido como alias), `drawerWidth`, `shadow`, `fontFamily`, `fontSize`,
-`secondaryFontSize`, `captionFontSize`, `lineHeight`, `fontWeight`,
-`strongFontWeight`, `actionSize`, `headerPadding`, `mobileHeaderPadding`,
-`breadcrumbPadding`, `mobileBreadcrumbPadding`, `menuItemPadding`,
-`itemLineHeight`, `sectionWidth`, `columnWidth` e `contextCompactWidth`.
-No Drawer, `mobileActiveBackground`, `mobileActiveTextColor`,
-e `mobileDividerColor` controlam respectivamente o módulo ativo e os
-separadores horizontais.
+`appearance` é propositalmente pequeno e semântico. Use `colors` para
+`navigation`, `text`, `mutedText`, `accent`, `border`, `menuText`,
+`mobileActiveText` e `favoritesText`; `surfaces` para `breadcrumb`, `drawer`,
+`drawerFooter`, `menu`, `menuHover`, `menuExplored`, `mobileActive`,
+`favorites` e `currentPage`; `borders` para `menu` (a borda externa de 6px),
+`menuOutline`, `mobileDivider`, `favorites` e `currentPage`; `shape` para
+`radius`, `drawerRadius`, `shadow` e `favoritesShadow`; e `focus` para
+`onDark` e `onLight`.
+
+```ts
+const appearance = {
+  colors: { navigation: '#09090b', text: '#f4f4f5', border: 'rgb(255 255 255 / 14%)' },
+  surfaces: { drawer: '#09090b', menu: '#18181b', menuHover: '#27272a' },
+  shape: { radius: '8px', shadow: '0 12px 30px rgb(0 0 0 / 25%)' },
+}
+```
 
 A biblioteca não fixa tipografia inline. Por padrão, família, tamanho, peso e
 altura de linha são herdados da aplicação consumidora. Além disso, `appearance`
@@ -316,13 +329,26 @@ tema global pode controlar o componente sem precisar usar `!important`:
   --top-nav-section-width: 16rem;
   --top-nav-column-width: 18rem;
   --top-nav-mobile-active-bg: #fff;
-  --top-nav-mobile-active-fg: #025a84;
-  --top-nav-mobile-divider: rgb(255 255 255 / 20%);
-}
+  --top-nav-mobile-active-fg: #025a84;
+  --top-nav-mobile-divider: rgb(255 255 255 / 20%);
+  --top-nav-mobile-item-gap: 0.25rem;
+  --top-nav-mobile-submenu-padding: 0.5rem 0 0.375rem 0.35rem;
+  --top-nav-favorites-bg: #f8fafc;
+  --top-nav-favorites-fg: #0f172a;
+  --top-nav-favorites-border: #e2e8f0;
+  --top-nav-favorites-shadow: 0 1px 2px rgb(15 23 42 / 6%);
+  --top-nav-focus-ring: #dbeafe;
+  --top-nav-focus-ring-light: #1d4ed8;
+  --top-nav-current-bg: rgb(255 255 255 / 10%);
+  --top-nav-current-border: rgb(255 255 255 / 15%);
+  --top-nav-menu-scrollbar-thumb: #94a3b8;
+}
 ```
 
-As variáveis globais também alcançam o Drawer teleportado. Um valor passado por
-`appearance` tem precedência local e não altera os demais tokens do tema.
+As variáveis globais também alcançam o Drawer teleportado. Use-as para ajustes
+estruturais — tipografia, larguras, alturas, padding e espaçamentos do menu —
+em vez de props no componente. Um valor passado por `appearance` tem precedência
+local e não altera os demais tokens do tema.
 
 O breakpoint móvel é `1024px`. No desktop, um `ResizeObserver` reaplica a mesma
 sequência progressiva do AppSidebar: ações colapsam abaixo de `1440px`, busca
@@ -331,11 +357,13 @@ conteúdo ainda transbordar, o contexto recebe `compact: true`. O último estág
 também limita o contêiner do contexto a `3.25rem`; use `context-compact` quando
 quiser controlar exatamente o que permanece visível.
 
-Abaixo de `1024px`, a navegação desktop desaparece e o Drawer do PrimeVue assume.
-Ele mantém cabeçalho, busca, ações, trilho translúcido rolável, árvore recursiva,
-favoritos e usuário. A transição `menu-expand` existe somente dentro do Drawer;
-os dropdowns desktop abrem sem animação e suas áreas de hover incluem o espaço
-entre gatilho e painel.
+Abaixo de `1024px`, a navegação desktop desaparece e o Drawer do PrimeVue assume.
+Ele mantém cabeçalho, busca, ações, trilho translúcido rolável, árvore recursiva,
+favoritos e usuário. A transição `menu-expand` existe somente dentro do Drawer;
+os dropdowns desktop abrem sem animação e suas áreas de hover incluem o espaço
+entre gatilho e painel. Nessa largura, os breadcrumbs deixam de rolar
+horizontalmente: eles quebram em linhas e o bloco da página atual ocupa sua
+própria linha para permanecer legível.
 
 ## TopButton