@govbr-ds/webcomponents 2.0.0-next.63 → 2.0.0-next.65

package/dist/types/components/breadcrumb/breadcrumb.d.ts

@@ -1,7 +1,7 @@
 interface BreadcrumbItem {
     label: string;
     url?: string;
-    target?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
     home?: boolean;
     active?: boolean;
 }
@@ -12,7 +12,6 @@ interface BreadcrumbItem {
  */
 export declare class Breadcrumb {
     el: HTMLBrBreadcrumbElement;
-    elementInternals: ElementInternals;
     /**
      * Identificador único; gerado automaticamente quando omitido.
      */
@@ -26,6 +25,12 @@ export declare class Breadcrumb {
      * Define valor padrão do breadcrumb 'defaultCrumbs'.
      */
     crumbs: string | BreadcrumbItem[];
+    innerCrumbs: BreadcrumbItem[];
+    private slotElement;
+    private hasLoaded;
+    handleCrumbPropsChange(): void;
+    private normalizeTarget;
+    private registerCrumbItems;
     private defaultCrumbs;
     /**
      * Define o estado oculto ou visível do tooltip.
@@ -34,14 +39,11 @@ export declare class Breadcrumb {
     /**
      * Define o posicionamento do tooltip na tela.
      */
-    tooltipPosition: {
-        x: number;
-        y: number;
-    };
-    /**
-     * Define o texto do tooltip.
-     */
     tooltipText: string;
+    private floatingManager?;
+    private hoveredElement?;
+    private tooltipElement?;
+    private tooltipArrowElement?;
     /**
      * Define o estado isSmallScreen, usado para verificar a largura do container pai e aplicar as mudanças do formato mobile.
      * No formato mobile o breadcrumb apresenta um comportamento específico.
@@ -54,11 +56,11 @@ export declare class Breadcrumb {
     /**
      * Largura interna dos itens do breadcrumb.
      */
-    larguraInterna: number;
+    contentWidth: number;
     /**
      * Largura do container pai do breadcrumb.
      */
-    larguraPai: number;
+    parentWidth: number;
     /**
      * Define o estado do botão 'Folder'.
      * Caso a lista dropdown esteja oculta o ícone no botão será 'folder-plus'.
@@ -67,9 +69,10 @@ export declare class Breadcrumb {
     isFolderOpen: boolean;
     /**
      * Verifica se o texto do link contém mais de 20 caracteres e realiza o truncamento deste caso positivo.
-     * O número de caracteres pode ser configurado na variável 'charactersNumberTruncate'.
+     * O número de caracteres pode ser configurado na variável 'truncateCharactersLimit'.
      */
-    private trunc;
+    private truncateText;
+    private isTruncatedLabel;
     /**
      * Exibe o tooltip e define seu posicionamento, caso o usuário realize o 'mouse over'.
      */
@@ -78,6 +81,8 @@ export declare class Breadcrumb {
      * Esconde o tooltip caso o usuário realize o 'mouse out'.
      */
     private handleMouseOut;
+    private positionTooltip;
+    private cleanupTooltipPosition;
     /**
      * Converte de string para JSON o valor passado na propriedade 'crumbs'.
      * Retorna o valor padrão do Breadcrumbs caso crumbs seja vazio ou inválido
@@ -114,10 +119,11 @@ export declare class Breadcrumb {
     /**
      * Calcula a largura total dos itens do breadcrumb para determinar se precisa de truncamento.
      */
-    private calcularLarguraItens;
+    private calculateItemsWidth;
     /**
      * Executa cálculos de largura após o componente ser carregado.
      */
+    componentWillLoad(): void;
     componentDidLoad(): void;
     /**
      * Renderiza botão Home
@@ -136,7 +142,7 @@ export declare class Breadcrumb {
      */
     private renderMobileActiveItem;
     /**
-     * Renderiza Lista dropdown contendo os itens do Breadcrumb
+     * Renderiza lista dropdown contendo os itens do Breadcrumb
      */
     private renderBreadcrumbList;
     /**

package/dist/types/components/breadcrumb/crumb/crumb.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * ## Design System
+ *
+ * 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/breadcrumb?tab=designer).
+ */
+export declare class Crumb {
+    /**
+     * Rótulo (texto) do crumb.
+     */
+    readonly label: string;
+    /**
+     * URL ou caminho para o qual o usuário será direcionado ao clicar no crumb.
+     */
+    readonly url?: string;
+    /**
+     * Define o alvo do link quando `url` está presente. (ex: _blank, _self).
+     */
+    readonly target?: string;
+    /**
+     * Define se o crumb é o item inicial (Home).
+     */
+    readonly home: boolean;
+    /**
+     * Define se o crumb é a página atual ativa no breadcrumb.
+     */
+    readonly active: boolean;
+    /**
+     * Evento disparado quando as propriedades do crumb mudam.
+     * O componente pai (br-breadcrumb) escuta este evento para se atualizar.
+     */
+    brCrumbPropsChange: EventEmitter<void>;
+    handlePropsChange(): void;
+    render(): any;
+}

package/dist/types/components/modal/modal.d.ts

@@ -31,19 +31,26 @@ export declare class Modal {
      *   controlar manualmente o fechamento.
      */
     autoClose: boolean;
-    /** Seletor CSS para o elemento que deve receber foco quando o modal é aberto. */
+    /**
+     * Seletor CSS do elemento que deve receber foco quando o modal é aberto (ex: `"#meu-elemento"`).
+     */
     readonly initialFocusSelector: string;
     /**
      * Define o tamanho (largura) do modal.
      */
     readonly size: 'xsmall' | 'small' | 'medium' | 'large' | 'auto';
-    /** Se `true`, habilita a rolagem interna do conteúdo do modal. */
+    /**
+     * Se `true`, habilita a rolagem interna do conteúdo do modal.
+     */
     readonly scrollable = false;
     /**
      * Define o alinhamento do conteúdo do rodapé (slot="footer").
      */
     readonly alignFooter: 'start' | 'end' | 'center';
     private isOpeningParentScrim;
+    private triggerElement;
+    private pendingFocus;
+    private static readonly FOCUSABLE_SELECTORS;
     /**
      * Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`).
      */
@@ -58,11 +65,76 @@ export declare class Modal {
      * Se autoClose está ativado, o modal fecha automaticamente após este evento.
      */
     brModalBeforeClose: EventEmitter<void>;
+    /**
+     * Evento emitido após o modal estar completamente aberto e com o foco estabilizado
+     * dentro dele. Complementa `brModalOpen` (que dispara imediatamente ao abrir):
+     * use `brModalOpened` quando precisar interagir com o modal já pronto.
+     */
+    brModalOpened: EventEmitter<void>;
     handleShowChange(newValue: boolean, oldValue: boolean): void;
-    private closeParentScrim;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    componentDidRender(): void;
+    /**
+     * GERENCIAMENTO DE FOCO
+     *
+     * Métodos responsáveis por mover o foco para dentro do modal, estabilizar o
+     * foco em elementos iniciais e localizar elementos nativos focáveis dentro
+     * de web components que utilizam Shadow DOM.
+     */
+    private moveFocusIntoModal;
+    /**
+     * Encontra recursivamente o primeiro elemento nativo focusável dentro de um elemento,
+     * perfurando shadow roots aninhados em qualquer profundidade (ex: br-select → br-input → <input>).
+     *
+     * @returns O elemento nativo encontrado, ou null se nenhum for encontrado.
+     */
+    private findDeepNativeFocusable;
+    /**
+     * Aguarda o elemento aparecer no DOM e estar pronto para receber foco.
+     * Tenta por até 10 vezes com intervalos de 50ms (500ms total).
+     */
+    private waitForElement;
+    /**
+     * TECLADO
+     *
+     * Manipuladores e utilitários relacionados à interação por teclado,
+     * incluindo tratamento de `Escape` para fechar o modal e navegação por
+     * `Tab`/`Shift+Tab` para manter o foco preso (focus trap) dentro do modal.
+     */
+    private handleKeyDown;
+    /**
+     * Implementa o focus trap circular dentro da modal.
+     * Quando Tab é pressionado no último elemento focalizável, o foco vai para o primeiro.
+     * Quando Shift+Tab é pressionado no primeiro, o foco vai para o último.
+     *
+     * Usa `composedPath()[0]` para obter o elemento real com foco, pois web components
+     * com shadow DOM retornam o host via `document.activeElement`, não o elemento nativo interno.
+     *
+     * Usa `findDeepNativeFocusable` no wrap porque `host.focus()` é no-op em web components
+     * sem `delegatesFocus` — focar o elemento nativo mais profundo garante que o wrap aconteça.
+     */
+    private handleTabNavigation;
+    /**
+     * Verifica se `target` é igual a `container` ou está dentro dele,
+     * perfurando shadow roots na subida (getRootNode().host).
+     */
+    private isOrInsideElement;
+    /**
+     * Coleta todos os elementos focalizáveis dentro da modal,
+     * perfurando o shadow DOM: inclui elementos do shadow root (ex: botão fechar)
+     * e dos slots (conteúdo fornecido pelo usuário nos slots header, default, footer e close-button).
+     */
+    private getFocusableElements;
+    /**
+     * INTEGRAÇÃO COM BR-SCRIM
+     *
+     * Métodos para integrar o comportamento do modal com um `br-scrim` pai,
+     * incluindo abertura/fechamento sincronizados e listeners para eventos do
+     * scrim.
+     */
+    private closeParentScrim;
     /**
      * Adiciona listeners para eventos do parent scrim
      */
@@ -83,10 +155,21 @@ export declare class Modal {
      */
     private handleParentScrimClose;
     private openParentScrim;
+    /**
+     * UTILITÁRIOS
+     *
+     * Getters e helpers utilitários usados internamente pelo componente,
+     * como geração de IDs e mapeamento de classes CSS.
+     */
     private get titleId();
     private get contentId();
     private getCssClassMap;
     private handleClose;
+    /**
+     * MÉTODOS PÚBLICOS (API)
+     *
+     * Métodos públicos expostos pela API do componente (`open`, `close`, etc.).
+     */
     /**
      * Método público para abrir o modal
      */

package/dist/types/components/scrim/scrim.d.ts

@@ -91,6 +91,12 @@ export declare class Scrim {
     private previouslyFocusedElement;
     private focusTimeoutId;
     private restoreFocusTimeoutId;
+    /**
+     * Flag que suprime handleGlobalFocus enquanto a modal filha está
+     * gerenciando ativamente sua própria sequência de foco (moveFocusIntoModal).
+     */
+    private isModalFocusing;
+    private modalFocusSuppressId;
     private static readonly FOCUSABLE_SELECTORS;
     handleOpenChange(newValue: boolean): Promise<void>;
     updateStyles(): void;
@@ -104,6 +110,21 @@ export declare class Scrim {
     private addContentEventListener;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Ativa o guard que suprime `handleGlobalFocus` enquanto a modal filha executa
+     * sua sequência assíncrona de foco (`moveFocusIntoModal`).
+     *
+     * O guard é desativado assim que o evento `brModalFocusReady` chega (via
+     * `handleModalFocusReady`). O timeout é apenas um safety net para o caso de
+     * o evento nunca chegar (ex: erro interno na modal).
+     */
+    private suppressFocusGuard;
+    /**
+     * Handler para o evento `brModalFocusReady` emitido pela modal filha.
+     * Desativa o guard imediatamente assim que o foco está estabilizado,
+     * cancelando o timeout de segurança do `suppressFocusGuard`.
+     */
+    private handleModalFocusReady;
     /**
      * Handler para evento brModalOpen emitido por modal filha
      */
@@ -117,7 +138,7 @@ export declare class Scrim {
      */
     private isDirectChild;
     /**
-     * Adiciona listeners para eventos brModalOpen e brModalClose das modais filhas
+     * Adiciona listeners para eventos brModalOpen, brModalClose e brModalFocusReady das modais filhas
      */
     private listenToModalEvents;
     /**
@@ -157,6 +178,13 @@ export declare class Scrim {
     private getFocusableElements;
     private filterVisibleElements;
     private handleKeyDown;
+    /**
+     * Intercepta todos os eventos de teclado globalmente quando o scrim está ativo.
+     *
+     * Usa `composedPath()[0]` para obter o elemento real com foco, mesmo dentro de shadow roots.
+     * `event.target` é retargetado ao cruzar shadow boundaries e não reflete o elemento concreto
+     * quando o foco está dentro do shadow DOM de componentes filhos como `br-modal`.
+     */
     private handleGlobalKeyDown;
     private handleGlobalClick;
     /**
@@ -168,7 +196,9 @@ export declare class Scrim {
     private shouldTrapFocus;
     private wrapFocus;
     /**
-     * Verifica se um elemento está dentro do scrim
+     * Verifica se um elemento está dentro do scrim.
+     * Funciona com shadow DOM: aceita tanto o host (br-modal) quanto elementos
+     * dentro de shadow roots filhos — verifica o host mais próximo via getRootNode.
      */
     private isElementInsideScrim;
     /**

package/dist/types/components/select/select-option/select-option.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * ## Design System
+ *
+ * O `br-select-option` é um subcomponente lógico de `br-select`, usado para
+ * declarar opções de forma declarativa no HTML.
+ *
+ * @slot default - Texto opcional da opção. Usado como fallback para `label`.
+ */
+export declare class SelectOption {
+    /**
+     * Rótulo da opção. Quando omitido, o texto do slot é usado.
+     */
+    label?: string;
+    /**
+     * Valor da opção.
+     */
+    value?: string;
+    /**
+     * Indica se a opção está selecionada.
+     */
+    selected: boolean;
+    /**
+     * Notifica o componente pai sobre mudanças de props ou conteúdo.
+     */
+    brSelectOptionPropsChange: EventEmitter<void>;
+    handlePropsChange(): void;
+    render(): any;
+}

package/dist/types/components/select/select.d.ts

@@ -1,4 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+interface SelectOptionItem {
+    label: string;
+    value: string;
+    selected?: boolean;
+    sourceElement?: BrSelectOptionElement;
+}
+interface BrSelectOptionElement extends HTMLElement {
+    label?: string;
+    value?: string;
+    selected?: boolean;
+}
 /**
  * ## Design System
  *
@@ -11,6 +22,8 @@ export declare class Select {
      */
     el: HTMLBrSelectElement;
     elementInternals: ElementInternals;
+    private slotElement?;
+    private isSyncingOptionElements;
     /**
      * Rótulo que indica o tipo de informação que deve ser selecionada.
      */
@@ -23,6 +36,11 @@ export declare class Select {
      * Habilita o modo múltiplo para selecionar várias opções.
      */
     isMultiple: boolean;
+    /**
+     * Controla se o dropdown permanece aberto após selecionar opções.
+     * Quando `true`, permite seleção sequencial sem reabrir a lista.
+     */
+    keepOpenOnSelect: boolean;
     /**
      * Define as opções disponíveis no componente de seleção.
      * Se uma string for fornecida, ela será convertida internamente para um array via `JSON.parse`. Caso o formato seja inválido, um erro será registrado e as opções serão definidas como um array vazio.
@@ -78,16 +96,8 @@ export declare class Select {
      * Caso não seja fornecido, um ID gerado automaticamente será usado.
      */
     readonly customId: string;
-    parsedOptions: {
-        label: string;
-        value: string;
-        selected?: boolean;
-    }[];
-    filteredOptions: {
-        label: string;
-        value: string;
-        selected?: boolean;
-    }[];
+    parsedOptions: SelectOptionItem[];
+    filteredOptions: SelectOptionItem[];
     inputValue: string;
     searchTerm: string;
     /** Valor selecionado (string para single, string[] para multiple) */
@@ -97,6 +107,7 @@ export declare class Select {
     isIndeterminate: boolean;
     isExpanded: boolean;
     focusedIndex: number;
+    optionElements: BrSelectOptionElement[];
     /**
      * Evento emitido sempre que houver atualização nos itens selecionados.
      * RENOMEADO PARA valueChange para compatibilidade com ngModel.
@@ -113,10 +124,18 @@ export declare class Select {
     closed: EventEmitter<void>;
     synchronizeSelect(): void;
     syncValueFromOutside(newVal: string | string[]): void;
+    handleSelectOptionPropsChange(): void;
     componentWillLoad(): void;
     handleExpandedChange(isExpanded: boolean): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private registerOptionItems;
+    private getOptionElements;
+    private getSourceOptions;
+    private getOptionsFromProp;
+    private getOptionElementLabel;
+    private updateSelectedValueFromParsedOptions;
+    private syncOptionElementsFromParsedOptions;
     /**
      * Fecha a lista suspensa (`dropdown`) do `br-select` quando o usuário clica fora do componente.
      * O listener global é adicionado no `componentDidLoad` e removido no `disconnectedCallback` para evitar vazamentos de memória.
@@ -178,3 +197,4 @@ export declare class Select {
     private handleSearchBlur;
     render(): any;
 }
+export {};

package/dist/types/components/step/step-item/step-item.d.ts

@@ -4,10 +4,8 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  *
  * 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/step?tab=designer).
  *
- * @slot label-area - Slot para conteúdo customizado dentro do botão do item do step.
+ * @slot content-area - Slot para conteúdo customizado dentro do botão do item do step.
  *
- * @part item-container - Parte para o contêiner externo do item do step, usada para estilizar posicionamento e espaçamento via ::part().
- * @part item-content - Parte para o contêiner interno com indicador visual e label, usada para estilizar conteúdo via ::part().
  * @part label - Parte para o contêiner do texto da etapa, usada para estilizar tipografia e cor via ::part().
  *
  */
@@ -31,7 +29,7 @@ export declare class StepItem {
      */
     active: boolean;
     /**
-     *  Propriedade que define se o item Step está com estado desativado..
+     *  Propriedade que define se o item Step está com estado desativado.
      */
     disabled: boolean;
     /**
@@ -64,10 +62,6 @@ export declare class StepItem {
      */
     brDidRender: EventEmitter<void>;
     componentDidRender(): void;
-    /**
-     * Watch que observa o valor da propriedade active, e ao alterar seu valor este método altera o valor do campo de acessibilidade aria-selected
-     */
-    watchItemIsActive(newValue: boolean, oldValue: boolean): void;
     /**
      *
      * Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente
@@ -97,12 +91,7 @@ export declare class StepItem {
      * Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem
      */
     setContent(value: string): Promise<void>;
-    private getStepContainerClassMap;
-    private getStepItemContentClassMap;
-    private getStepItemIndicatorAreaClassMap;
-    private getStepItemLabelAreaClassMap;
-    private getHighlightClass;
-    private getStepItemIndicatorClass;
+    private getAlertClass;
     private highLightAriaLabel;
     private IconsName;
     render(): any;

package/dist/types/components/tab/tab.d.ts

@@ -1,4 +1,16 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Tipo de densidade para o componente Tab, definindo o espaçamento e tamanho dos elementos.
+ */
+type TabDensity = 'small' | 'medium' | 'large';
+/**
+ * Tipo de modo de cor para o componente Tab, definindo o esquema de cores utilizado.
+ */
+type TabColorMode = 'dark';
+/**
+ * Tipo de alinhamento dos itens da tab na barra de navegação.
+ */
+type TabAlignItems = 'start' | 'center' | 'end';
 /**
  * ## Design System
  *
@@ -22,22 +34,28 @@ export declare class Tab {
     /**
      * A propriedade 'density' define a densidade do componente.
      */
-    readonly density: 'small' | 'medium' | 'large';
+    readonly density: TabDensity;
     /**
      * Define se o Tab usará um esquema de cores escuro.
      */
-    readonly colorMode: 'dark';
+    readonly colorMode?: TabColorMode;
     /**
      * Label de acessibilidade para a navegação das tabs
      */
     readonly label: string;
     /**
      * Define o alinhamento horizontal dos itens da tab na barra de navegação.
-     * - 'start': Alinha à esquerda
-     * - 'center': Centraliza
-     * - 'end': Alinha à direita
      */
-    readonly alignItemsTab: 'start' | 'center' | 'end';
+    readonly alignItemsTab: TabAlignItems;
+    /**
+     * Desabilita o scroll automático da área de conteúdo.
+     * Por padrão, o scroll vertical fica apenas na região de conteúdo.
+     */
+    readonly scrollDisabled: boolean;
+    /**
+     * Define a altura máxima da área de conteúdo, ativando o scroll interno quando o conteúdo ultrapassa essa altura.
+     */
+    readonly height?: string;
     /**
      * Lista dos tab items registrados
      */
@@ -57,7 +75,13 @@ export declare class Tab {
         tabId: string;
         tabIndex: number;
     }>;
+    /**
+     * Referência ao elemento de slot para monitorar mudanças nos tab items filhos.
+     */
     private slotElement;
+    /**
+     * Observador de mutação para detectar mudanças nos tab items filhos
+     */
     private mutationObserver;
     /**
      * Observa mudanças no tab ativo para atualizar os estados
@@ -73,6 +97,11 @@ export declare class Tab {
      * propriedades como tabItemTitle, icon, counter ou onlyIcon mudam dinamicamente.
      */
     handleTabItemPropsChange(): void;
+    /**
+     * 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
+     */
     private registerTabItems;
     /**
      * Atualiza o estado ativo de todos os tab items
@@ -83,7 +112,14 @@ export declare class Tab {
      * Manipula o clique em um botão de tab
      */
     private handleTabClick;
+    /**
+     * Manipula a navegação por teclado nos botões de tab para melhorar a acessibilidade
+     */
     private handleTabButtonClick;
+    /**
+     * Manipula o evento de pressionamento de tecla nos botões de tab para melhorar a acessibilidade
+     * @param event Evento de teclado
+     */
     private handleTabButtonKeyDown;
     /**
      * Manipula navegação por teclado (acessibilidade)
@@ -101,7 +137,31 @@ export declare class Tab {
      * Retorna o alinhamento em formato flexbox
      */
     private getAlignItemsStyle;
-    componentDidLoad(): void;
+    /**
+     * 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
+     */
+    private isValidHeight;
+    /**
+     * 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
+     */
+    private getResolvedHeight;
+    /**
+     * 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(): void;
+    /**
+     * Ciclo de vida. Executado quando o componente é removido do DOM.
+     * Desconecta o MutationObserver para evitar vazamentos de memória.
+     */
     disconnectedCallback(): void;
+    /**
+     * Renderiza o componente.
+     * @returns JSX.Element
+     */
     render(): any;
 }
+export {};