@govbr-ds/webcomponents 2.4.0 → 2.6.0

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

@@ -2,41 +2,78 @@
  * Construído por SERPRO
  * © https://serpro.gov.br/ - MIT License.
  */
-import { Host, h } from "@stencil/core";
-import { findComposedOwner } from "../../../shared/utils/ownership";
-import { resolveAllowedPropValue } from "../../../shared/utils/props";
-import { TABLE_TOOLTIP_MODE, TABLE_TOOLTIP_STATE } from "../table-constants";
+import { Fragment, Host, h, } from "@stencil/core";
+import { TableActionsTooltip } from "../table.actions-tooltip";
+import { TABLE_DENSITY, TABLE_TOOLTIP_MODE, TABLE_TOOLTIP_STATE } from "../table.constants";
+import { TableCellKeyboard } from "../table.keyboard";
+import { requestAnimationFramePromise, resolveTableDensityFromElement } from "../table.utils";
 /**
- * Subcomponente de célula de dados de `br-table`, utilizado para renderizar o valor ou conteúdo de um registro em uma coluna específica.
+ * ## 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).
  *
- * - Exibe o dado pontual da coluna (`role="cell"`), podendo conter texto, badges, ícones, botões de ação ou links.
+ * Representa uma célula de dados, com suporte a alinhamento, overflow,
+ * tooltip e agrupamento automático de ações excedentes. Compõe `br-table-row`
+ * dentro do corpo de `br-table`, que coordena posição, interação e herança.
+ * Use `rowSpan` dentro de um grupo contíguo de linhas e `rowHeader` para seu
+ * rótulo compartilhado; evite uso avulso fora da composição da tabela.
  *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro de um `br-table-row` situado no `br-table-body`. O dimensionamento e posicionamento são calculados pelas regras de CSS Grid da 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.
- * @part content - Área de conteúdo da célula.
+ * @slot default - Conteúdo ou ações da célula.
+ * @part cell - Superfície visual da célula.
+ * @part content - Contêiner responsável pelo alinhamento.
+ * @fires brAlignmentChange - Quando um alinhamento específico muda.
+ * @fires brOverflowChange - Quando a estratégia de overflow muda.
  */
 export class TableCell {
     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;
+        /**
+         * 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;
+        /**
+         * Identifica um cabeçalho de linha, inclusive rótulos compartilhados por um grupo.
+         * @default false
+         */
+        this.rowHeader = false;
         /**
-         * Armazena o texto completo exibido no tooltip.
+         * Texto completo do tooltip do botão de ações agrupadas desta célula.
+         * A propriedade `moreActionsLabel` de `br-table` prevalece quando
+         * informada. Valores vazios ou compostos apenas por espaços usam "Mais ações".
+         * Não altera o nome acessível do botão nem os rótulos das ações.
+         * Aceita texto simples por atributo ou propriedade, sem reflexão.
+         *
+         * @default 'Mais ações'
          */
+        this.moreActionsLabel = 'Mais ações';
+        this.isTooltipVisible = false;
         this.tooltipContent = '';
+        this.hasTableActionContent = false;
+        this.hasOnlyTableActionContent = false;
+        this.tableActions = [];
+        this.inheritedCellActionsLimit = 4;
+        this.effectiveActionDensity = TABLE_DENSITY.MEDIUM;
         this.tooltipRef = null;
+        this.actionsTooltip = new TableActionsTooltip();
         this.truncateContentRef = null;
         this.contentSlotRef = null;
+        this.tableInheritedPropsObserver = null;
+        this.densityObserver = null;
+        /**
+         * Exibe o tooltip somente quando o conteúdo está truncado.
+         */
         this.handleMouseEnter = async () => {
+            // Quando as ações foram agrupadas, o dropdown possui seu próprio tooltip.
+            // Evita criar um segundo tooltip ancorado no contêiner da célula.
+            if (this.shouldCollapseTableActions()) {
+                return;
+            }
             if (this.resolveTooltipMode() !== TABLE_TOOLTIP_MODE.ENABLED) {
                 return;
             }
@@ -44,55 +81,245 @@ export class TableCell {
             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) {
+            // Entre o pointerenter e o próximo frame a lista virtual pode desmontar a
+            // linha. Nunca registra um trigger que já saiu do documento.
+            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();
+        /**
+         * Fecha o tooltip e limpa o estado local. É reutilizado tanto no
+         * pointerleave quanto na desconexão causada pela lista virtual.
+         */
+        this.closeContentTooltip = async () => {
+            const tooltip = this.tooltipRef;
+            if (tooltip !== null) {
+                try {
+                    await tooltip.hideTooltip();
+                }
+                catch {
+                    // O tooltip pode estar sendo desconectado no mesmo ciclo da linha.
+                }
             }
+            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.syncActionDensity = () => {
+            const nextDensity = this.actionDensity ?? resolveTableDensityFromElement(this.el);
+            if (this.effectiveActionDensity !== nextDensity)
+                this.effectiveActionDensity = nextDensity;
+        };
     }
-    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 });
+    /**
+     * Retorna a altura renderizada da superfície visual desta célula, em pixels.
+     *
+     * @returns Altura da superfície da célula; zero se ela ainda não estiver renderizada.
+     */
+    async getMeasuredHeight() {
+        const surface = this.el.shadowRoot?.querySelector('.br-table-cell');
+        return surface?.getBoundingClientRect().height ?? 0;
+    }
+    /**
+     * Ressincroniza a herança sempre que a célula entra na árvore.
+     * Isso é necessário porque a lista virtual conecta e desconecta a mesma
+     * instância diversas vezes durante o scroll.
+     */
+    connectedCallback() {
+        this.keyboard?.connect();
+        this.syncInheritedTableProps();
+        this.observeTableInheritedProps();
+        this.syncActionDensity();
+        this.observeDensitySources();
+    }
+    /**
+     * Inicializa ações, conteúdo e propriedades herdáveis após a montagem.
+     */
+    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.syncInheritedTableProps();
+        this.updateHasTableActionContent();
+        void requestAnimationFramePromise().then(() => this.syncTableActions());
+        this.notifyAlignmentChange();
+        this.notifyOverflowChange();
+        this.syncActionDensity();
+    }
+    disconnectedCallback() {
+        this.keyboard?.disconnect();
+        this.tableInheritedPropsObserver?.disconnect();
+        this.tableInheritedPropsObserver = null;
+        this.densityObserver?.disconnect();
+        this.densityObserver = null;
+        // A virtualização pode remover a linha sem que pointerleave seja emitido.
+        // Fecha explicitamente qualquer tooltip ancorado nesta célula antes que o
+        // trigger deixe de existir no DOM.
+        void this.closeContentTooltip();
+        void this.actionsTooltip.hide();
     }
     /**
-     * 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 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 reaja dinamicamente a essa mudança.
+     * Solicita o recálculo do overflow quando a prop muda.
      */
     handleOverflowChange() {
-        this.validateProps();
         this.notifyOverflowChange();
     }
