@govbr-ds/webcomponents 2.1.3 → 2.3.0

package/dist/collection/components/header/header-logo/header-logo.js

@@ -7,9 +7,25 @@ import { BREAKPOINTS, BreakpointObserver } from "../../../shared/utils/breakpoin
 import { generateUniqueId } from "../../../shared/utils/id";
 import { isNil } from "../../../shared/utils/isNil";
 import { handleNavigationClick } from "../../../shared/utils/navigation";
+import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/header?tab=designer).
+ * O componente `br-header-logo` é o subcomponente do GovBR-DS responsável por renderizar a marca visual oficial ou a assinatura do órgão dentro do cabeçalho.
  *
+ * ### Para que serve
+ *
+ * - **Exibição de marca:** Apresenta a imagem ou logotipo institucional no topo da página.
+ * - **Link de retorno:** Permite associar um link à marca, direcionando a pessoa usuária à página inicial do portal ou sistema.
+ *
+ * ### Papel na composição
+ *
+ * Atua como elemento de identidade visual no cabeçalho. Não gerencia a estrutura do topo nem as ações utilitárias, papel reservado ao orquestrador `br-header`.
+ *
+ * ### Regra de uso e relacionamento
+ *
+ * - Deve ser utilizado posicionado preferencialmente no slot `logo` ou `signature` do componente orquestrador `br-header`.
+ * - Não deve ser utilizado isoladamente fora do contexto de cabeçalho institucional.
+ *
+
  * @slot default - Slot para a logo personalizada exibida no cabeçalho.
  *
  * @part container - Wrapper da logo do header.
