po-ui · anabye · Jun 23, 2025 · Jun 17, 2025 · Jul 29, 2025
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -43,4 +43,4 @@ Passos para reproduzir:
 #### Observações
 
 Issues sem interação do solicitante por mais de 15 dias corridos serão encerradas.
-Caso você seja TOTVER favor entrar em contato internamente procurando a space do THF no TDN.
+Caso você seja TOTVS favor entrar em contato internamente procurando a space do THF no TDN.
diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md
@@ -18,4 +18,4 @@ Adicione um outro contexto ou imagens sobre a melhoria.
 
 #### Observações
 Issues sem retorno do solicitante por mais de 15 dias corridos serão encerradas.
-Caso você seja TOTVER favor entrar em contato internamente procurando a space do THF no TDN
+Caso você seja TOTVS favor entrar em contato internamente procurando a space do THF no TDN
diff --git a/docs/guides/theme-service.md b/docs/guides/theme-service.md
@@ -199,7 +199,12 @@ export const corporateTheme: PoTheme = {
         },
         onRoot: {
           '--font-family': "'Inter', sans-serif",
-          '--border-radius': '6px'
+          '--border-radius': '6px',
+          '--po-density-header-padding': '2rem'; /* Padding em headers (inclui pages, page slide, modal, widget) */
+          '--po-density-content-padding': '1rem'; /* Padding em contents (inclui pages, container, list view, page slide, widget, stepper, disclaimer-group) */
+          '--po-density-footer-padding': '1rem'; /* Padding em footers (inclui modal e page slide) */
+          '--po-density-gap-header-content': '1rem'; /* Espaço interno entre o header e o content (inclui pages, tabs e stepper) */
+          '--po-density-gap-spacing': '1rem'; /* Espaço interno entre blocos de conteúdo presentes no header e content (inclui dividers e gaps) */
         },
         perComponent: {
           'po-button': {
@@ -270,8 +275,13 @@ setAcessibilidade(nivel: PoThemeA11yEnum) {
 
 ```css
 /* styles.scss */
-:root.override-theme {
+:root .override-theme {
   --color-brand-01-base: #FF0000;
+  --po-density-header-padding: 2rem; /* Padding em headers (inclui pages, page slide, modal, widget) */
+  --po-density-content-padding: 1rem; /* Padding em contents (inclui pages, container, list view, page slide, widget, stepper, disclaimer-group) */
+  --po-density-footer-padding: 1rem; /* Padding em footers (inclui modal e page slide) */
+  --po-density-gap-header-content: 1rem; /* Espaço interno entre o header e o content (inclui pages, tabs e stepper) */
+  --po-density-gap-spacing: 1rem; /* Espaço interno entre blocos de conteúdo presentes no header e content (inclui dividers e gaps) */
 }
 ```
 

diff --git a/...-code-editor/samples/sample-po-code-editor-labs/sample-po-code-editor-labs.component.html b/...-code-editor/samples/sample-po-code-editor-labs/sample-po-code-editor-labs.component.html
@@ -10,7 +10,7 @@
   </po-code-editor>
 </div>
 
-<hr />
+<po-divider />
 
 <form #f="ngForm">
   <div class="po-row">

diff --git a/projects/portal/src/app/app.component.ts b/projects/portal/src/app/app.component.ts
@@ -52,6 +52,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
     if (this.a11yLevel === 'AA') {
       this.poTheme.setA11yDefaultSizeSmall(true);
+      this.poTheme.setA11yDensityMode('small');
     }
   }
 
@@ -130,6 +131,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
     if (this.a11yLevel === 'AA') {
       this.poTheme.setA11yDefaultSizeSmall(true);
+      this.poTheme.setA11yDensityMode('small');
     }
 
     if (dispatchEvent) {

diff --git a/projects/portal/src/app/icons/icons.component.html b/projects/portal/src/app/icons/icons.component.html
@@ -81,7 +81,7 @@ <h3 class="po-pt-1">Como Usar?</h3>
           <div class="po-sm-12 po-md-12 po-lg-10">
             <div class="container-item iconFilter po-row">
               <po-select
-                class="po-sm-12 po-md-4"
+                class="po-sm-12 po-md-4 po-pt-1"
                 [(ngModel)]="iconType"
                 [p-options]="iconTypeOptions"
                 (p-change)="onTypeChange()"

diff --git a/projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.html b/projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.html
@@ -16,7 +16,7 @@
             </po-input>
 
             <button
-              class="po-button po-button-primary po-sm-4 po-md-2 po-mt-4 po-mb-1"
+              class="po-button po-button-primary po-sm-4 po-md-2 po-mt-3 po-mb-2"
               type="submit"
               [disabled]="generatorForm.invalid"
             >

diff --git a/projects/portal/src/styles.css b/projects/portal/src/styles.css
@@ -486,8 +486,7 @@ a,
 
 .docs-api p,
 .app-portal p,
-.app-portal ul:not(.po-listbox-list),
-.app-portal li:not(.po-listbox-item) {
+.app-portal ul:not(.po-listbox-list) {
   margin-bottom: 10px;
   color: var(--color-neutral-dark-80);
 }

diff --git a/...s/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.html b/...s/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.html
@@ -13,7 +13,7 @@
       <div class="po-modal-password-recovery-text po-md-12 po-mb-1">
         {{ emailModalPhrases.firstPhrase }}
       </div>
-      <div class="po-mb-2 po-md-12">
+      <div class="po-md-12">
         <form #emailForm="ngForm">
           <div *ngIf="modalPasswordRecoveryTypeAll">
             <po-radio-group
@@ -26,7 +26,7 @@
             </po-radio-group>
           </div>
 
-          <div class="po-mt-1">
+          <div>
             <po-email
               *ngIf="type === 'email' || type === 'all'"
               name="email"
@@ -77,7 +77,7 @@
 
     <div #smsCodeModal *ngSwitchCase="'smsCode'" class="po-modal-password-recovery-content po-row">
       <div class="po-modal-password-recovery-text po-md-12 po-mb-1">{{ literals.sentSmsCodePhrase }}</div>
-      <div class="po-mb-2 po-md-12">
+      <div class="po-md-12">
         <form #smsCodeForm="ngForm">
           <po-input
             name="sms"

diff --git a/...ple-po-modal-password-recovery-labs/sample-po-modal-password-recovery-labs.component.html b/...ple-po-modal-password-recovery-labs/sample-po-modal-password-recovery-labs.component.html
@@ -11,15 +11,15 @@
 
 <po-button p-label="Open modal password recovery" (p-click)="openPasswordRecoveryModal()"> </po-button>
 
-<hr />
+<po-divider />
 
 <div class="po-row">
   <po-info class="po-md-6" p-label="Model" [p-value]="submitEvent"> </po-info>
 
   <po-info class="po-md-6" p-label="Event" [p-value]="event"> </po-info>
 </div>
 
-<hr />
+<po-divider />
 
 <form #f="ngForm">
   <div class="po-row">

diff --git a/...es/sample-po-page-change-password-labs/sample-po-page-change-password-labs.component.html b/...es/sample-po-page-change-password-labs/sample-po-page-change-password-labs.component.html
@@ -51,7 +51,7 @@
 
   <br />
 
-  <hr />
+  <po-divider />
 
   <form #fRequirements="ngForm">
     <div class="po-row">
@@ -79,7 +79,7 @@
     </div>
   </form>
 
-  <hr />
+  <po-divider />
 
   <div class="po-row">
     <po-button class="po-md-3" p-label="Sample Restore" (p-click)="restore()"> </po-button>

diff --git a/...s/templates/src/lib/components/po-page-dynamic-detail/po-page-dynamic-detail.component.ts b/...s/templates/src/lib/components/po-page-dynamic-detail/po-page-dynamic-detail.component.ts
@@ -142,6 +142,20 @@ export const poPageDynamicDetailLiteralsDefault = {
  * GET {end-point}/metadata?type=detail&version={version}
  * ```
  *
+ * #### Tokens customizáveis
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade         | Descrição                                   | Valor Padrão                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
+ *
  * @example
  *
  * <example name="po-page-dynamic-detail-user" title="PO Page Dynamic Detail User">

diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.ts
@@ -176,6 +176,18 @@ export const poPageDynamicEditLiteralsDefault = {
  * GET {end-point}/metadata?type=edit&version={version}
  * ```
  *
+ * #### Tokens customizáveis
+ *
+ * | Propriedade         | Descrição                                   | Valor Padrão                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
+ *
  * @example
  *
  * <example name="po-page-dynamic-edit-basic" title="PO Page Dynamic Edit Basic">

diff --git a/...plates/src/lib/components/po-page-dynamic-search/po-page-dynamic-search-base.component.ts b/...plates/src/lib/components/po-page-dynamic-search/po-page-dynamic-search-base.component.ts
@@ -56,6 +56,20 @@ export const poPageDynamicSearchLiteralsDefault = {
  *
  * Componente com as ações de pesquisa já definidas, bastando que o desenvolvedor implemente apenas a chamada para as APIs
  * e exiba as informações.
+ *
+ * #### Tokens customizáveis
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade         | Descrição                                   | Valor Padrão                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
  */
 @Directive()
 export abstract class PoPageDynamicSearchBaseComponent {

diff --git a/...cts/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts b/...cts/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts
@@ -115,6 +115,20 @@ type UrlOrPoCustomizationFunction = string | (() => PoPageDynamicTableOptions);
  * GET {end-point}/metadata?type=list&version={version}
  * ```
  *
+ * #### Tokens customizáveis
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade         | Descrição                                   | Valor Padrão                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
+ *
  * @example
  *
  * <example name="po-page-dynamic-table-basic" title="PO Page Dynamic Table Basic">

diff --git a/...emplates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-base.component.ts b/...emplates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-base.component.ts
@@ -19,6 +19,20 @@ import { PoPageJobSchedulerService } from './po-page-job-scheduler.service';
  * sem a necessidade de criar componentes e tratamentos dos dados.
  *
  * Veja mais sobre os padrões utilizados nas requisições no [Guia de implementação de APIs](guides/api).
+ *
+ * #### Tokens customizáveis
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade         | Descrição                                   | Valor Padrão                          |
+ * |---------------------|---------------------------------------------|---------------------------------------|
+ * | **Header**          |                                             |                                       |
+ * | `--padding`         | Espaçamento do header                       | `var(--spacing-xs) var(--spacing-md)` |
+ * | `--gap`             | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)`                   |
+ * | `--gap-actions`     | Espaçamento entre as ações                  | `var(--spacing-xs)`                   |
+ * | `--font-family`     | Família tipográfica do título               | `var(--font-family-theme)`            |
+ * | **Content**         |                                             |                                       |
+ * | `--padding-content` | Espaçamento do conteúdo                     | `var(--spacing-xs) var(--spacing-sm)` |
  */
 @Directive()
 export class PoPageJobSchedulerBaseComponent implements OnDestroy {

diff --git a/.../po-page-login/samples/sample-po-page-login-labs/sample-po-page-login-labs.component.html b/.../po-page-login/samples/sample-po-page-login-labs/sample-po-page-login-labs.component.html
@@ -23,7 +23,7 @@
 >
 </po-page-login>
 
-<hr />
+<po-divider />
 
 <form #f="ngForm">
   <div class="po-row">
@@ -204,7 +204,7 @@
     </po-input>
   </div>
 
-  <hr />
+  <po-divider />
 
   <div class="po-row">
     <po-input
@@ -230,7 +230,7 @@
     </po-input>
   </div>
 
-  <hr />
+  <po-divider />
 
   <form #formCustomFieldOptions="ngForm">
     <div class="po-row">
@@ -268,7 +268,7 @@
 
   <br />
 
-  <hr />
+  <po-divider />
 
   <div class="po-row">
     <po-button class="po-lg-3 po-md-6" p-label="Sample Restore" (p-click)="restore()"> </po-button>

diff --git a/.../lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.html b/.../lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.html
@@ -9,7 +9,7 @@
   ></po-badge>
 </div>
 
-<hr />
+<po-divider />
 
 <form #f="ngForm">
   <div class="po-row">

diff --git a/...components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.css b/...components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.css
@@ -1,7 +1,7 @@
 .po-badge-wrap {
   position: absolute;
-  top: -12px;
-  right: -12px;
+  top: -5px;
+  right: -5px;
 }
 
 svg {

diff --git a/...omponents/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.html b/...omponents/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.html
@@ -4,11 +4,11 @@
       <div class="po-mb-1">
         <po-container>
           <div class="card">
-            <svg class="po-mr-1" [attr.kind]="user.status" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="po-mr-2" [attr.kind]="user.status" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="12" cy="12" r="11" />
               <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
             </svg>
-            <p class="po-mr-1 card-name-user po-text-color-neutral-dark-40">
+            <p class="po-mr-2 card-name-user po-text-color-neutral-dark-40">
               {{ user.nome }}
               <po-badge
                 class="po-badge-wrap"

diff --git a/.../po-breadcrumb/samples/sample-po-breadcrumb-labs/sample-po-breadcrumb-labs.component.html b/.../po-breadcrumb/samples/sample-po-breadcrumb-labs/sample-po-breadcrumb-labs.component.html
@@ -1,7 +1,7 @@
 <po-breadcrumb [p-favorite-service]="favoriteService" [p-items]="breadcrumbItems" [p-params-service]="paramsService">
 </po-breadcrumb>
 
-<hr />
+<po-divider />
 
 <form #breadcrumbForm="ngForm">
   <div class="po-row">
@@ -32,7 +32,7 @@
   </div>
 </form>
 
-<hr />
+<po-divider />
 
 <form #propertiesForm="ngForm">
   <div class="po-row">
@@ -59,7 +59,7 @@
     </po-input>
   </div>
 
-  <hr />
+  <po-divider />
 
   <div class="po-row">
     <po-button

diff --git a/...amples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.html b/...amples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.html
@@ -3,7 +3,7 @@
   <div class="po-md-12 po-font-text po-text-color-neutral-dark-40">Get your password</div>
 </div>
 
-<hr />
+<po-divider />
 
 <div class="po-row">
   <po-button-group class="po-md-12" [p-buttons]="attendances"> </po-button-group>

diff --git a/...tton-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.html b/...tton-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.html
@@ -2,7 +2,7 @@
   <po-button-group class="po-md-12" [p-buttons]="buttons" [p-toggle]="toggle" [p-size]="size"> </po-button-group>
 </div>
 
-<hr />
+<po-divider />
 
 <form #fButtons="ngForm">
   <div class="po-row">
@@ -45,7 +45,7 @@
   </div>
 </form>
 
-<hr />
+<po-divider />
 
 <form #f="ngForm">
   <div class="po-row">

diff --git a/...tton-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.html b/...tton-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.html
@@ -8,7 +8,7 @@
       <po-button-group p-toggle="single" [p-buttons]="textAlign"> </po-button-group>
     </div>
     <po-textarea class="po-md-12" name="textArea" [(ngModel)]="textArea" p-maxlength="400"> </po-textarea>
-    <hr />
+
     <div
       class="po-md-12 po-mt-3 po-font-text-large"
       [style.font-weight]="setBold ? 'bold' : 'normal'"