+    handleActionDensityChange() {
+        this.syncActionDensity();
+    }
     /**
-     * Gatilho do ciclo de vida do componente que é chamado após o componente ser carregado, garantindo que o alinhamento inicial seja aplicado ao conteúdo da célula.
+     * Identifica se o slot contém ações e se elas são o único conteúdo.
      */
-    componentDidLoad() {
-        this.validateProps();
-        this.notifyAlignmentChange();
-        this.notifyOverflowChange();
+    updateHasTableActionContent() {
+        if (this.contentSlotRef === null) {
+            this.hasTableActionContent = false;
+            this.hasOnlyTableActionContent = false;
+            return;
+        }
+        const assignedElements = this.contentSlotRef.assignedElements({ flatten: true });
+        this.hasTableActionContent = assignedElements.some((element) => {
+            if (element.tagName.toLowerCase() === 'br-table-action') {
+                return true;
+            }
+            return element.querySelector('br-table-action') !== null;
+        });
+        this.hasOnlyTableActionContent =
+            assignedElements.length > 0 &&
+                assignedElements.every((element) => element.tagName.toLowerCase() === 'br-table-action');
     }
+    /**
+     * Normaliza as ações atribuídas ao slot para uso no menu excedente.
+     */
+    syncTableActions() {
+        if (this.contentSlotRef === null) {
+            this.tableActions = [];
+            return;
+        }
+        const assignedElements = this.contentSlotRef.assignedElements({ flatten: true });
+        this.tableActions = assignedElements
+            .filter((element) => element.tagName.toLowerCase() === 'br-table-action')
+            .map((actionElement, index) => ({
+            actionElement,
+            label: this.getActionLabel(actionElement, index),
+        }));
+    }
+    /**
+     * Obtém um rótulo utilizável, com fallback baseado na posição.
+     */
+    getActionLabel(actionElement, index) {
+        const label = actionElement.getAttribute('label')?.trim() || actionElement.getAttribute('aria-label')?.trim();
+        if (label !== undefined && label.length > 0) {
+            return label;
+        }
+        return `Ação ${index + 1}`;
+    }
+    /**
+     * Resolve e sanitiza o limite local ou herdado de ações.
+     */
+    getNormalizedActionsLimit() {
+        if (this.cellActionsLimit !== undefined && Number.isFinite(this.cellActionsLimit)) {
+            return Math.max(1, Math.floor(this.cellActionsLimit));
+        }
+        return this.inheritedCellActionsLimit;
+    }
+    /**
+     * Resolve o limite herdado da tabela quando a célula não possui override local.
+     */
+    syncInheritedCellActionsLimit() {
+        const tableElement = this.el.closest('br-table');
+        const rawValue = tableElement?.getAttribute('cell-actions-limit');
+        const parsedValue = rawValue === null || rawValue === undefined ? Number.NaN : Number(rawValue);
+        this.inheritedCellActionsLimit = Number.isFinite(parsedValue) ? Math.max(1, Math.floor(parsedValue)) : 4;
+    }
+    /**
+     * Sincroniza as propriedades herdadas da tabela.
+     */
+    syncInheritedTableProps() {
+        this.syncInheritedCellActionsLimit();
+        this.inheritedMoreActionsLabel = this.el.closest('br-table')?.getAttribute('more-actions-label') ?? undefined;
+    }
+    /**
+     * Observa mudanças em runtime nas propriedades herdadas da tabela.
+     */
+    observeTableInheritedProps() {
+        const tableElement = this.el.closest('br-table');
+        if (tableElement === null)
+            return;
+        this.tableInheritedPropsObserver?.disconnect();
+        this.tableInheritedPropsObserver = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => mutation.attributeName === 'cell-actions-limit')) {
+                this.syncInheritedCellActionsLimit();
+            }
+            if (mutations.some((mutation) => mutation.attributeName === 'more-actions-label')) {
+                this.inheritedMoreActionsLabel = tableElement.getAttribute('more-actions-label') ?? undefined;
+            }
+        });
+        this.tableInheritedPropsObserver.observe(tableElement, {
+            attributes: true,
+            attributeFilter: ['cell-actions-limit', 'more-actions-label'],
+        });
+    }
+    /**
+     * Informa se as ações precisam ser agrupadas em um menu.
+     */
+    shouldCollapseTableActions() {
+        if (!this.hasOnlyTableActionContent) {
+            return false;
+        }
+        return this.tableActions.length > this.getNormalizedActionsLimit();
+    }
+    /**
+     * Cria o detalhe de uma ação selecionada no menu excedente.
+     */
+    getCollapsedActionDetail(label) {
+        return {
+            type: 'row',
+            label,
+        };
+    }
+    /**
+     * Publica o clique de uma ação agrupada.
+     */
+    handleCollapsedActionClick(event, label) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.el.dispatchEvent(new CustomEvent('brTableActionClick', {
+            bubbles: true,
+            composed: true,
+            detail: this.getCollapsedActionDetail(label),
+        }));
+    }
+    /**
+     * Extrai o texto completo atribuído ao slot.
+     */
     getFullCellContent() {
         if (this.contentSlotRef === null) {
             return '';
@@ -103,29 +330,34 @@ export class TableCell {
             .filter((text) => text.length > 0)
             .join(' ');
     }
+    /**
+     * Localiza o cabeçalho correspondente ao índice desta célula.
+     */
     getColumnHeader() {
-        const table = findComposedOwner(this.el, 'br-table');
+        const table = this.el.closest('br-table');
         if (table === null) {
             return null;
         }
-        const row = findComposedOwner(this.el, 'br-table-row');
+        const row = this.el.closest('br-table-row');
         if (row === null) {
             return null;
         }
-        const cells = Array.from(row.querySelectorAll('br-table-cell')).filter((cell) => findComposedOwner(cell, 'br-table-row') === row);
+        const cells = Array.from(row.querySelectorAll('br-table-cell'));
         const columnIndex = cells.indexOf(this.el);
         if (columnIndex === -1) {
             return null;
         }
-        const headers = Array.from(table.querySelectorAll('br-table-header-cell')).filter((header) => findComposedOwner(header, 'br-table') === table);
+        const headers = Array.from(table.querySelectorAll('br-table-header-cell'));
         return headers[columnIndex] ?? null;
     }
+    /**
+     * Resolve o estado do tooltip seguindo a hierarquia da 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);
-        }
-        const row = findComposedOwner(this.el, 'br-table-row');
+        if (cellValue !== null)
+            return cellValue;
+        const row = this.el.closest('br-table-row');
         const rowValue = row?.getAttribute('tooltip-state');
         if (rowValue !== null)
             return rowValue;
@@ -133,17 +365,19 @@ export class TableCell {
         const columnValue = columnHeader?.getAttribute('tooltip-state');
         if (columnValue !== null)
             return columnValue;
-        const table = findComposedOwner(this.el, 'br-table');
+        const table = this.el.closest('br-table');
         const tableValue = table?.getAttribute('tooltip-state');
         if (tableValue !== null)
             return tableValue;
         return TABLE_TOOLTIP_STATE.INFO;
     }
+    /**
+     * Resolve o modo do tooltip seguindo a hierarquia da tabela.
+     */
     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)
@@ -159,34 +393,53 @@ export class TableCell {
         return TABLE_TOOLTIP_MODE.DISABLED;
     }
     /**
-     * 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();
     }
+    observeDensitySources() {
+        this.densityObserver?.disconnect();
+        this.densityObserver = null;
+        if (this.el.closest('br-table') !== null)
+            return;
+        this.densityObserver = new MutationObserver(this.syncActionDensity);
+        const densitySources = [
+            this.el,
+            this.el.closest('br-table-row'),
+            this.el.closest('br-table'),
+        ];
+        densitySources
+            .filter((element) => element !== null)
+            .forEach((element) => {
+            this.densityObserver?.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'density'] });
+        });
+    }
     /**
-     * Retorna o mapa de classes base do componente.
-     *
-     * @returns Um objeto representando as classes CSS a serem aplicadas ao elemento da célula da tabela.
+     * Renderiza o menu que contém as ações excedentes.
      */
-    getCellCssClassMap() {
-        return {
-            'br-table-cell': true,
-        };
+    renderActionsDropdown(actions) {
+        const tooltipLabel = (this.inheritedMoreActionsLabel ?? this.moreActionsLabel)?.trim() || 'Mais ações';
+        return (h(Fragment, null, h("br-dropdown", { placement: "bottom-end", targetZIndex: "var(--z-index-layer-3)", "prop:ariaLabel": "Mais a\u00E7\u00F5es da linha", ref: (element) => (this.actionsTooltip.dropdown = element), onBrDropdownOpenChange: this.actionsTooltip.hide }, h("br-button", { slot: "trigger", shape: "circle", density: this.effectiveActionDensity, emphasis: "tertiary", "prop:ariaLabel": "Abrir menu de a\u00E7\u00F5es", ref: (element) => (this.actionsTooltip.trigger = element), onPointerEnter: this.actionsTooltip.show, onPointerLeave: this.actionsTooltip.hide, onFocus: this.actionsTooltip.show, onBlur: this.actionsTooltip.hide, onClick: this.actionsTooltip.hide }, h("br-icon", { "attr:iconName": "fa-solid:ellipsis-v" })), h("br-list", { class: "cell-actions-dropdown-list", slot: "target", "list-title": "A\u00E7\u00F5es", divider: true }, actions.map((action) => (h("br-item", { isButton: true, type: "button", density: "small", "data-no-selection": true, onBrDidClick: (event) => this.handleCollapsedActionClick(event, action.label) }, action.label))))), h("br-tooltip", { ref: (element) => (this.actionsTooltip.tooltip = element), hideDelay: 3000 }, h("span", { slot: "content" }, tooltipLabel))));
     }
     /**
-     * Renderiza o host do componente.
-     *
-     * @returns JSX.Element representando o elemento host do componente, contendo a estrutura da célula da tabela.
+     * Renderiza o conteúdo, as ações e o tooltip opcional.
      */
     render() {
-        return (h(Host, { key: '3670b374c4db4eedcf5376e1f99001a892143762', role: "cell" }, h("div", { key: 'd3fac05a3f8f7cf0f96c290fb2c7f20f1682e1d1', class: this.getCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '1c26cee87dd9b0567a5805f4d2fc64b2515dcb0d', class: "br-table-cell-content", role: "presentation", part: "content" }, h("div", { key: '98c5548b069fc5d2d17ee623b41063eb5f69052d', class: "br-table-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '38f7e72e47d9be1c110c64601d22de5ee9c694b1', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: '66ed7a3097354ded916781012b4eb69e243ed252', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: 'a2b9a320c2afddc0144a794ad93fee5eb93c29ff', slot: "content" }, this.tooltipContent)))))));
+        const shouldCollapseActions = this.shouldCollapseTableActions();
+        return (h(Host, { key: '28336fcb0e7e3da9af094ab3f97dadd7c89afd7c', role: this.rowHeader ? 'rowheader' : 'gridcell' }, h("div", { key: '32378da7a8514dc43361557145d0ecda004789b0', class: "br-table-cell", role: "presentation", part: "cell" }, h("div", { key: '1a7181e51fb78331493af7514316159a65892092', class: "br-table-cell-content", role: "presentation", part: "content" }, h("div", { key: '1360b591b744208041d3ac41ec18a4cf7e33b8bc', class: {
+                'br-table-cell-truncate': true,
+                'has-table-actions': this.hasTableActionContent,
+            }, role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("div", { key: '251a8d135461a8dcf774aa1943e7a9b01a9e6eb4', class: { 'cell-actions-slot-container': true, 'is-hidden': shouldCollapseActions } }, h("slot", { key: '5e2f00565491bf212659c060d6dacb1176c96004', ref: (el) => (this.contentSlotRef = el), onSlotchange: () => {
+                this.updateHasTableActionContent();
+                this.syncTableActions();
+            } })), shouldCollapseActions && this.renderActionsDropdown(this.tableActions)), this.isTooltipVisible && (h("br-tooltip", { key: '4081ef125267a1a8ac2ce501238bf17189c7ec8e', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: 'c0f506b336ce0c20e3a493f0d96425baf63666c5', slot: "content" }, this.tooltipContent)))))));
     }
     static get is() { return "br-table-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -202,6 +455,75 @@ export class TableCell {
     }
     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"
+            },
+            "rowHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Identifica um cabe\u00E7alho de linha, inclusive r\u00F3tulos compartilhados por um grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-header",
+                "defaultValue": "false"
+            },
             "horizontalAlignment": {
                 "type": "string",
                 "mutable": false,
@@ -211,8 +533,8 @@ export class TableCell {
                     "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"
                         }
                     }
@@ -220,8 +542,11 @@ export class TableCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o alinhamento horizontal do conte\u00FAdo dentro da c\u00E9lula."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Alinhamento horizontal espec\u00EDfico da c\u00E9lula. Quando omitido, herda da\nlinha, coluna ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
@@ -237,8 +562,8 @@ export class TableCell {
                     "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"
                         }
                     }
@@ -246,8 +571,11 @@ export class TableCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o alinhamento vertical do conte\u00FAdo dentro da c\u00E9lula."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Alinhamento vertical espec\u00EDfico da c\u00E9lula. Quando omitido, herda da\nlinha, coluna ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
@@ -263,8 +591,8 @@ export class TableCell {
                     "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"
                         }
                     }
@@ -272,14 +600,84 @@ export class TableCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define se o conte\u00FAdo dentro da c\u00E9lula 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 espec\u00EDfica da c\u00E9lula. Quando omitida, herda da\nlinha, coluna ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "overflow"
             },
+            "cellActionsLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Limite local de a\u00E7\u00F5es exibidas diretamente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-actions-limit"
+            },
+            "moreActionsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Mais a\u00E7\u00F5es'"
+                        }],
+                    "text": "Texto completo do tooltip do bot\u00E3o de a\u00E7\u00F5es agrupadas desta c\u00E9lula.\nA propriedade `moreActionsLabel` de `br-table` prevalece quando\ninformada. Valores vazios ou compostos apenas por espa\u00E7os usam \"Mais a\u00E7\u00F5es\".\nN\u00E3o altera o nome acess\u00EDvel do bot\u00E3o nem os r\u00F3tulos das a\u00E7\u00F5es.\nAceita texto simples por atributo ou propriedade, sem reflex\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "more-actions-label",
+                "defaultValue": "'Mais a\u00E7\u00F5es'"
+            },
+            "sortValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Valor utilizado pela ordena\u00E7\u00E3o da coluna. Quando omitido, a tabela usa o\ntexto renderizado da c\u00E9lula."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-value"
+            },
             "tooltipState": {
                 "type": "string",
                 "mutable": false,
@@ -289,8 +687,8 @@ export class TableCell {
                     "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"
                         }
                     }
