@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/cjs/br-tab.cjs.entry.js

@@ -0,0 +1,397 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+'use strict';
+
+var index = require('./index-CRdcutym.js');
+var getNextElement = require('./getNextElement-R9l3JtM9.js');
+var id = require('./id-CjRFMzf6.js');
+
+const tabCss = () => `@import '~@fortawesome/fontawesome-free/css/all.css';*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@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))}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-tab{--tab-padding:var(--spacing-scale-3x);--tab-size:var(--tab-medium);--tab-large:var(--spacing-scale-3x);--tab-medium:var(--spacing-scale-2x);--tab-small:var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar-track{background:var(--gray-10)}.br-tab .tab-nav::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-tab .tab-nav:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-tab .tab-nav{overflow-x:auto;width:100%}@media (max-width: 991px){.br-tab .tab-nav::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar-track{background:var(--gray-10)}.br-tab .tab-nav::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-tab .tab-nav:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-tab .tab-nav{display:flex;overflow-x:auto;width:100%}}.br-tab .tab-nav ul{border-bottom:1px solid var(--border-color);display:flex;margin-bottom:0;margin-top:0;padding:0;width:100%}.br-tab .tab-item{align-items:center;display:flex;justify-content:center;position:relative;white-space:nowrap}.br-tab .tab-item button,.br-tab .tab-item a{--focus-offset:calc(var(--spacing-scale-half) * -1)}.br-tab .tab-item button:focus,.br-tab .tab-item a:focus{outline:none}.br-tab .tab-item button.focus-visible,.br-tab .tab-item button:focus-visible,.br-tab .tab-item a.focus-visible,.br-tab .tab-item a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-tab .tab-item button:not(:disabled):hover,.br-tab .tab-item a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-tab .tab-item button,.br-tab .tab-item a{background-color:rgba(0,0,0,0);border:0;border-bottom:4px solid rgba(0,0,0,0);color:var(--color);display:inline-block;font-size:var(--font-size-scale-up-02);font-weight:var(--font-weight-medium);line-height:1;padding:var(--tab-size) var(--tab-padding);text-align:center;white-space:nowrap}.br-tab .tab-item:first-child{padding-left:0}.br-tab .tab-item:last-child{padding-right:0}.br-tab .tab-item.is-active button,.br-tab .tab-item.active button{border-bottom:4px solid var(--active);color:var(--active)}.br-tab .tab-item.is-active .results,.br-tab .tab-item.active .results{--font-weight:var(--font-weight-semi-bold);color:var(--active)}.br-tab .results{display:flex;font-weight:var(--font-weight);justify-content:center;margin-top:var(--spacing-scale-2x);position:absolute;top:100%}.br-tab[data-counter=true] .tab-nav ul{margin-bottom:calc(var(--spacing-scale-2x) + var(--font-size-scale-up-02) + var(--spacing-scale-base))}.br-tab .tab-content .tab-panel{color:var(--text-color);display:none}.br-tab .tab-content .tab-panel.is-active,.br-tab .tab-content .tab-panel.active{display:block}.br-tab.small,.br-tab[small]{--tab-size:var(--tab-small)}.br-tab.medium,.br-tab[medium]{--tab-size:var(--tab-medium)}.br-tab.large,.br-tab[large]{--tab-size:var(--tab-large)}.br-tab.inverted,.br-tab.dark-mode{--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)}.br-tab.inverted .tab-item.active button,.br-tab.dark-mode .tab-item.active button{border-bottom-color:var(--background-light);color:var(--color)}:host{display:block;height:100%;min-height:0;overflow:hidden;--br-tab-height:auto}.br-tab{box-sizing:border-box;display:flex;flex-direction:column;height:var(--br-tab-height);min-height:0;width:100%;overflow:hidden;padding:var(--tab-container-padding, 16px)}.br-tab.scroll-disabled{height:auto;min-height:auto;overflow:visible}.tab-nav{display:flex;flex-direction:row;align-items:flex-start;gap:0;list-style:none;margin:0;padding:0;flex:0 0 auto}.tab-nav[data-counter=true]{min-height:102px;overflow:hidden;max-height:65px}.tab-nav .tab-item{display:flex;flex-direction:column;align-items:center;position:relative}.tab-nav .tab-item button .icon:not(:only-child){margin-right:var(--spacing-scale-base)}br-divider{--divider-margin-top:0;--divider-margin-bottom:var(--spacing-scale-2x, 8px)}.tab-content{flex:1 1 auto;min-height:0;overflow-y:auto}.scroll-disabled .tab-content{overflow:hidden}.results{display:flex;font-weight:var(--font-weight);justify-content:center;margin-top:var(--spacing-scale-2x);position:absolute;top:100%}`;
+
+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)$/;
+const Tab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.brTabChange = index.createEvent(this, "brTabChange", 7);
+        /**
+         * 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 = id.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$1 = id.generateUniqueId();
+                    item.tabItemId = id$1;
+                    item.setAttribute('tab-item-id', id$1);
+                }
+                // 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 = getNextElement.getNextElementIndex(this.tabItems, currentIndex, 'forward');
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = getNextElement.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) ? (index.h("i", { class: icon, "aria-hidden": "true" })) : (index.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 (index.h(index.Host, { key: '2a7d6c841cced42301229ca74da08602ff8cd0dc' }, index.h("div", { key: '510a88169aa7826511d27fd7ccb16069fd0a695d', class: this.getCssClassMap(), id: this.customId, part: "container", style: resolvedHeight !== undefined ? { '--br-tab-height': resolvedHeight } : undefined }, index.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$1) => {
+            const isActive = item.tabItemId === this.activeTabId;
+            const showOnlyIcon = item.iconOnly ?? (item.onlyIcon || item.hasAttribute('only-icon'));
+            const itemLabel = item.label ?? item.tabItemTitle;
+            return (index.h("div", { key: item.tabItemId, class: this.getTabItemCssClassMap(isActive), role: "none" }, index.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 + 1, "aria-label": `${itemLabel}${item.counter ? ` (${item.counter})` : ''}`, title: item.getAttribute('title') || undefined, "data-tab-id": item.tabItemId, "data-tab-index": index$1, onClick: this.handleTabButtonClick, onKeyDown: this.handleTabButtonKeyDown }, index.h("span", { class: "name" }, item.icon && index.h("span", { class: "icon" }, this.renderTabIcon(item.icon)), !showOnlyIcon && index.h("span", null, itemLabel))), isActive && index.h("span", { class: "tab-indicator", part: "indicator", "aria-hidden": "true" }), item.counter && (index.h("span", { id: `tab-counter-${item.tabItemId}`, class: "results" }, "(", item.counter, ")"))));
+        })), index.h("br-divider", { key: '1a1dbd51fc7980e770123cbcd34325f883c31637', "color-mode": this.colorMode }), index.h("div", { key: 'fbeabbb404bdb4788d6ce6cd8b7e0b8d13c5fd30', class: "tab-content", part: "content" }, index.h("slot", { key: 'b274ba4047b9775b08ae1b973239ee669c829889', ref: (el) => {
+                this.slotElement = el;
+            }, onSlotchange: this.registerTabItems })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "activeTabId": [{
+                "activeTabChanged": 0
+            }],
+        "colorMode": [{
+                "colorModeChanged": 0
+            }]
+    }; }
+};
+Tab.FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+Tab.style = tabCss();
+
+exports.br_tab = Tab;

package/dist/cjs/br-table-body.cjs.entry.js

@@ -0,0 +1,37 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+'use strict';
+
+var index = require('./index-CRdcutym.js');
+
+const tableBodyCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@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))}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{display:contents}.br-table-body{display:contents}`;
+
+const TableBody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Retorna o mapa de classes base do componente.
+     *
+     * @returns Um objeto representando as classes CSS a serem aplicadas ao elemento do corpo da tabela.
+     */
+    getBodyCssClassMap() {
+        return {
+            'br-table-body': true,
+        };
+    }
+    /**
+     * Renderiza o host do componente.
+     *
+     * @returns JSX.Element representando o elemento host do componente, contendo a estrutura do corpo da tabela.
+     */
+    render() {
+        return (index.h(index.Host, { key: '6872673851bfe5e9b5848e4c0c7a639313edc2d7', role: "rowgroup" }, index.h("div", { key: '9e0c798fed2d1f3f147632649e4aba5bcd216efb', class: this.getBodyCssClassMap(), role: "presentation", part: "body" }, index.h("slot", { key: '51f1eeb1bd40071be0785c5ec40db60c8c7bdb60' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+TableBody.style = tableBodyCss();
+
+exports.br_table_body = TableBody;