@@ -34,6 +50,7 @@ export class HeaderLogo {
         this.isCompact = false;
         /**
          * Target do link quando href é fornecido.
+         * Aceita `_self`, `_blank`, `_parent` ou `_top`. Valores inválidos usam `_self`.
          */
         this.target = '_self';
         /**
@@ -41,6 +58,7 @@ export class HeaderLogo {
          * - `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C.
          * - `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir.
          * Cliques com modificadores, botão do meio ou `target` diferente de `_self` permanecem nativos.
+         * Valores inválidos usam `native`.
          */
         this.navigationMode = 'native';
         /**
@@ -67,12 +85,18 @@ export class HeaderLogo {
             handleNavigationClick({
                 event,
                 href: this.href,
-                target: this.target,
-                navigationMode: this.navigationMode,
+                target: this.effectiveTarget,
+                navigationMode: this.effectiveNavigationMode,
                 brNavigate: this.brNavigate,
             });
         };
     }
+    get effectiveTarget() {
+        return resolveAllowedPropValue(this.el, 'target', this.target, ['_self', '_blank', '_parent', '_top'], '_self');
+    }
+    get effectiveNavigationMode() {
+        return resolveAllowedPropValue(this.el, 'navigationMode', this.navigationMode, ['native', 'event'], 'native');
+    }
     /**
      * Observa mudanças na propriedade `isCompact` e ajusta a altura da logo se `hasDefaultHeight` for verdadeiro.
      */
@@ -102,7 +126,8 @@ export class HeaderLogo {
      * @param event Evento disparado pelo componente pai `br-header` quando o estado compacto é alterado.
      */
     handleHeaderCompactChange(event) {
-        if (event.detail.parentId === this.el.parentElement.shadowRoot.querySelector('.br-header').id) {
+        const parentHeader = this.el.closest('br-header');
+        if (parentHeader && event.detail.parentId === parentHeader.customId) {
             this.isCompact = event.detail.isCompact;
         }
     }
@@ -165,7 +190,7 @@ export class HeaderLogo {
      * @returns JSX do componente.
      */
     render() {
-        return (h(Host, { key: '31a3b7c3feb28df1bb66fb38832ed93ffec8a47b' }, h("slot", { key: 'c3c1b1c2ad499c63866fe44a72ee8ec1b9cd43d6' }, h("div", { key: '1edc6208374cee19b27d47f1e760cd25601286be', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (h("a", { href: this.href, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.renderImageElement())) : (this.renderImageElement())))));
+        return (h(Host, { key: '51ef9ab626248d36fa3e6080b8c0ab2ca3fb6980' }, h("slot", { key: 'b24730defa0d5e0192f2ff005dcfb471e2eb5d49' }, h("div", { key: '9492cf4e875265cf21d19b169955e250e1834f14', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (h("a", { href: this.href, target: this.effectiveTarget, rel: this.effectiveTarget === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.renderImageElement())) : (this.renderImageElement())))));
     }
     static get is() { return "br-header-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -280,7 +305,7 @@ export class HeaderLogo {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Target do link quando href \u00E9 fornecido."
+                    "text": "Target do link quando href \u00E9 fornecido.\nAceita `_self`, `_blank`, `_parent` ou `_top`. Valores inv\u00E1lidos usam `_self`."
                 },
                 "getter": false,
                 "setter": false,
@@ -307,7 +332,7 @@ export class HeaderLogo {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controla como o componente integra a navega\u00E7\u00E3o mantendo `href` real no elemento naveg\u00E1vel.\n- `native` (padr\u00E3o): preserva o comportamento do navegador, conforme HTML/W3C.\n- `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navega\u00E7\u00E3o nativa para a SPA assumir.\nCliques com modificadores, bot\u00E3o do meio ou `target` diferente de `_self` permanecem nativos."
+                    "text": "Controla como o componente integra a navega\u00E7\u00E3o mantendo `href` real no elemento naveg\u00E1vel.\n- `native` (padr\u00E3o): preserva o comportamento do navegador, conforme HTML/W3C.\n- `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navega\u00E7\u00E3o nativa para a SPA assumir.\nCliques com modificadores, bot\u00E3o do meio ou `target` diferente de `_self` permanecem nativos.\nValores inv\u00E1lidos usam `native`."
                 },
                 "getter": false,
                 "setter": false,
@@ -413,7 +438,7 @@ export class HeaderLogo {
         return [{
                 "name": "headerCompactChange",
                 "method": "handleHeaderCompactChange",
-                "target": "document",
+                "target": undefined,
                 "capture": false,
                 "passive": true
             }];

package/dist/collection/components/header/header.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{--header-padding: var(--header-padding-medium);--header-padding-small: var(--spacing-scale-base);--header-padding-medium: var(--spacing-scale-2x);--header-padding-large: var(--spacing-scale-3x);--header-logo-size: var(--header-logo-medium);--header-logo-small: 16px;--header-logo-medium: 24px;--header-logo-large: 40px;--header-title-size: var(--font-size-scale-base);--header-subtitle-size: var(--font-size-scale-down-01);--header-logo-desktop-width: 120px;--header-logo-desktop-height: 48px;--header-logo-compact: 60px;--header-logo-compact-height: 32px;--header-logo-mobile-width: 80px;--header-logo-mobile-height: 40px;display:block;width:100%;position:relative;z-index:var(--z-index-layer-2)}:host([is-sticky]),:host([sticky]){transition:all .15s ease;position:sticky;top:0;z-index:var(--z-index-layer-2)}:host([is-sticky]) .br-header,:host([sticky]) .br-header{box-shadow:var(--surface-shadow-xl)}.br-header{display:flex;flex-direction:column;background:var(--background);box-shadow:var(--surface-shadow-sm);padding:var(--header-padding) 0;position:relative}.br-header br-divider::part(hr){margin:0 var(--spacing-scale-base)}.br-header.compact{--header-padding: var(--header-padding-small)}.br-header.compact .header-bottom-left{flex:0 0 auto}.br-header.small{--header-padding: var(--header-padding-small)}.br-header.large{--header-padding: var(--header-padding-large)}.br-header .header-top{display:flex;flex-direction:row;justify-content:space-between}.br-header .header-top .header-top-left,.br-header .header-top .header-top-right{display:flex}.br-header .header-top .header-top-left{flex:0 0 auto}.br-header .header-top .header-top-left .header-logo{align-self:center}.br-header .header-top .header-top-left .header-signature{align-self:center;font-weight:500;overflow:hidden}.br-header .header-top .header-top-right{flex:1 0 auto;justify-content:flex-end}.br-header .header-top .header-top-right .header-links{align-self:center}.br-header .header-top .header-top-right .header-functions{align-self:center}.br-header .header-top .header-top-right .header-search-icon{align-self:center;background:rgba(0,0,0,0);border:0;padding:0}.br-header .header-top .header-top-right .header-access{align-self:center}.br-header .header-bottom{display:flex;flex-direction:row;justify-content:space-between;margin-top:var(--header-padding-small)}.br-header .header-bottom .header-bottom-left{display:flex}.br-header .header-bottom .header-bottom-left .header-caption-wrapper{margin-left:var(--spacing-scale-2x)}.br-header .header-bottom .header-bottom-left .header-caption{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:var(--header-title-size);margin-top:2px}.br-header .header-bottom .header-bottom-left .header-subcaption{font-size:var(--header-subtitle-size);font-weight:500;margin-top:var(--spacing-scale-half)}.br-header .header-bottom .header-bottom-right{display:none;min-width:268px;flex:0 0 auto}.br-header .header-bottom .header-bottom-right.is-active{display:flex}.br-header .header-access{margin-left:var(--spacing-scale-3x)}.br-header .header-menu-trigger{margin-right:var(--spacing-scale-half)}.br-header .header-search[is-active]{align-items:center;background:var(--background);inset:0;display:flex;padding:0 var(--spacing-scale-2x);position:absolute}.br-header .header-search[is-active] ::slotted(br-input){width:100%}.br-header .header-search[is-active] .search-close{margin-left:var(--spacing-scale-base);position:absolute;right:var(--spacing-scale-2x);z-index:2}@media(width >= 576px){.br-header{--header-title-size: var(--font-size-scale-up-02);--header-subtitle-size: var(--font-size-scale-down-01)}.br-header .header-top .header-top-right{position:relative}.br-header .header-bottom .header-bottom-left .header-caption{margin-top:0}.br-header .header-bottom .header-bottom-left .header-subcaption{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.br-header.compact{--header-title-size: var(--font-size-scale-up-01)}.br-header.compact .container-lg{position:relative}.br-header.compact .header-top{display:block}.br-header.compact .header-top-left{float:left}.br-header.compact .header-top-right{float:right;margin-top:var(--spacing-scale-2xh);position:relative}.br-header.compact .header-bottom{clear:left}}@media(width >= 1280px){.br-header{--header-title-size: var(--font-size-scale-up-03);--header-subtitle-size: var(--font-size-scale-base)}.br-header.compact{--header-title-size: var(--font-size-scale-up-02)}.br-header:not(.compact) .header-bottom .header-bottom-right{display:flex}.br-header:not(.compact) .header-bottom ::slotted([slot=search]){width:385px}}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{--header-padding: var(--header-padding-medium);--header-padding-small: var(--spacing-scale-base);--header-padding-medium: var(--spacing-scale-2x);--header-padding-large: var(--spacing-scale-3x);--header-logo-size: var(--header-logo-medium);--header-logo-small: 16px;--header-logo-medium: 24px;--header-logo-large: 40px;--header-title-size: var(--font-size-scale-base);--header-subtitle-size: var(--font-size-scale-down-01);--header-logo-desktop-width: 120px;--header-logo-desktop-height: 48px;--header-logo-compact: 60px;--header-logo-compact-height: 32px;--header-logo-mobile-width: 80px;--header-logo-mobile-height: 40px;display:block;width:100%;position:relative;z-index:var(--z-index-layer-2)}:host([is-sticky]),:host([sticky]){position:sticky;top:0;z-index:var(--z-index-layer-2)}:host([is-sticky]) .br-header,:host([sticky]) .br-header{box-shadow:var(--surface-shadow-xl)}.br-header{transition:none}@media(prefers-reduced-motion: no-preference){.br-header{transition:box-shadow var(--duration-very-fast, 100ms) var(--animation-ease, ease)}}.br-header{display:flex;flex-direction:column;background:var(--background);box-shadow:var(--surface-shadow-sm);padding:var(--header-padding) 0;position:relative}.br-header br-divider::part(hr){margin:0 var(--spacing-scale-base)}.br-header.compact{--header-padding: var(--header-padding-small)}.br-header.compact .header-bottom-left{flex:0 0 auto}.br-header.small{--header-padding: var(--header-padding-small)}.br-header.large{--header-padding: var(--header-padding-large)}.br-header .header-top{display:flex;flex-direction:row;justify-content:space-between}.br-header .header-top .header-top-left,.br-header .header-top .header-top-right{display:flex}.br-header .header-top .header-top-left{flex:0 0 auto}.br-header .header-top .header-top-left .header-logo{align-self:center}.br-header .header-top .header-top-left .header-signature{align-self:center;font-weight:500;overflow:hidden}.br-header .header-top .header-top-right{flex:1 0 auto;justify-content:flex-end}.br-header .header-top .header-top-right .header-links{align-self:center}.br-header .header-top .header-top-right .header-functions{align-self:center}.br-header .header-top .header-top-right .header-search-icon{align-self:center;background:rgba(0,0,0,0);border:0;padding:0}.br-header .header-top .header-top-right .header-access{align-self:center}.br-header .header-bottom{display:flex;flex-direction:row;justify-content:space-between;margin-top:var(--header-padding-small)}.br-header .header-bottom .header-bottom-left{display:flex}.br-header .header-bottom .header-bottom-left .header-caption-wrapper{margin-left:var(--spacing-scale-2x)}.br-header .header-bottom .header-bottom-left .header-caption{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:var(--header-title-size);margin-top:2px}.br-header .header-bottom .header-bottom-left .header-subcaption{font-size:var(--header-subtitle-size);font-weight:500;margin-top:var(--spacing-scale-half)}.br-header .header-bottom .header-bottom-right{display:none;min-width:268px;flex:0 0 auto}.br-header .header-bottom .header-bottom-right.is-active{display:flex}.br-header .header-access{margin-left:var(--spacing-scale-3x)}.br-header .header-menu-trigger{margin-right:var(--spacing-scale-half)}.br-header .header-search[is-active]{align-items:center;background:var(--background);inset:0;display:flex;padding:0 var(--spacing-scale-2x);position:absolute}.br-header .header-search[is-active] ::slotted(br-input){width:calc(100% - var(--spacing-scale-6x))}.br-header .header-search[is-active] .search-close{margin-left:var(--spacing-scale-base);position:absolute;right:var(--spacing-scale-2x);top:calc(50% - var(--spacing-scale-half, 4px));transform:translateY(-50%);z-index:2}@media(width >= 576px){.br-header{--header-title-size: var(--font-size-scale-up-02);--header-subtitle-size: var(--font-size-scale-down-01)}.br-header .header-top .header-top-right{position:relative}.br-header .header-bottom .header-bottom-left .header-caption{margin-top:0}.br-header .header-bottom .header-bottom-left .header-subcaption{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.br-header.compact{--header-title-size: var(--font-size-scale-up-01)}.br-header.compact .container-lg{position:relative}.br-header.compact .header-top{display:block}.br-header.compact .header-top-left{float:left}.br-header.compact .header-top-right{float:right;margin-top:var(--spacing-scale-2xh);position:relative}.br-header.compact .header-bottom{clear:left}.br-header.compact[data-layout=compact-no-brand] .header-top{inset:0;pointer-events:none;position:absolute}.br-header.compact[data-layout=compact-no-brand] .header-top-left{display:none}.br-header.compact[data-layout=compact-no-brand] .header-top-right{align-items:center;float:none;height:100%;margin-top:0;pointer-events:auto;position:absolute;right:0;top:0;z-index:1}.br-header.compact[data-layout=compact-no-brand] .header-bottom{clear:none;margin-top:0;min-height:32px;position:relative}.br-header.compact[data-layout=compact-no-brand] .header-bottom-left{flex:0 0 auto}}@media(width >= 1280px){.br-header{--header-title-size: var(--font-size-scale-up-03);--header-subtitle-size: var(--font-size-scale-base)}.br-header.compact{--header-title-size: var(--font-size-scale-up-02)}.br-header:not(.compact) .header-bottom .header-bottom-right{display:flex}.br-header:not(.compact) .header-bottom ::slotted([slot=search]){width:385px}}

package/dist/collection/components/header/header.js

@@ -6,6 +6,8 @@ import { Host, h, } from "@stencil/core";
 import { BREAKPOINTS, BreakpointObserver } from "../../shared/utils/breakpoint-observer";
 import { generateUniqueId } from "../../shared/utils/id";
 import { handleNavigationClick } from "../../shared/utils/navigation";
+import { findComposedOwner } from "../../shared/utils/ownership";
+import { resolveAllowedPropValue, resolveDensity } from "../../shared/utils/props";
 import { createRafBatcher } from "../../shared/utils/raf-batcher";
 /**
  * Nomes das áreas do cabeçalho.
@@ -25,6 +27,8 @@ const HeaderSlotNames = {
 const ALL_BREAKPOINTS = BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL);
 const FROM_SMALL_BREAKPOINTS = BreakpointObserver.getBreakpoints('from', BREAKPOINTS.SMALL);
 const UNTIL_MEDIUM_BREAKPOINTS = BreakpointObserver.getBreakpoints('until', BREAKPOINTS.MEDIUM);
+/** Diferença máxima, em px, tratada como arredondamento de layout e não como estouro das listas. */
+const LIST_OVERFLOW_TOLERANCE = 1;
 function createHeaderAreaConfig(name, loose = ALL_BREAKPOINTS, compact = ALL_BREAKPOINTS, options = {}) {
     return {
         cssClassMap: {
@@ -40,16 +44,41 @@ function createHeaderAreaConfig(name, loose = ALL_BREAKPOINTS, compact = ALL_BRE
     };
 }
 /**
- * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/header?tab=designer).
+ * O componente `br-header` é o orquestrador principal de cabeçalho do GovBR-DS. Centraliza a identidade visual do órgão ou sistema público, links de navegação hierárquica, atalhos de funcionalidades, mecanismo de busca e botão de acesso ou autenticação.
  *
- * ### Acionamento de Menu Associado
- * Para integrar o cabeçalho com um menu (`br-menu`), passe um botão no slot `menu-trigger` com os seguintes atributos:
- * - `data-toggle="menu"`
- * - `data-target="#id-do-menu"` (substitua pelo ID ou `customId` do seu `br-menu`)
+ * ### Para que serve
  *
- * O componente `br-menu` escuta a esses atributos no escopo do documento e controlará automaticamente sua visibilidade.
+ * - **Identidade institucional unificada:** Apresenta a marca e assinatura visual oficial do Governo Federal e da entidade pública.
+ * - **Navegação e atalhos rápidos:** Reúne links para áreas centrais e botões funcionais (como contraste, acessibilidade e suporte).
+ * - **Busca e autenticação integradas:** Fornece áreas reservadas e slots para barra de busca rápida e gatilho de login/acesso.
+ * - **Comportamento responsivo e densidades:** Adapta-se automaticamente a diferentes telas com suporte a densidades padrão, compacta, pequena e grande.
  *
- * @category Estrutura
+ * ### Quando utilizar
+ *
+ * - **Utilize quando:**
+ *   - Desenvolver páginas, portais e sistemas públicos federais que requerem a barra superior padronizada do GovBR-DS.
+ *   - For necessário integrar identidade visual, navegação rápida, busca e acesso em uma estrutura consistente.
+ * - **Evite e prefira outro componente quando:**
+ *   - A navegação for exclusivamente lateral ou contextual interna de uma ferramenta gráfica (prefira `br-menu` ou barras de ferramentas específicas).
+ *
+ * ### Composição e Subcomponentes
+ *
+ * | Subcomponente | Papel | Regra de uso |
+ * | --- | --- | --- |
+ * | `br-header` | **Orquestrador principal.** Estrutura as áreas superior e inferior, gerencia responsividade e densidade. | Deve ser declarado como elemento raiz do topo da página. |
+ * | `br-header-logo` | **Identidade visual.** Exibe o logotipo ou brasão institucional. | Posicionado nos slots `logo` ou `signature` do `br-header`. |
+ * | `br-header-list` | **Agrupador de lista.** Contêiner semântico horizontal para links ou funções. | Encaixa-se nos slots `links` ou `functions` do `br-header`. |
+ * | `br-header-link` | **Item de link.** Atalho ou hiperlink de navegação institucional. | Deve ser inserido dentro de um `br-header-list` no slot `links`. |
+ * | `br-header-function` | **Ação funcional.** Botão de utilidade rápida (contraste, ajuda, etc.). | Deve ser inserido dentro de um `br-header-list` no slot `functions`. |
+ *
+ * ### Como os subcomponentes se relacionam
+ *
+ * O `br-header` orquestra as áreas da barra através de slots nomeados (`logo`, `signature`, `links`, `functions`, `search`, `access`, `menu-trigger`, `caption`, `subcaption`). Ele observa o tamanho de tela e a densidade configurada, reorganizando os blocos e delegando a exibição correta aos subcomponentes filhos.
+ *
+ * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/header?tab=designer).
+ *
+
+ * @category Estrutura, Navegação, Identidade
  * @status stable
  * @slot logo - Slot para a logo do cabeçalho.
  * @slot signature - Slot para a assinatura visual da organização.
@@ -119,6 +148,7 @@ export class Header {
          * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.
          * - `large`: Baixa densidade (componente maior, mais espaçamento e altura).
          *
+         * Valores inválidos usam `medium`.
          */
         this.density = 'medium';
         /**
@@ -128,6 +158,9 @@ export class Header {
         this.isCompact = false;
         /**
          * Fixa o cabeçalho no topo durante a rolagem.
+         * Quando `compact` ou `is-compact` é definido explicitamente, o modo visual
+         * permanece fixo durante a rolagem. Sem essa configuração, o header sticky
+         * alterna automaticamente entre os modos compacto e expandido.
          * @deprecated Use `sticky`.
          */
         this.isSticky = false;
@@ -166,13 +199,15 @@ export class Header {
         /** Indica que o estado compacto atual foi derivado da rolagem. */
         this.compactFromScroll = false;
         this.headerResizeBatcher = createRafBatcher(() => {
-            this.headerWidthChange.emit({ id: this.customId, listNames: ['links', 'functions'], shrink: false });
+            this.emitHeaderWidthChange({ id: this.customId, listNames: ['links', 'functions'], shrink: false });
+            // Listas já expandidas não emitem headerListUpdate; sem esta verificação, estreitar o cabeçalho não as recolhe.
+            this.verifyListSpace(this.effectiveShrinkFirst);
         });
         this.handleNavigation = (event, href) => {
             handleNavigationClick({
                 event,
                 href,
-                navigationMode: this.navigationMode,
+                navigationMode: this.effectiveNavigationMode,
                 brNavigate: this.brNavigate,
             });
         };
@@ -194,6 +229,13 @@ export class Header {
             const target = this.scrollTarget;
             if (target == null)
                 return;
+            const compactModeIsPinned = !this.compactFromScroll &&
+                (this.isCompact ||
+                    this.compact !== undefined ||
+                    this.el.hasAttribute('compact') ||
+                    this.el.hasAttribute('is-compact'));
+            if (compactModeIsPinned)
+                return;
             const scrollTop = this.getScrollTop(target);
             const atTop = scrollTop === 0;
             const shouldBeCompact = (this.sticky ?? this.isSticky) && !atTop;
@@ -238,6 +280,30 @@ export class Header {
             }
         };
     }
+    get effectiveShrinkFirst() {
+        return resolveAllowedPropValue(this.el, 'shrinkFirst', this.shrinkFirst, ['links', 'functions'], 'functions');
+    }
+    get effectiveNavigationMode() {
+        return resolveAllowedPropValue(this.el, 'navigationMode', this.navigationMode, ['native', 'event'], 'native');
+    }
+    get effectiveLayoutWidth() {
+        return resolveAllowedPropValue(this.el, 'layoutWidth', this.layoutWidth, ['contained', 'full'], 'contained');
+    }
+    get effectiveCompact() {
+        return this.compact ?? this.isCompact;
+    }
+    getOwnedHeaderChildren(selector) {
+        return Array.from(this.el.querySelectorAll(selector)).filter((element) => findComposedOwner(element, 'br-header') === this.el);
+    }
+    dispatchHeaderEvent(eventName, detail) {
+        this.getOwnedHeaderChildren('br-header-logo, br-header-link, br-header-function, br-header-list').forEach((child) => {
+            child.dispatchEvent(new CustomEvent(eventName, { detail }));
+        });
+    }
+    get hasBrandContent() {
+        return Boolean(this.getOwnedHeaderChildren('[slot="logo"], [slot="signature"]').length > 0 ||
+            (typeof this.signature === 'string' && this.signature.trim().length > 0));
+    }
     /**
      * Observa mudanças na propriedade isCompact.
      * @param newValue O novo valor de isCompact.
@@ -246,16 +312,21 @@ export class Header {
         if (this.compact !== undefined && this.compact !== newValue)
             this.compact = newValue;
         if (!this.hasLoaded) {
-            this.verifyListSpace(this.shrinkFirst);
+            this.verifyListSpace(this.effectiveShrinkFirst);
             return;
         }
         this.headerCompactChange.emit({ parentId: this.customId, isCompact: newValue });
         this.brHeaderCompactChange.emit({ parentId: this.customId, compact: newValue });
-        this.verifyListSpace(this.shrinkFirst);
+        this.dispatchHeaderEvent('headerCompactChange', { parentId: this.customId, isCompact: newValue });
+        this.dispatchHeaderEvent('brHeaderCompactChange', { parentId: this.customId, compact: newValue });
+        this.verifyListSpace(this.effectiveShrinkFirst);
     }
     watchCompact(newValue) {
-        if (newValue !== undefined && newValue !== this.isCompact)
-            this.isCompact = newValue;
+        if (newValue !== undefined) {
+            this.compactFromScroll = false;
+            if (newValue !== this.isCompact)
+                this.isCompact = newValue;
+        }
     }
     watchIsSticky() {
         if (this.sticky === undefined)
@@ -286,7 +357,14 @@ export class Header {
         });
         this.slotContentObserver.observe(this.el, { childList: true });
         if (typeof ResizeObserver !== 'undefined') {
-            this.headerResizeObserver = new ResizeObserver(() => this.handleListResize());
+            this.headerResizeObserver = new ResizeObserver(([entry]) => {
+                // Recolher uma lista altera só a altura do host; reagir a ela reexpandiria as listas em laço.
+                const width = entry.contentRect.width;
+                if (width === this.observedHostWidth)
+                    return;
+                this.observedHostWidth = width;
+                this.handleListResize();
+            });
             this.headerResizeObserver.observe(this.el);
         }
         queueMicrotask(() => this.syncScrollListener());
@@ -317,9 +395,10 @@ export class Header {
      */
     componentDidLoad() {
         this.monitorSlotContent();
-        this.verifyListSpace(this.shrinkFirst);
+        this.verifyListSpace(this.effectiveShrinkFirst);
         this.syncScrollListener();
         void this.handleHeaderListUpdate;
+        void this.handleHeaderListFocused;
         void this.handleListResize;
         queueMicrotask(() => {
             this.hasLoaded = true;
@@ -358,6 +437,13 @@ export class Header {
             });
         }
     }
+    handleHeaderListFocused(event) {
+        this.getOwnedHeaderChildren('br-header-list').forEach((list) => {
+            if (list.customId !== event.detail?.id) {
+                void list.closeList?.();
+            }
+        });
+    }
     handleListResize() {
         this.headerResizeBatcher.schedule(undefined);
     }
@@ -368,6 +454,10 @@ export class Header {
     async resetHeaderList() {
         this.handleListResize();
     }
+    emitHeaderWidthChange(detail) {
+        this.headerWidthChange.emit(detail);
+        this.dispatchHeaderEvent('headerWidthChange', detail);
+    }
     /**
      * Manipula o clique no ícone de busca.
      */
@@ -415,11 +505,12 @@ export class Header {
      * @returns Um objeto contendo as classes CSS a serem aplicadas.
      */
     getCssClassMap() {
+        const density = resolveDensity(this.el, this.density);
         return {
             'br-header': true,
-            compact: this.isCompact,
-            small: this.density === 'small' && !this.isCompact,
-            large: this.density === 'large' && !this.isCompact,
+            compact: this.effectiveCompact,
+            small: density === 'small' && !this.effectiveCompact,
+            large: density === 'large' && !this.effectiveCompact,
         };
     }
     /**
@@ -494,7 +585,7 @@ export class Header {
      * Atualiza o estado da área do cabeçalho com base no conteúdo dos slots.
      */
     syncHeaderAreaStates() {
-        this.el.querySelectorAll('[slot]').forEach((element) => {
+        this.getOwnedHeaderChildren('[slot]').forEach((element) => {
             const slotName = element.slot;
             if (this.isHeaderSlotName(slotName)) {
                 this.updateHeaderArea(slotName, {
@@ -530,32 +621,25 @@ export class Header {
         const shadowRoot = this.el.shadowRoot;
         if (!shadowRoot)
             return;
-        let style;
-        let paddingLeft = 0;
-        let paddingRight = 0;
-        let totalWidth = 0;
-        let bottomLeftWidth = 0;
-        let topLeftWidth = 0;
-        let topRightWidth = 0;
+        // Larguras fracionárias (zoom, DPI) evitam o falso estouro de 1px causado pelo arredondamento de clientWidth.
+        const widthOf = (element) => element?.getBoundingClientRect().width || 0;
+        const topRightWidth = widthOf(shadowRoot.querySelector('.header-top-right'));
         let availableWidth = 0;
         if (this.isCompact) {
-            style = window.getComputedStyle(this.el);
-            paddingLeft = parseFloat(style.paddingLeft) || 0;
-            paddingRight = parseFloat(style.paddingRight) || 0;
-            totalWidth = this.el.clientWidth - paddingLeft - paddingRight;
-            bottomLeftWidth = shadowRoot.querySelector('.header-bottom-left')?.clientWidth || 0;
-            topRightWidth = shadowRoot.querySelector('.header-top-right')?.clientWidth || 0;
-            availableWidth = totalWidth - bottomLeftWidth;
+            const style = window.getComputedStyle(this.el);
+            const paddingLeft = parseFloat(style.paddingLeft) || 0;
+            const paddingRight = parseFloat(style.paddingRight) || 0;
+            const totalWidth = widthOf(this.el) - paddingLeft - paddingRight;
+            availableWidth = totalWidth - widthOf(shadowRoot.querySelector('.header-bottom-left'));
         }
         else {
-            totalWidth = shadowRoot.querySelector('.header-top')?.clientWidth || 0;
-            topLeftWidth = shadowRoot.querySelector('.header-top-left')?.clientWidth || 0;
-            topRightWidth = shadowRoot.querySelector('.header-top-right')?.clientWidth || 0;
-            availableWidth = totalWidth - topLeftWidth;
+            const totalWidth = widthOf(shadowRoot.querySelector('.header-top'));
+            availableWidth = totalWidth - widthOf(shadowRoot.querySelector('.header-top-left'));
         }
-        const isOverflowing = topRightWidth > availableWidth;
+        // A área da direita cresce com flex: 1 0 auto e só excede a sobra quando o conteúdo realmente não cabe.
+        const isOverflowing = topRightWidth - availableWidth > LIST_OVERFLOW_TOLERANCE;
         if (isOverflowing) {
-            this.headerWidthChange.emit({ id: this.customId, listNames: [listName], shrink: true });
+            this.emitHeaderWidthChange({ id: this.customId, listNames: [listName], shrink: true });
         }
     }
     /**
@@ -611,7 +695,7 @@ export class Header {
      * @returns Um elemento JSX representando o botão de fechar busca.
      */
     renderSearchCloseButton() {
-        return (h("br-button", { class: "search-close", shape: "circle", density: "small", emphasis: "tertiary", style: { position: 'absolute', right: 'var(--spacing-scale-2x)', zIndex: '2' }, onClick: this.handleSearchCloseClick, "prop:ariaLabel": "Fechar busca" }, h("br-icon", { iconName: "fa7-solid:close", width: "32", height: "32" })));
+        return (h("br-button", { class: "search-close", shape: "circle", density: "small", emphasis: "tertiary", onClick: this.handleSearchCloseClick, "prop:ariaLabel": "Fechar busca" }, h("br-icon", { iconName: "fa7-solid:close", width: "24", height: "24" })));
     }
     /**
      * Renderiza o conteúdo padrão do slot.
@@ -637,7 +721,7 @@ export class Header {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '8bc09796fafc335700311f66a36175e37a2b22ba', className: "mb-4" }, h("header", { key: 'c5d701eacc69607275a11c1551ed7d673f091189', id: this.customId, class: this.getCssClassMap(), part: "header" }, h("div", { key: 'cdf3c2774bd5ef9ceee9cff6a03bd3ecbe55f6b6', class: this.layoutWidth === 'full' ? 'container-fluid' : 'container-lg' }, h("div", { key: '1788724e44fa9e405e9f487dc51e6b3921d257b7', class: "header-top", part: "top" }, h("div", { key: 'f6bb5590253a751a221458902e050082bd80625a', class: "header-top-left", part: "top-left" }, this.renderHeaderArea(HeaderSlotNames.LOGO), this.renderDivider(HeaderSlotNames.LOGO, [HeaderSlotNames.SIGNATURE]), this.renderHeaderArea(HeaderSlotNames.SIGNATURE)), h("div", { key: '91fb7d67290cfbe8a7019c2921c46bee73cccf8a', class: "header-top-right", part: "top-right" }, this.renderHeaderArea(HeaderSlotNames.LINKS), this.renderDivider(HeaderSlotNames.LINKS, [HeaderSlotNames.FUNCTIONS, HeaderSlotNames.SEARCH_ICON]), this.renderHeaderArea(HeaderSlotNames.FUNCTIONS), this.renderDivider(HeaderSlotNames.FUNCTIONS, [HeaderSlotNames.SEARCH_ICON]), this.renderHeaderArea(HeaderSlotNames.SEARCH_ICON), this.renderHeaderArea(HeaderSlotNames.ACCESS))), h("div", { key: 'ae6085ef79127e501d963889cdc5e616a91b1f50', class: "header-bottom", part: "bottom" }, h("div", { key: 'b76815e61385d014fa9bc0b5c87387ff2a3b4243', class: "header-bottom-left", part: "bottom-left" }, this.renderHeaderArea(HeaderSlotNames.MENU_TRIGGER), h("div", { key: '18f69d8cefd705f8084a0ca81e3d0c8cb59b8241', class: "header-caption-wrapper" }, this.renderHeaderArea(HeaderSlotNames.CAPTION), this.renderHeaderArea(HeaderSlotNames.SUBCAPTION))), h("div", { key: 'e9609c0ef168d7da4a909715512250cf5dcc8ebe', class: {
+        return (h(Host, { key: 'f9c1811e19d3155c8cd092249777d830f4950c82', className: "mb-4" }, h("header", { key: '09b9c824f5d2a090e3197efe17940fbc37ec606d', id: this.customId, class: this.getCssClassMap(), "data-layout": this.effectiveCompact && !this.hasBrandContent ? 'compact-no-brand' : null, part: "header" }, h("div", { key: 'b4cb3cc62b799e563db4bfbef10d41ff4652748f', class: this.effectiveLayoutWidth === 'full' ? 'container-fluid' : 'container-lg' }, h("div", { key: '35f0e670b56c634a35a47e117717609f2f5620e4', class: "header-top", part: "top" }, h("div", { key: '2d86ace76e4269ae16e1630df2737d7ffb80bbb8', class: "header-top-left", part: "top-left" }, this.renderHeaderArea(HeaderSlotNames.LOGO), this.renderDivider(HeaderSlotNames.LOGO, [HeaderSlotNames.SIGNATURE]), this.renderHeaderArea(HeaderSlotNames.SIGNATURE)), h("div", { key: '6b3e306e165f762aedce47ce5c9653ef7069bb1a', class: "header-top-right", part: "top-right" }, this.renderHeaderArea(HeaderSlotNames.LINKS), this.renderDivider(HeaderSlotNames.LINKS, [HeaderSlotNames.FUNCTIONS, HeaderSlotNames.SEARCH_ICON]), this.renderHeaderArea(HeaderSlotNames.FUNCTIONS), this.renderDivider(HeaderSlotNames.FUNCTIONS, [HeaderSlotNames.SEARCH_ICON]), this.renderHeaderArea(HeaderSlotNames.SEARCH_ICON), this.renderHeaderArea(HeaderSlotNames.ACCESS))), h("div", { key: '889059da1e620369acd6bff140fcc8e6b1e2a461', class: "header-bottom", part: "bottom" }, h("div", { key: '0eba19312da18c0d1b3e12fb2c46ded0097d01df', class: "header-bottom-left", part: "bottom-left" }, this.renderHeaderArea(HeaderSlotNames.MENU_TRIGGER), h("div", { key: 'a7adafc96b4f736adde689a8d74dbf7b8af121e3', class: "header-caption-wrapper" }, this.renderHeaderArea(HeaderSlotNames.CAPTION), this.renderHeaderArea(HeaderSlotNames.SUBCAPTION))), h("div", { key: '7344323c712d9505d50a5f682edda7d67ad681b4', class: {
                 'header-bottom-right': true,
                 'is-active': this.headerArea[HeaderSlotNames.SEARCH]?.isActive,
             }, part: "bottom-right" }, this.renderHeaderArea(HeaderSlotNames.SEARCH)))))));
@@ -735,7 +819,7 @@ export class Header {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espa\u00E7amento).\n- `medium`: Densidade intermedi\u00E1ria, padr\u00E3o recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espa\u00E7amento e altura)."
+                    "text": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espa\u00E7amento).\n- `medium`: Densidade intermedi\u00E1ria, padr\u00E3o recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espa\u00E7amento e altura).\n\nValores inv\u00E1lidos usam `medium`."
                 },
                 "getter": false,
                 "setter": false,
@@ -800,7 +884,7 @@ export class Header {
                             "name": "deprecated",
                             "text": "Use `sticky`."
                         }],
-                    "text": "Fixa o cabe\u00E7alho no topo durante a rolagem."
+                    "text": "Fixa o cabe\u00E7alho no topo durante a rolagem.\nQuando `compact` ou `is-compact` \u00E9 definido explicitamente, o modo visual\npermanece fixo durante a rolagem. Sem essa configura\u00E7\u00E3o, o header sticky\nalterna automaticamente entre os modos compacto e expandido."
                 },
                 "getter": false,
                 "setter": false,
@@ -1123,9 +1207,15 @@ export class Header {
             }, {
                 "name": "headerListUpdate",
                 "method": "handleHeaderListUpdate",
-                "target": "document",
+                "target": undefined,
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "headerListFocused",
+                "method": "handleHeaderListFocused",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }