@topjoao/top-design-system 0.1.2-beta.0 → 0.1.2

package/README.md

@@ -265,8 +265,9 @@ sendo explorado recebem destaque.
 | `favoriteItems` | `TopNavItem[]` / `[]` | Favoritos fornecidos pelo pai para dropdown e Drawer. |
 | `showFavoriteToggle` | `boolean` / `false` | Exibe a estrela da página atual. |
 | `favoriteActive` | `boolean` / `false` | Estado visual da estrela atual. |
-| `mobileOpen` | `boolean` | Controle opcional com `v-model:mobile-open`. |
-| `appearance` | `TopNavBarAppearance` | Tokens visuais locais descritos abaixo. |
+| `mobileOpen` | `boolean` | Controle opcional com `v-model:mobile-open`. |
+| `appearance` | `TopNavBarAppearance` | Tokens visuais locais descritos abaixo. |
+| `spacing` | `TopNavBarSpacing` | Espaçamento do conteúdo no cabeçalho e breadcrumbs; preserva os padrões atuais quando omitido. |
 
 ### Eventos
 
@@ -317,8 +318,25 @@ breadcrumbs. A biblioteca mede uma cópia invisível da faixa com
 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
-
+### Aparência e responsividade
+
+Use `spacing` para criar uma zona segura horizontal sem limitar o fundo das
+duas faixas. Os valores são aplicados no elemento raiz como
+`--top-nav-header-padding` e `--top-nav-breadcrumb-padding`; o cabeçalho e o
+breadcrumb continuam ocupando toda a largura da viewport.
+Em telas móveis, esses valores também são usados, salvo se a aplicação já
+definir as variáveis específicas `--top-nav-header-padding-mobile` ou
+`--top-nav-breadcrumb-padding-mobile`.
+
+```vue
+<TopNavBar
+  :spacing="{
+    headerPadding: '0.625rem max(2rem, calc((100vw - 80rem) / 2 + 2rem))',
+    breadcrumbPadding: '0.25rem max(2rem, calc((100vw - 80rem) / 2 + 2rem))',
+  }"
+/>
+```
+
 `appearance` é propositalmente pequeno e semântico. Use `colors` para
 `navigation`, `text`, `mutedText`, `accent`, `border`, `menuText`,
 `mobileActiveText` e `favoritesText`; `surfaces` para `breadcrumb`, `drawer`,
@@ -347,9 +365,10 @@ tema global pode controlar o componente sem precisar usar `!important`:
   --top-nav-font-family: var(--app-font-family);
   --top-nav-font-size: var(--app-font-size);
   --top-nav-strong-font-weight: 600;
-  --top-nav-action-size: 2.5rem;
-  --top-nav-header-padding: 0.625rem 1.5rem;
-  --top-nav-menu-item-padding: 0.5rem 0.75rem;
+  --top-nav-action-size: 2.5rem;
+  --top-nav-header-padding: 0.625rem 1.5rem;
+  --top-nav-breadcrumb-padding: 0.25rem 1.5rem;
+  --top-nav-menu-item-padding: 0.5rem 0.75rem;
   --top-nav-section-width: 16rem;
   --top-nav-column-width: 18rem;
   --top-nav-mobile-active-bg: #fff;
@@ -971,7 +990,8 @@ obrigatório. `TopNavAction`, `TopNavUser`, `TopNavClient` e
 `TopNavUserMenuItem` correspondem às props de mesmo nome. A aparência da barra
 é definida por `TopNavBarAppearance` e seus subtipos exportados:
 `TopNavBarColors`, `TopNavBarSurfaces`, `TopNavBarBorders`, `TopNavBarShape` e
-`TopNavBarFocus`.
+`TopNavBarFocus`. `TopNavBarSpacing` tipa as propriedades opcionais
+`headerPadding` e `breadcrumbPadding` da prop `spacing`.
 
 `TopInputNumberValue`, `TopInputNumberMode`, `TopInputNumberButtonLayout` e
 `TopInputNumberCurrencyInputMode`