@dev-tcloud/tcloud-ui 7.5.3 → 7.7.0

package/docs/tcloud-ui-popover.md

@@ -52,6 +52,7 @@ export class ExampleModule {}
 | `position` | `'top' \| 'right' \| 'bottom' \| 'left'` | Define o lado em que o popover será aberto. | `'bottom'` |
 | `align` | `'start' \| 'center' \| 'end'` | Define o alinhamento do painel em relação ao trigger. | `'start'` |
 | `maxWidth` | `number \| string` | Define a largura do painel aberto. Números são tratados como pixels. | `320` |
+| `appearance` | `'default' \| 'compact' \| 'menu' \| 'borderless'` | Define a variante visual do painel interno. | `'default'` |
 | `disabled` | `boolean` | Desabilita a abertura do popover. | `false` |
 | `showCloseIcon` | `boolean` | Exibe um botão `X` para fechar o popover. | `false` |
 | `open` | `boolean` | Permite controlar a abertura via binding externo. | `false` |
@@ -66,6 +67,29 @@ export class ExampleModule {}
 
 O popover fecha ao clicar fora do componente ou ao pressionar `ESC`. Quando `showCloseIcon` for `true`, um botão `X` também é exibido dentro do painel.
 
+## Aparência do painel
+
+Use `appearance` para escolher uma variante oficial do painel interno sem precisar de `::ng-deep` nos consumidores.
+
+| Valor | Uso recomendado |
+|---|---|
+| `default` | Conteúdo comum, com padding e borda padrão. |
+| `compact` | Conteúdos menores com padding reduzido. |
+| `menu` | Menus de ações ou listas compactas, com padding vertical mínimo. |
+| `borderless` | Conteúdos que já possuem seu próprio espaçamento/borda. |
+
+```html
+<tcloud-ui-popover position="bottom" align="end" maxWidth="180px" appearance="menu">
+  <button type="button" popover-trigger>Ações</button>
+
+  <div popover-content>
+    <button type="button">Editar</button>
+    <button type="button">Duplicar</button>
+    <button type="button">Remover</button>
+  </div>
+</tcloud-ui-popover>
+```
+
 ## Alinhamento e largura
 
 Use `position` para definir o lado de abertura e `align` para definir a borda de ancoragem. Por exemplo, com `position="bottom"` e `align="end"`, o painel abre abaixo do trigger e cresce para a esquerda, mantendo a borda direita alinhada ao botão.

package/docs/tcloud-ui-tab-menu.md

@@ -51,11 +51,12 @@ export class ExampleComponent {}
 | Nome            | Tipo                                         | Descrição                                | Valor Default                              |
 | --------------- | -------------------------------------------- | ---------------------------------------- | ------------------------------------------ |
 | scroll          | boolean                                      | Controla scroll horizontal do cabeçalho. | true                                       |
+| appearance      | 'default'\|'filled'\|'segmented'             | Define a aparência do cabeçalho. Use `filled` para barra preenchida e `segmented` para trilho arredondado. | 'default' |
 | background      | boolean                                      | Aplica fundo padrão.                     | true                                       |
 | backgroundColor | '#FFFFFF'\|'#F1F1F1'\|'white'\|'transparent' | Cor de fundo quando `background=true`.   | 'transparent' (ajustado para branco/cinza) |
 | bottom_line     | boolean                                      | Exibe linha inferior.                    | false                                      |
-| tabOptionTextTone | 'default'\|'inverse'                       | Tom semântico do texto dos `tcloud-ui-tab-option` filhos (`default` escuro, `inverse` claro). | 'default' |
-| tabOptionActiveTextTone | 'default'\|'inverse'                 | Tom semântico do texto ativo dos `tcloud-ui-tab-option` filhos (`default` claro, `inverse` escuro). | 'default' |
+| tabOptionTextTone | 'default'\|'inverse'                       | Tom semântico do texto dos itens visuais do head (`default` escuro, `inverse` claro). | 'default' |
+| tabOptionActiveTextTone | 'default'\|'inverse'                 | Tom semântico do texto ativo dos itens visuais do head (`default` claro, `inverse` escuro). | 'default' |
 
 ### `tcloud-ui-tab-title` / `tcloud-ui-tab-subtitle`
 
@@ -123,25 +124,46 @@ export class ExampleComponent {}
 ### Menu horizontal preenchido
 
 ```html
-<tcloud-ui-tab-menu [active]="'security'" [full]="true">
+<tcloud-ui-tab-menu [active]="'environment-details'" [full]="true">
   <tcloud-ui-tab-head
-    [scroll]="false"
+    appearance="filled"
     [bottom_line]="false"
     [background]="true"
-    tabOptionTextTone="default"
-    tabOptionActiveTextTone="default">
-    <tcloud-ui-tab-option tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="monitoring">Monitoramento</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="log">Log</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="database">Banco de dados</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="executed-actions">Ações executadas</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="backup">Backup</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="infrastructure">Infraestrutura</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="security">Segurança</tcloud-ui-tab-option>
-    <tcloud-ui-tab-option tab="manage">Gerenciar</tcloud-ui-tab-option>
+    tabOptionActiveTextTone="inverse">
+    <tcloud-ui-tab-title tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="monitoring">Monitoramento</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="log">Log</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="database">Banco de dados</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="executed-actions">Ações executadas</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="backup">Backup</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="infrastructure">Infraestrutura</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="security">Segurança</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="manage">Gerenciar</tcloud-ui-tab-title>
   </tcloud-ui-tab-head>
 
-  <tcloud-ui-tab-content tab="security">Conteúdo de segurança</tcloud-ui-tab-content>
+  <tcloud-ui-tab-content tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-content>
+</tcloud-ui-tab-menu>
+```
+
+### Menu segmentado
+
+Use `appearance="segmented"` para criar o modelo em trilho arredondado, com os itens distribuídos em largura igual e o item ativo destacado.
+
+```html
+<tcloud-ui-tab-menu [active]="'application'" [full]="true">
+  <tcloud-ui-tab-head
+    appearance="segmented"
+    [bottom_line]="false"
+    [background]="true"
+    tabOptionActiveTextTone="inverse">
+    <tcloud-ui-tab-title tab="application">Aplicação</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="vpns">VPNs</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="routes">Rotas</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="threat-locker">Threat Locker</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="database-access">Acessos de banco de dados</tcloud-ui-tab-title>
+  </tcloud-ui-tab-head>
+
+  <tcloud-ui-tab-content tab="application">Aplicação</tcloud-ui-tab-content>
 </tcloud-ui-tab-menu>
 ```
 
@@ -158,4 +180,7 @@ export interface ITab {
   id: string;
   disabled: boolean;
 }
+
+export type TabOptionTextTone = 'default' | 'inverse';
+export type TabHeadAppearance = 'default' | 'filled' | 'segmented';
 ```