@govbr-ds/webcomponents 2.5.0 → 2.6.0

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

@@ -2,30 +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";
 /**
- * Célula de cabeçalho (`<th>`) da tabela. Use dentro de um `br-table-row` no cabeçalho.
+ * ## Design System
  *
- * Coloque o título da coluna no slot padrão. Para habilitar ordenação, ative `sortable`.
+ * 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).
  *
- * @part cell - Wrapper da célula de cabeçalho.
- * @part content - Área de conteúdo da célula de cabeçalho.
+ * 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.
+ *
+ * @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;
@@ -34,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 '';
@@ -97,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)
@@ -112,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)
@@ -128,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: '4ece237da29ff58fc411eb7e26c560dba9f0973a', role: "columnheader" }, h("div", { key: '4eaa6afebe31a0ce4907d4b8acee9f81039a019e', class: this.getHeaderCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '4ded9e1d6c1e2da28c1b2fccfd75a19d757d11d6', class: "br-table-header-cell-content", role: "presentation", part: "content" }, h("div", { key: '773cb97c329204af1076378dba230ce517cda410', class: "br-table-header-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: '8cf462e15b66cdb8ea6f04ec0c043f5d63ea0e87', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: 'c4b9f0f3302c954466dee1714afc648f949af6fe', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: '6a082b96f32d324047a565c6eb8a56e4530a39d0', 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"; }
@@ -177,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,
@@ -186,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"
                         }
                     }
@@ -196,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,
@@ -215,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"
                         }
                     }
@@ -224,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,
@@ -241,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"
                         }
                     }
@@ -250,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,
@@ -267,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"
                         }
                     }
@@ -276,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,
@@ -293,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"
                         }
                     }
@@ -302,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,
@@ -319,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"
                         }
                     }
@@ -328,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"
             }
         };
     }
@@ -353,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",
@@ -368,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",
@@ -383,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",
@@ -409,6 +613,3 @@ export class TableHeaderCell {
             }];
     }
 }
-const requestAnimationFramePromise = () => new Promise((resolve) => {
-    requestAnimationFrame(() => resolve());
-});

package/dist/collection/components/table/table-row/table-row.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}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}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)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}*[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{display:contents}.br-table-row{display:contents}
+*,*::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}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}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.pt-half{padding-top:var(--spacing-scale-half) !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)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}mark,.mark{background:var(--red-warm-vivid-10);color:var(--color)}*[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{display:contents}.br-table-row{display:contents}.br-table-row-expanded-content{grid-column:1/-1;min-width:0;height:var(--br-table-expanded-content-height, 240px);overflow-y:auto;box-sizing:border-box;padding:var(--br-table-density) var(--table-row-size);background-color:var(--background-light);border-bottom:calc(var(--br-table-divider-base-width, 0px)*var(--br-table-row-divider-factor, 0)) var(--br-table-divider-style, solid) var(--border-color)}.expanded-content-shell{position:relative;grid-row:var(--table-expanded-grid-row, auto);grid-column:1/-1;min-width:0}.expanded-content-inner{display:flow-root}.expanded-content-shell::after{position:absolute;z-index:3;inset:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.16), transparent) top/100% var(--table-scroll-shadow-top, 0),linear-gradient(to top, rgba(0, 0, 0, 0.16), transparent) bottom/100% var(--table-scroll-shadow-bottom, 0),linear-gradient(to right, rgba(0, 0, 0, 0.16), transparent) left/var(--table-scroll-shadow-left, 0) 100%,linear-gradient(to left, rgba(0, 0, 0, 0.16), transparent) right/var(--table-scroll-shadow-right, 0) 100%;background-repeat:no-repeat;content:"";pointer-events:none}