@@ -298,8 +696,11 @@ export class TableCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o estado sem\u00E2ntico do tooltip nesta c\u00E9lula."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Estado visual do tooltip da c\u00E9lula. Quando omitido, herda da linha,\ncoluna ou tabela, nessa ordem."
                 },
                 "getter": false,
                 "setter": false,
@@ -315,8 +716,8 @@ export class TableCell {
                     "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"
                         }
                     }
@@ -324,20 +725,55 @@ export class TableCell {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Define o modo de resolu\u00E7\u00E3o do tooltip nesta c\u00E9lula."
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Modo de exibi\u00E7\u00E3o do tooltip da c\u00E9lula. Quando omitido, herda da linha,\ncoluna ou tabela, nessa ordem. No modo `enabled`, exibe o conte\u00FAdo\nsomente quando estiver truncado na largura dispon\u00EDvel."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "tooltip-mode"
+            },
+            "actionDensity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "TableDensity": {
+                            "location": "import",
+                            "path": "../table.types",
+                            "id": "src/components/table/table.types.ts::TableDensity",
+                            "referenceLocation": "TableDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Densidade visual aplicada ao trigger de a\u00E7\u00F5es agrupadas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "action-density"
             }
         };
     }
     static get states() {
         return {
             "isTooltipVisible": {},
-            "tooltipContent": {}
+            "tooltipContent": {},
+            "hasTableActionContent": {},
+            "hasOnlyTableActionContent": {},
+            "tableActions": {},
+            "inheritedCellActionsLimit": {},
+            "inheritedMoreActionsLabel": {},
+            "effectiveActionDensity": {}
         };
     }
     static get events() {
@@ -349,7 +785,7 @@ export class TableCell {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento customizado emitido quando o alinhamento \u00E9 alterado, permitindo que a c\u00E9lula reaja dinamicamente a mudan\u00E7as nos tokens de alinhamento."
+                    "text": "Emitido quando um alinhamento espec\u00EDfico da c\u00E9lula muda."
                 },
                 "complexType": {
                     "original": "void",
@@ -364,7 +800,7 @@ export class TableCell {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento customizado emitido quando a configura\u00E7\u00E3o de overflow \u00E9 alterada, permitindo que a c\u00E9lula reaja dinamicamente a mudan\u00E7as no token de overflow."
+                    "text": "Emitido quando a estrat\u00E9gia de overflow da c\u00E9lula muda."
                 },
                 "complexType": {
                     "original": "void",
@@ -373,6 +809,34 @@ export class TableCell {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getMeasuredHeight": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Retorna a altura renderizada da superf\u00EDcie visual desta c\u00E9lula, em pixels.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Altura da superf\u00EDcie da c\u00E9lula; zero se ela ainda n\u00E3o estiver renderizada."
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
@@ -384,9 +848,9 @@ export class TableCell {
             }, {
                 "propName": "overflow",
                 "methodName": "handleOverflowChange"
+            }, {
+                "propName": "actionDensity",
+                "methodName": "handleActionDensityChange"
             }];
     }
 }
-const requestAnimationFramePromise = () => new Promise((resolve) => {
-    requestAnimationFrame(() => resolve());
-});