@govbr-ds/webcomponents 2.4.0 → 2.6.0

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -2,40 +2,53 @@
  * Construído por SERPRO
  * © https://serpro.gov.br/ - MIT License.
  */
-import { Host, h } from "@stencil/core";
-import { resolveAllowedPropValue } from "../../../shared/utils/props";
-import { TABLE_TOOLTIP_MODE, TABLE_TOOLTIP_STATE } from "../table-constants";
+import { Fragment, Host, h } from "@stencil/core";
+import { TABLE_SORT_DIRECTION, TABLE_TOOLTIP_MODE, TABLE_TOOLTIP_STATE } from "../table.constants";
+import { resolveTableSpan } from "../table.grouping";
+import { TableHeaderHeightObserver } from "../table.header-height";
+import { TableCellKeyboard } from "../table.keyboard";
+import { requestAnimationFramePromise } from "../table.utils";
 /**
- * Subcomponente de célula de cabeçalho de `br-table`, responsável por nomear uma coluna e oferecer controles opcionais de ordenação.
+ * ## Design System
  *
- * ### Papel na composição
+ * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
  *
- * - Define o rótulo da coluna com `role="columnheader"`.
- * - Suporta gatilho interativo de ordenação crescente e decrescente (`sortable`), emitindo eventos para reordenação de dados.
+ * Define o conteúdo e as propriedades herdáveis de uma coluna de `br-table`.
+ * Compõe as linhas de `br-table-header` no slot `header`; não deve ser usada
+ * avulsa. `colSpan` e `rowSpan` representam grupos e níveis do cabeçalho.
+ * Somente folhas que ocupam uma coluna podem ordenar os dados.
+ * Também exibe tooltip quando o conteúdo truncado requer informação adicional.
  *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro de um `br-table-row` situado no `br-table-header`. O alinhamento horizontal segue a definição da coluna na tabela pai.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
- *
-
- * @part cell - Wrapper da célula de cabeçalho.
- * @part content - Área de conteúdo da célula de cabeçalho.
+ * @slot default - Conteúdo do cabeçalho da coluna.
+ * @part cell - Superfície visual da célula.
+ * @part content - Contêiner responsável pelo alinhamento.
+ * @fires brColumnWidthChange - Quando a largura declarada muda.
+ * @fires brAlignmentChange - Quando um alinhamento da coluna muda.
+ * @fires brOverflowChange - Quando a estratégia de overflow muda.
  */
 export class TableHeaderCell {
     constructor() {
         /**
-         * Controla a visibilidade do tooltip associado ao conteúdo truncado.
+         * Quantidade de colunas ocupadas. Inteiro entre 1 e 1000; valores inválidos usam 1.
+         * @default 1
          */
-        this.isTooltipVisible = false;
+        this.colSpan = 1;
         /**
-         * Armazena o texto completo exibido no tooltip.
+         * Quantidade de linhas ocupadas no cabeçalho ou grupo. Limitada às linhas
+         * disponíveis; aceita inteiros de 1 a 1000 e valores inválidos usam 1.
+         * @default 1
          */
+        this.rowSpan = 1;
+        /** Habilita a ordenação desta coluna. */
+        this.sortable = false;
+        this.isTooltipVisible = false;
         this.tooltipContent = '';
         this.tooltipRef = null;
         this.truncateContentRef = null;
         this.contentSlotRef = null;
+        /**
+         * Exibe o tooltip somente quando o conteúdo está truncado.
+         */
         this.handleMouseEnter = async () => {
             if (this.resolveTooltipMode() !== TABLE_TOOLTIP_MODE.ENABLED) {
                 return;
@@ -44,59 +57,97 @@ export class TableHeaderCell {
             if (truncateContent === null) {
                 return;
             }
+            const hasOverflow = truncateContent.scrollWidth > truncateContent.clientWidth;
+            if (!hasOverflow) {
+                return;
+            }
             this.tooltipContent = this.getFullCellContent();
             if (this.tooltipContent.length === 0) {
                 return;
             }
             this.isTooltipVisible = true;
             await requestAnimationFramePromise();
-            if (this.tooltipRef !== null) {
+            if (!this.el.isConnected || !truncateContent.isConnected) {
+                await this.closeContentTooltip();
+                return;
+            }
+            if (this.tooltipRef?.isConnected) {
                 await this.tooltipRef.setTriggerElement(truncateContent);
                 await this.tooltipRef.showTooltip();
             }
         };
-        this.handleMouseLeave = async () => {
-            if (this.tooltipRef !== null) {
-                await this.tooltipRef.hideTooltip();
+        this.closeContentTooltip = async () => {
+            const tooltip = this.tooltipRef;
+            if (tooltip !== null) {
+                try {
+                    await tooltip.hideTooltip();
+                }
+                catch {
+                    // O tooltip pode estar sendo desconectado junto com o host.
+                }
             }
+            this.tooltipRef = null;
             this.isTooltipVisible = false;
         };
+        /**
+         * Oculta o tooltip ao encerrar a interação com a célula.
+         */
+        this.handleMouseLeave = async () => {
+            await this.closeContentTooltip();
+        };
+        this.handleSortClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.brInternalTableSortRequest.emit();
+        };
+    }
+    connectedCallback() {
+        this.keyboard?.connect();
+        this.headerHeightObserver?.connect();
+    }
+    /**
+     * Publica o estado inicial após a primeira renderização.
+     */
+    componentDidLoad() {
+        const surface = this.el.shadowRoot?.querySelector('[part="cell"]');
+        if (surface !== undefined && surface !== null) {
+            this.keyboard = new TableCellKeyboard(this.el, surface);
+            this.keyboard.connect();
+            this.headerHeightObserver = new TableHeaderHeightObserver(this.el, surface);
+            this.headerHeightObserver.connect();
+        }
+        this.notifyColumnWidthChange();
+        this.notifyAlignmentChange();
+        this.notifyOverflowChange();
     }
-    validateProps() {
-        void resolveAllowedPropValue(this.el, 'horizontalAlignment', this.horizontalAlignment, ['start', 'center', 'end'], undefined, { allowUndefined: true });
-        void resolveAllowedPropValue(this.el, 'verticalAlignment', this.verticalAlignment, ['start', 'center', 'end'], undefined, { allowUndefined: true });
-        void resolveAllowedPropValue(this.el, 'overflow', this.overflow, ['truncate', 'wrap'], undefined, {
-            allowUndefined: true,
-        });
-        void resolveAllowedPropValue(this.el, 'tooltipState', this.tooltipState, ['info', 'warning', 'danger', 'success'], undefined, { allowUndefined: true });
-        void resolveAllowedPropValue(this.el, 'tooltipMode', this.tooltipMode, [TABLE_TOOLTIP_MODE.INHERIT, TABLE_TOOLTIP_MODE.ENABLED, TABLE_TOOLTIP_MODE.DISABLED], undefined, { allowUndefined: true });
+    disconnectedCallback() {
+        this.keyboard?.disconnect();
+        this.headerHeightObserver?.disconnect();
+        // Garante limpeza caso o componente seja removido enquanto o tooltip está
+        // aberto. Mantém o mesmo contrato usado pelas células virtualizadas.
+        void this.closeContentTooltip();
     }
     /**
-     * Observa mudanças no token de largura da coluna, emitindo um evento para notificar que a largura foi alterada, permitindo que as células reajam dinamicamente a mudanças no layout.
+     * Solicita o recálculo do grid quando a largura muda.
      */
     handleColumnWidthChange() {
         this.notifyColumnWidthChange();
     }
     /**
-     * Observa mudanças nos tokens de alinhamento horizontal e vertical, emitindo um evento para notificar que o alinhamento foi alterado, permitindo que a célula de cabeçalho reaja dinamicamente a essas mudanças.
+     * Solicita o recálculo dos alinhamentos quando uma prop muda.
      */
     handleAlignmentChange() {
-        this.validateProps();
         this.notifyAlignmentChange();
     }
     /**
-     * Observa mudanças no token de overflow, emitindo um evento para notificar que a configuração de overflow foi alterada, permitindo que a célula de cabeçalho reaja dinamicamente a essa mudança.
+     * Solicita o recálculo do overflow quando a prop muda.
      */
     handleOverflowChange() {
-        this.validateProps();
-        this.notifyOverflowChange();
-    }
-    componentDidLoad() {
-        this.validateProps();
-        this.notifyColumnWidthChange();
-        this.notifyAlignmentChange();
         this.notifyOverflowChange();
     }
+    /**
+     * Extrai o texto completo atribuído ao slot.
+     */
     getFullCellContent() {
         if (this.contentSlotRef === null) {
             return '';
@@ -107,11 +158,13 @@ export class TableHeaderCell {
             .filter((text) => text.length > 0)
             .join(' ');
     }
+    /**
+     * Resolve o estado do tooltip seguindo célula, linha e tabela.
+     */
     resolveTooltipState() {
         const cellValue = this.el.getAttribute('tooltip-state');
-        if (cellValue !== null) {
-            return resolveAllowedPropValue(this.el, 'tooltipState', cellValue, ['info', 'warning', 'danger', 'success'], TABLE_TOOLTIP_STATE.INFO);
-        }
+        if (cellValue !== null)
+            return cellValue;
         const row = this.el.closest('br-table-row');
         const rowValue = row?.getAttribute('tooltip-state');
         if (rowValue !== null)
@@ -122,11 +175,13 @@ export class TableHeaderCell {
             return tableValue;
         return TABLE_TOOLTIP_STATE.INFO;
     }
+    /**
+     * Resolve o modo do tooltip seguindo a hierarquia de configuração.
+     */
     resolveTooltipMode() {
         const cellValue = this.el.getAttribute('tooltip-mode');
-        if (cellValue !== null && cellValue !== TABLE_TOOLTIP_MODE.INHERIT) {
-            return resolveAllowedPropValue(this.el, 'tooltipMode', cellValue, [TABLE_TOOLTIP_MODE.INHERIT, TABLE_TOOLTIP_MODE.ENABLED, TABLE_TOOLTIP_MODE.DISABLED], TABLE_TOOLTIP_MODE.DISABLED);
-        }
+        if (cellValue !== null && cellValue !== TABLE_TOOLTIP_MODE.INHERIT)
+            return cellValue;
         const row = this.el.closest('br-table-row');
         const rowValue = row?.getAttribute('tooltip-mode');
         if (rowValue !== null && rowValue !== TABLE_TOOLTIP_MODE.INHERIT)
@@ -138,40 +193,54 @@ export class TableHeaderCell {
         return TABLE_TOOLTIP_MODE.DISABLED;
     }
     /**
-     * Notifica que a largura da coluna foi alterada, emitindo o evento customizado correspondente.
+     * Publica a solicitação de recálculo da largura.
      */
     notifyColumnWidthChange() {
         this.brColumnWidthChange.emit();
     }
     /**
-     * Notifica que o alinhamento foi alterado, emitindo o evento customizado correspondente.
+     * Publica a solicitação de recálculo dos alinhamentos.
      */
     notifyAlignmentChange() {
         this.brAlignmentChange.emit();
     }
     /**
-     * Notifica que a configuração de overflow foi alterada, emitindo o evento customizado correspondente.
+     * Publica a solicitação de recálculo do overflow.
      */
     notifyOverflowChange() {
         this.brOverflowChange.emit();
     }
-    /**
-     * Retorna o mapa de classes base do componente.
-     *
-     * @returns Um objeto representando as classes CSS a serem aplicadas ao elemento da célula de cabeçalho da tabela.
-     */
-    getHeaderCellCssClassMap() {
-        return {
-            'br-table-header-cell': true,
-        };
+    getSortAriaLabel() {
+        const columnLabel = this.getFullCellContent() || 'Coluna';
+        if (this.sortDirection === TABLE_SORT_DIRECTION.ASC) {
+            return `${columnLabel}: ordenado de forma crescente. Alterar para decrescente`;
+        }
+        if (this.sortDirection === TABLE_SORT_DIRECTION.DESC) {
+            return `${columnLabel}: ordenado de forma decrescente. Remover ordenação`;
+        }
+        return `${columnLabel}: sem ordenação. Ordenar de forma crescente`;
+    }
+    renderSortIcons() {
+        if (this.sortDirection === TABLE_SORT_DIRECTION.ASC || this.sortDirection === TABLE_SORT_DIRECTION.DESC) {
+            const iconName = this.sortDirection === TABLE_SORT_DIRECTION.ASC ? 'fa-solid:sort-up' : 'fa-solid:sort-down';
+            return h("br-icon", { class: "sort-icon", "prop:iconName": iconName });
+        }
+        // Um único glyph mantém as setas justapostas sem depender de espaçamento manual entre ícones.
+        return (h("span", { class: "sort-icon-pair" }, h("br-icon", { class: "sort-icon", "prop:iconName": "fa-solid:sort" })));
     }
     /**
-     * Renderiza o host do componente.
-     *
-     * @returns JSX.Element representando o elemento host do componente, contendo a estrutura da célula de cabeçalho da tabela.
+     * Renderiza o cabeçalho, seu conteúdo e o tooltip opcional.
      */
     render() {
-        return (h(Host, { key: '70667395aa89e642fc0e39ae29b6ed1373bfd109', role: "columnheader" }, h("div", { key: '605af5cae94de537e2100729a291dc57665733d9', class: this.getHeaderCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '793b918ca6f38f67dfb2da1c89a7addfa7e54c6f', class: "br-table-header-cell-content", role: "presentation", part: "content" }, h("div", { key: '69f6df07fc3fe20974b4beafaf025842aae3d8d0', class: "br-table-header-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '90e17f6f9b6b463133f34b561c719b1506b17b1a', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: '9d7e5184bb46bb89fb1a9b1e3a9722eada6a0518', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: 'f4c10e304309b30b5cc2cbd7fa56d008e8239491', slot: "content" }, this.tooltipContent)))))));
+        const canSort = this.sortable && resolveTableSpan(String(this.colSpan)) === 1;
+        const labelAndIcon = (h(Fragment, { key: 'e327ea2a7c797ddf0b32b912f8a949c26e54809e' }, h("div", { key: '6cfb56797ad5cc29c930234feb9a0354c741d537', class: "br-table-header-cell-label", role: "presentation" }, h("div", { key: '597d2e9316228ce200b39a9a2c5a359616fa413d', class: "br-table-header-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '49a331d81d404684f8778e235350963b1805170d', ref: (el) => (this.contentSlotRef = el) }))), canSort && this.renderSortIcons()));
+        return (h(Host, { key: '7c219d7b4648522255b1b85d057f0c408e3f0702', role: "columnheader" }, h("div", { key: '56e593dddb114f847f99a2d541273a46cdf1a534', class: {
+                'br-table-header-cell': true,
+                'is-sortable': canSort,
+                'is-sorted': this.sortDirection !== undefined,
+            }, role: "presentation", part: "cell" }, canSort ? (
+        // O botão preenche toda a célula para que o clique em qualquer ponto do cabeçalho ordene a coluna.
+        h("button", { class: "br-table-header-cell-content br-table-sort-trigger", type: "button", part: "content", "aria-label": this.getSortAriaLabel(), onClick: this.handleSortClick }, labelAndIcon)) : (h("div", { class: "br-table-header-cell-content", role: "presentation", part: "content" }, labelAndIcon)), this.isTooltipVisible && (h("br-tooltip", { key: 'b1fd2f34e818ed7789d21342b0abcde05c19f6f6', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: '3bd5d137c146815d170c1dd21acd06f084c85329', slot: "content" }, this.tooltipContent))))));
     }
     static get is() { return "br-table-header-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -187,6 +256,52 @@ export class TableHeaderCell {
     }
     static get properties() {
         return {
+            "colSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Quantidade de colunas ocupadas. Inteiro entre 1 e 1000; valores inv\u00E1lidos usam 1."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span",
+                "defaultValue": "1"
+            },
+            "rowSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Quantidade de linhas ocupadas no cabe\u00E7alho ou grupo. Limitada \u00E0s linhas\ndispon\u00EDveis; aceita inteiros de 1 a 1000 e valores inv\u00E1lidos usam 1."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-span",
+                "defaultValue": "1"
+            },
             "columnWidth": {
                 "type": "string",
                 "mutable": false,
@@ -196,8 +311,8 @@ export class TableHeaderCell {
                     "references": {
                         "ColumnWidth": {
                             "location": "import",
-                            "path": "../table-types",
-                            "id": "src/components/table/table-types.ts::ColumnWidth",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::ColumnWidth",
                             "referenceLocation": "ColumnWidth"
                         }
                     }
@@ -206,10 +321,10 @@ export class TableHeaderCell {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "example",
-                            "text": "```html\n<br-table-header-cell column-width=\"2fr\">Descri\u00E7\u00E3o</br-table-header-cell>\n```"
+                            "name": "default",
+                            "text": "undefined"
                         }],
-                    "text": "Define a largura da coluna.\nAceita `fill`, `content`, larguras positivas em `px` ou fra\u00E7\u00F5es positivas em `fr`.\nValores inv\u00E1lidos usam o fallback da tabela."
+                    "text": "Largura sem\u00E2ntica ou CSS aplicada \u00E0 coluna. Quando omitida, herda da tabela."
                 },
                 "getter": false,
                 "setter": false,
@@ -225,8 +340,8 @@ export class TableHeaderCell {
                     "references": {
                         "TableAlignment": {
                             "location": "import",
-                            "path": "../table-types",
-                            "id": "src/components/table/table-types.ts::TableAlignment",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::TableAlignment",
                             "referenceLocation": "TableAlignment"
                         }
                     }
@@ -234,8 +349,11 @@ export class TableHeaderCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o alinhamento horizontal do conte\u00FAdo dentro da c\u00E9lula de cabe\u00E7alho, permitindo a heran\u00E7a de alinhamento para as c\u00E9lulas filhas com base no valor definido."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Alinhamento horizontal herdado pelas c\u00E9lulas da coluna. Quando omitido,\no cabe\u00E7alho herda da linha ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
@@ -251,8 +369,8 @@ export class TableHeaderCell {
                     "references": {
                         "TableAlignment": {
                             "location": "import",
-                            "path": "../table-types",
-                            "id": "src/components/table/table-types.ts::TableAlignment",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::TableAlignment",
                             "referenceLocation": "TableAlignment"
                         }
                     }
@@ -260,8 +378,11 @@ export class TableHeaderCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o alinhamento vertical do conte\u00FAdo dentro da c\u00E9lula de cabe\u00E7alho, permitindo a heran\u00E7a de alinhamento para as c\u00E9lulas filhas com base no valor definido."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Alinhamento vertical herdado pelas c\u00E9lulas da coluna. Quando omitido,\no cabe\u00E7alho herda da linha ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
@@ -277,8 +398,8 @@ export class TableHeaderCell {
                     "references": {
                         "TableOverflow": {
                             "location": "import",
-                            "path": "../table-types",
-                            "id": "src/components/table/table-types.ts::TableOverflow",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::TableOverflow",
                             "referenceLocation": "TableOverflow"
                         }
                     }
@@ -286,8 +407,11 @@ export class TableHeaderCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define se o conte\u00FAdo dentro da c\u00E9lula de cabe\u00E7alho deve ser truncado, permitindo a heran\u00E7a dessa configura\u00E7\u00E3o para as c\u00E9lulas filhas com base no valor definido."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Estrat\u00E9gia de overflow herdada pelas c\u00E9lulas da coluna. Quando omitida,\no cabe\u00E7alho herda da linha ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
@@ -303,8 +427,8 @@ export class TableHeaderCell {
                     "references": {
                         "TableTooltipState": {
                             "location": "import",
-                            "path": "../table-types",
-                            "id": "src/components/table/table-types.ts::TableTooltipState",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::TableTooltipState",
                             "referenceLocation": "TableTooltipState"
                         }
                     }
@@ -312,8 +436,11 @@ export class TableHeaderCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o estado sem\u00E2ntico do tooltip nesta coluna/c\u00E9lula de cabe\u00E7alho."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Estado visual herdado pelos tooltips da coluna. Quando omitido,\no cabe\u00E7alho herda da linha ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
@@ -329,8 +456,8 @@ export class TableHeaderCell {
                     "references": {
                         "TableTooltipMode": {
                             "location": "import",
-                            "path": "../table-types",
-                            "id": "src/components/table/table-types.ts::TableTooltipMode",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::TableTooltipMode",
                             "referenceLocation": "TableTooltipMode"
                         }
                     }
@@ -338,13 +465,62 @@ export class TableHeaderCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o modo de resolu\u00E7\u00E3o do tooltip nesta coluna/c\u00E9lula de cabe\u00E7alho."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Modo de exibi\u00E7\u00E3o herdado pelos tooltips da coluna. Quando omitido ou\ndefinido como inherit, o cabe\u00E7alho herda da linha ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "tooltip-mode"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita a ordena\u00E7\u00E3o desta coluna."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sortable",
+                "defaultValue": "false"
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableSortDirection",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {
+                        "TableSortDirection": {
+                            "location": "import",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::TableSortDirection",
+                            "referenceLocation": "TableSortDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado atual de ordena\u00E7\u00E3o controlado por `br-table`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-direction"
             }
         };
     }
@@ -363,7 +539,7 @@ export class TableHeaderCell {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento customizado emitido quando a largura da coluna \u00E9 alterada, permitindo que as c\u00E9lulas reajam dinamicamente a mudan\u00E7as no layout."
+                    "text": "Emitido quando a largura declarada para a coluna muda."
                 },
                 "complexType": {
                     "original": "void",
@@ -378,7 +554,7 @@ export class TableHeaderCell {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento customizado emitido quando o alinhamento \u00E9 alterado, permitindo que a c\u00E9lula de cabe\u00E7alho reaja dinamicamente a mudan\u00E7as nos tokens de alinhamento."
+                    "text": "Emitido quando um alinhamento da coluna muda."
                 },
                 "complexType": {
                     "original": "void",
@@ -393,7 +569,25 @@ export class TableHeaderCell {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento customizado emitido quando a configura\u00E7\u00E3o de overflow \u00E9 alterada, permitindo que a c\u00E9lula de cabe\u00E7alho reaja dinamicamente a mudan\u00E7as no token de overflow."
+                    "text": "Emitido quando a estrat\u00E9gia de overflow muda."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brInternalTableSortRequest",
+                "name": "brInternalTableSortRequest",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Solicita \u00E0 tabela propriet\u00E1ria que avance a ordena\u00E7\u00E3o, sem payload.\nEmitido no host da c\u00E9lula, propaga sem atravessar Shadow DOM e n\u00E3o \u00E9\ncancel\u00E1vel; o cancelamento ocorre no evento p\u00FAblico da tabela."
                 },
                 "complexType": {
                     "original": "void",
@@ -419,6 +613,3 @@ export class TableHeaderCell {
             }];
     }
 }
-const requestAnimationFramePromise = () => new Promise((resolve) => {
-    requestAnimationFrame(() => resolve());
-});