@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/tab/tab.js

@@ -0,0 +1,724 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { getNextElementIndex } from "../../shared/utils/getNextElement";
+import { generateUniqueId } from "../../shared/utils/id";
+const CSS_FUNCTION_HEIGHT_REGEX = /^(calc|min|max|clamp)\(.+\)$/;
+const CSS_UNIT_HEIGHT_REGEX = /^\d+(\.\d+)?(px|%|vh|vw|dvh|svh|lvh|vmin|vmax|rem|em)$/;
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/tab?tab=designer).
+ *
+ * @category Navegação
+ * @status stable
+ * @slot default - Slot para inserir os itens das abas (br-tab-item)
+ *
+ * @part container - Contêiner principal que envolve toda a estrutura do componente (navegação e conteúdo). Expõe o elemento para customizações de fundo, bordas e espaçamentos globais.
+ * @part nav - Área de navegação (`tablist`) onde os botões das abas estão localizados. Permite customizar o alinhamento, espaçamento e plano de fundo da barra de abas.
+ * @part button - Botão individual de cada aba.
+ * @part indicator - Indicador visual da aba ativa.
+ * @part content - Área de conteúdo das abas.
+ */
+export class Tab {
+    constructor() {
+        /**
+         * ID do tab atualmente ativo
+         */
+        this.activeTabId = '';
+        /**
+         * Lista dos tab items registrados
+         */
+        this.tabItems = [];
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Define a densidade visual do componente.
+         *
+         * - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).
+         * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.
+         * - `large`: Baixa densidade (componente maior, mais espaçamento e altura).
+         *
+         */
+        this.density = 'medium';
+        /**
+         * Label de acessibilidade para a navegação das tabs
+         */
+        this.label = 'Abas de Navegação';
+        /**
+         * Define o alinhamento horizontal dos itens da tab na barra de navegação.
+         * @deprecated Use `alignment`.
+         */
+        this.alignItemsTab = 'start';
+        /**
+         * Desabilita o scroll automático da área de conteúdo.
+         * Por padrão, o scroll vertical fica apenas na região de conteúdo.
+         * @deprecated Use `scrollable`.
+         */
+        this.scrollDisabled = false;
+        /**
+         * Flag para controlar se o activeTabId já foi inicializado
+         */
+        this.activeTabInitialized = false;
+        this.syncingTabStates = false;
+        this.lastTabItemsSignature = '';
+        this.tabSyncFrame = null;
+        /**
+         * Registra os tab items filhos e garante que cada um tenha um ID único.
+         * Também propaga o color mode para os tab items.
+         * @returns void
+         */
+        this.registerTabItems = () => {
+            if (this.slotElement === undefined || this.slotElement === null)
+                return;
+            const assignedElements = this.slotElement.assignedElements();
+            this.tabItems = assignedElements.filter((el) => el.tagName?.toLowerCase() === 'br-tab-item');
+            // Garante que cada tab item tenha um ID único
+            this.tabItems.forEach((item) => {
+                if (item.tabItemId === undefined ||
+                    item.tabItemId === null ||
+                    (typeof item.tabItemId === 'string' && item.tabItemId === '') ||
+                    item.hasAttribute('tab-item-id') === false) {
+                    const id = generateUniqueId();
+                    item.tabItemId = id;
+                    item.setAttribute('tab-item-id', id);
+                }
+                // Propaga color mode
+                if (this.colorMode !== undefined && this.colorMode !== null && typeof this.colorMode === 'string') {
+                    item.setAttribute('color-mode', this.colorMode);
+                }
+            });
+            // Só define activeTabId se ainda não foi inicializado
+            if (!this.activeTabInitialized && this.tabItems.length > 0) {
+                const activeItem = this.tabItems.find((item) => (item.active ?? item.isActive) === true);
+                this.activeTabId = activeItem?.tabItemId || this.tabItems[0].tabItemId;
+                this.activeTabInitialized = true;
+            }
+            this.updateTabStates();
+        };
+        /**
+         * Manipula a navegação por teclado nos botões de tab para melhorar a acessibilidade
+         */
+        this.handleTabButtonClick = (event) => {
+            const tabId = event.currentTarget?.getAttribute('data-tab-id');
+            if (typeof tabId === 'string' && tabId.trim() !== '') {
+                this.handleTabClick(tabId);
+            }
+        };
+        /**
+         * Manipula o evento de pressionamento de tecla nos botões de tab para melhorar a acessibilidade
+         * @param event Evento de teclado
+         */
+        this.handleTabButtonKeyDown = (event) => {
+            const indexAttr = event.currentTarget?.getAttribute('data-tab-index');
+            const index = indexAttr !== null ? Number(indexAttr) : NaN;
+            if (!Number.isNaN(index)) {
+                this.handleKeyNavigation(index, event);
+            }
+        };
+    }
+    /**
+     * Observa mudanças no tab ativo para atualizar os estados
+     */
+    activeTabChanged(newId) {
+        this.updateTabStates();
+        const activeIndex = this.tabItems.findIndex((item) => item.tabItemId === newId);
+        this.brTabChange.emit({ tabId: newId, tabIndex: activeIndex });
+    }
+    /**
+     * Observa mudanças no color mode para propagar aos filhos
+     */
+    colorModeChanged(newValue) {
+        this.tabItems.forEach((item) => {
+            if (newValue !== undefined && newValue !== null && typeof newValue === 'string') {
+                item.setAttribute('color-mode', newValue);
+            }
+            else {
+                item.removeAttribute('color-mode');
+            }
+        });
+    }
+    /**
+     * Ciclo de vida. Executado quando o componente é removido do DOM.
+     * Desconecta o MutationObserver para evitar vazamentos de memória.
+     */
+    disconnectedCallback() {
+        if (this.mutationObserver !== undefined &&
+            this.mutationObserver !== null &&
+            typeof this.mutationObserver === 'object') {
+            this.mutationObserver.disconnect();
+        }
+        if (this.tabSyncFrame !== null) {
+            cancelAnimationFrame(this.tabSyncFrame);
+            this.tabSyncFrame = null;
+        }
+    }
+    /**
+     * Ciclo de vida. Executado antes do componente ser carregado no DOM.
+     * Garante que os tab items sejam registrados mesmo que o evento slotchange não seja disparado.
+     */
+    componentWillLoad() {
+        // Garante que registerTabItems seja chamado mesmo se slotchange não disparar
+        this.registerTabItems();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver !== 'function')
+            return;
+        this.mutationObserver = new MutationObserver(() => {
+            if (this.tabSyncFrame !== null)
+                return;
+            this.tabSyncFrame = requestAnimationFrame(() => {
+                this.tabSyncFrame = null;
+                this.registerTabItems();
+            });
+        });
+        this.mutationObserver.observe(this.el, { childList: true });
+    }
+    /**
+     * Escuta evento de mudança de propriedades dos tab-items filhos.
+     * Este listener garante que o componente pai seja re-renderizado quando
+     * propriedades mudam dinamicamente, sincronizando o painel ativo.
+     */
+    handleTabItemPropsChange() {
+        if (this.syncingTabStates)
+            return;
+        // Sincroniza se a aba foi ativada externamente pelo DOM (is-active="true")
+        const externallyActivated = this.tabItems.find((item) => (item.active ?? item.isActive) && item.tabItemId !== this.activeTabId);
+        if (externallyActivated) {
+            this.activeTabId = externallyActivated.tabItemId;
+            return;
+        }
+        // Força re-renderização para atualizar a navegação
+        const nextSignature = this.tabItems
+            .map((item) => `${item.tabItemId}|${item.label}|${item.icon}|${item.counter}|${item.active ?? item.isActive}`)
+            .join('||');
+        if (nextSignature === this.lastTabItemsSignature)
+            return;
+        this.lastTabItemsSignature = nextSignature;
+        this.tabItems = [...this.tabItems];
+    }
+    /**
+     * Ativa programaticamente uma aba a partir do seu identificador.
+     * @param tabId Identificador da aba (`tab-item-id`).
+     */
+    async setActiveTab(tabId) {
+        if (typeof tabId !== 'string' || tabId.trim() === '')
+            return;
+        const exists = this.tabItems.some((item) => item.tabItemId === tabId);
+        if (!exists)
+            return;
+        this.activeTabId = tabId;
+    }
+    /**
+     * Retorna o identificador da aba ativa atual.
+     */
+    async getActiveTab() {
+        return this.activeTabId || undefined;
+    }
+    /**
+     * Atualiza o estado ativo de todos os tab items
+     * Comunicação direta similar ao Vue
+     */
+    updateTabStates() {
+        this.syncingTabStates = true;
+        try {
+            this.tabItems.forEach((item) => {
+                const isActive = item.tabItemId === this.activeTabId;
+                if (item.active !== undefined) {
+                    if (item.active !== isActive)
+                        item.active = isActive;
+                }
+                else if (item.isActive !== isActive) {
+                    item.isActive = isActive;
+                }
+            });
+        }
+        finally {
+            this.syncingTabStates = false;
+        }
+    }
+    /**
+     * Manipula o clique em um botão de tab
+     */
+    handleTabClick(tabId) {
+        if (this.activeTabId !== tabId) {
+            this.activeTabId = tabId;
+        }
+    }
+    /**
+     * Manipula navegação por teclado (acessibilidade)
+     */
+    handleKeyNavigation(currentIndex, event) {
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = getNextElementIndex(this.tabItems, currentIndex, 'forward');
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = getNextElementIndex(this.tabItems, currentIndex, 'backward');
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = this.tabItems.length - 1;
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusActivePanelContent(currentIndex);
+                return;
+            default:
+                return;
+        }
+        // Ativa e foca o novo tab
+        if (newIndex !== currentIndex) {
+            this.activeTabId = this.tabItems[newIndex].tabItemId;
+            // O foco será definido no próximo render através do tabindex
+            setTimeout(() => {
+                const buttons = this.el.shadowRoot?.querySelectorAll('.tab-item button');
+                buttons?.[newIndex]?.focus();
+            }, 0);
+        }
+    }
+    focusActivePanelContent(currentIndex) {
+        const activePanel = this.tabItems[currentIndex];
+        if (activePanel === undefined || activePanel === null || typeof activePanel !== 'object')
+            return;
+        const focusableElements = activePanel.querySelectorAll(Tab.FOCUSABLE_SELECTOR);
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+            return;
+        }
+        activePanel.focus();
+    }
+    /**
+     * Retorna o mapeamento de classes CSS do componente
+     */
+    getCssClassMap() {
+        return {
+            'br-tab': true,
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            'dark-mode': this.colorMode === 'dark',
+            'scroll-disabled': this.scrollable === undefined ? this.scrollDisabled : !this.scrollable,
+        };
+    }
+    /**
+     * Retorna o mapeamento de classes CSS para cada item de navegação
+     */
+    getTabItemCssClassMap(isActive) {
+        return {
+            'tab-item': true,
+            active: isActive,
+            'dark-mode': this.colorMode === 'dark',
+        };
+    }
+    renderTabIcon(icon) {
+        return /\s/.test(icon) ? (h("i", { class: icon, "aria-hidden": "true" })) : (h("br-icon", { iconName: icon, width: "16", height: "16" }));
+    }
+    /**
+     * Retorna o alinhamento em formato flexbox
+     */
+    getAlignItemsStyle() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+        };
+        return alignMap[this.alignment ?? this.alignItemsTab] || 'flex-start';
+    }
+    /**
+     * Verifica se o valor fornecido é uma altura válida para o componente, aceitando unidades CSS modernas e a palavra-chave 'auto'.
+     * @param value Valor a ser verificado
+     * @returns true se o valor for uma altura válida, caso contrário false
+     */
+    isValidHeight(value) {
+        if (!value || typeof value !== 'string')
+            return false;
+        const trimmed = value.trim();
+        // aceita auto
+        if (trimmed === 'auto')
+            return true;
+        // aceita funções CSS modernas
+        if (CSS_FUNCTION_HEIGHT_REGEX.test(trimmed))
+            return true;
+        // aceita unidades CSS modernas
+        if (CSS_UNIT_HEIGHT_REGEX.test(trimmed))
+            return true;
+        return false;
+    }
+    /**
+     * Retorna a altura resolvida do componente, considerando valores válidos e emitindo um aviso para valores inválidos.
+     * @returns A altura resolvida ou undefined se o valor for inválido
+     */
+    getResolvedHeight() {
+        if (!this.height)
+            return undefined;
+        if (this.isValidHeight(this.height)) {
+            return this.height;
+        }
+        console.warn(`[br-tab]: valor inválido para "height": "${this.height}". Valor ignorado.`);
+        return undefined;
+    }
+    /**
+     * Renderiza o componente.
+     * @returns JSX.Element
+     */
+    render() {
+        const hasCounter = this.tabItems.some((item) => item.counter);
+        const resolvedHeight = this.getResolvedHeight();
+        return (h(Host, { key: '2a7d6c841cced42301229ca74da08602ff8cd0dc' }, h("div", { key: '510a88169aa7826511d27fd7ccb16069fd0a695d', class: this.getCssClassMap(), id: this.customId, part: "container", style: resolvedHeight !== undefined ? { '--br-tab-height': resolvedHeight } : undefined }, h("div", { key: 'e50f752f5d6644a8277e2794344460ef813feb92', class: "tab-nav", role: "tablist", "aria-label": this.label, "data-counter": hasCounter ? 'true' : 'false', part: "nav", style: { justifyContent: this.getAlignItemsStyle() } }, this.tabItems.map((item, index) => {
+            const isActive = item.tabItemId === this.activeTabId;
+            const showOnlyIcon = item.iconOnly ?? (item.onlyIcon || item.hasAttribute('only-icon'));
+            const itemLabel = item.label ?? item.tabItemTitle;
+            return (h("div", { key: item.tabItemId, class: this.getTabItemCssClassMap(isActive), role: "none" }, h("button", { type: "button", id: `tab-button-${item.tabItemId}`, part: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabindex: isActive ? 0 : -1, "aria-setsize": this.tabItems.length, "aria-posinset": index + 1, "aria-label": `${itemLabel}${item.counter ? ` (${item.counter})` : ''}`, title: item.getAttribute('title') || undefined, "data-tab-id": item.tabItemId, "data-tab-index": index, onClick: this.handleTabButtonClick, onKeyDown: this.handleTabButtonKeyDown }, h("span", { class: "name" }, item.icon && h("span", { class: "icon" }, this.renderTabIcon(item.icon)), !showOnlyIcon && h("span", null, itemLabel))), isActive && h("span", { class: "tab-indicator", part: "indicator", "aria-hidden": "true" }), item.counter && (h("span", { id: `tab-counter-${item.tabItemId}`, class: "results" }, "(", item.counter, ")"))));
+        })), h("br-divider", { key: '1a1dbd51fc7980e770123cbcd34325f883c31637', "color-mode": this.colorMode }), h("div", { key: 'fbeabbb404bdb4788d6ce6cd8b7e0b8d13c5fd30', class: "tab-content", part: "content" }, h("slot", { key: 'b274ba4047b9775b08ae1b973239ee669c829889', ref: (el) => {
+                this.slotElement = el;
+            }, onSlotchange: this.registerTabItems })))));
+    }
+    static get is() { return "br-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeTabId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID do tab atualmente ativo"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active-tab-id",
+                "defaultValue": "''"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "TabDensity": {
+                            "location": "import",
+                            "path": "./tab.types",
+                            "id": "src/components/tab/tab.types.ts::TabDensity",
+                            "referenceLocation": "TabDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espa\u00E7amento).\n- `medium`: Densidade intermedi\u00E1ria, padr\u00E3o recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espa\u00E7amento e altura)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "colorMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabColorMode",
+                    "resolved": "\"dark\"",
+                    "references": {
+                        "TabColorMode": {
+                            "location": "import",
+                            "path": "./tab.types",
+                            "id": "src/components/tab/tab.types.ts::TabColorMode",
+                            "referenceLocation": "TabColorMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o Tab usar\u00E1 um esquema de cores escuro."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color-mode"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label de acessibilidade para a navega\u00E7\u00E3o das tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label",
+                "defaultValue": "'Abas de Navega\u00E7\u00E3o'"
+            },
+            "alignItemsTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabAlignItems",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "TabAlignItems": {
+                            "location": "import",
+                            "path": "./tab.types",
+                            "id": "src/components/tab/tab.types.ts::TabAlignItems",
+                            "referenceLocation": "TabAlignItems"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `alignment`."
+                        }],
+                    "text": "Define o alinhamento horizontal dos itens da tab na barra de navega\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align-items-tab",
+                "defaultValue": "'start'"
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabAlignItems",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "TabAlignItems": {
+                            "location": "import",
+                            "path": "./tab.types",
+                            "id": "src/components/tab/tab.types.ts::TabAlignItems",
+                            "referenceLocation": "TabAlignItems"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alinhamento horizontal can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `alignItemsTab`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "alignment"
+            },
+            "scrollDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `scrollable`."
+                        }],
+                    "text": "Desabilita o scroll autom\u00E1tico da \u00E1rea de conte\u00FAdo.\nPor padr\u00E3o, o scroll vertical fica apenas na regi\u00E3o de conte\u00FAdo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "scroll-disabled",
+                "defaultValue": "false"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla o scroll interno. Quando informado, tem preced\u00EAncia sobre `scrollDisabled`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "scrollable"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a altura m\u00E1xima da \u00E1rea de conte\u00FAdo, ativando o scroll interno quando o conte\u00FAdo ultrapassa essa altura."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "height"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tabItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brTabChange",
+                "name": "brTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento disparado quando um tab \u00E9 ativado."
+                },
+                "complexType": {
+                    "original": "{ tabId: string; tabIndex: number }",
+                    "resolved": "{ tabId: string; tabIndex: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setActiveTab": {
+                "complexType": {
+                    "signature": "(tabId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "tabId",
+                            "type": "string",
+                            "docs": "Identificador da aba (`tab-item-id`)."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Ativa programaticamente uma aba a partir do seu identificador.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "tabId Identificador da aba (`tab-item-id`)."
+                        }]
+                }
+            },
+            "getActiveTab": {
+                "complexType": {
+                    "signature": "() => Promise<string | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Retorna o identificador da aba ativa atual.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeTabId",
+                "methodName": "activeTabChanged"
+            }, {
+                "propName": "colorMode",
+                "methodName": "colorModeChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "brTabItemPropsChange",
+                "method": "handleTabItemPropsChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+Tab.FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';