@govbr-ds/webcomponents 2.2.0 → 2.4.0

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

@@ -1,6 +1,6 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
 import { type FormValidationState } from '../../shared/utils/form';
-import type { InputDensity, InputState, InputToggle, InputType, InputValidationChangeDetail, InputValidator } from './input.types';
+import type { InputActionClickDetail, InputDensity, InputState, InputToggle, InputType, InputValidationChangeDetail, InputValidator } from './input.types';
 /**
  * O componente `br-input` é o controle padrão do GovBR-DS para entrada de dados textuais em linha única. Totalmente integrado à validação nativa de formulários HTML via `ElementInternals` (`formAssociated`), ele suporta múltiplos tipos de entrada, máscaras e formatação.
  *
@@ -255,6 +255,13 @@ export declare class Input {
     valueChange: EventEmitter<string>;
     /** Emitted when the input clear button action is triggered. */
     brClear: EventEmitter<void>;
+    /**
+     * Notifica a ativação do botão do slot `action` por clique ou teclado.
+     * Emitido no host com `detail.originalEvent` contendo o clique original.
+     * Propaga e atravessa Shadow DOM; não é cancelável nem altera o clique nativo.
+     * Não emite para o campo textual, botão de senha, inicialização ou controle desabilitado.
+     */
+    brInputActionClick: EventEmitter<InputActionClickDetail>;
     /**
      * Informa o início e o resultado do validator, inclusive quando ele consulta
      * um serviço remoto. O `detail` contém `validating`, `valid` e `message`;
@@ -362,6 +369,15 @@ export declare class Input {
     private readonly handleSlotChange;
     private syncFormState;
     private nativeValueUpdate;
+    /**
+     * Reproduz a submissão implícita do `<input>` nativo: o campo interno fica no
+     * Shadow DOM e não pertence ao `<form>` do documento. Segue o botão padrão do
+     * formulário (o primeiro com `type="submit"`, inclusive `br-button`): se ele
+     * estiver desabilitado, não há envio. A submissão ocorre depois do despacho da
+     * tecla, para respeitar `preventDefault()` do consumidor e não ativar o elemento
+     * que receber o foco durante o envio.
+     */
+    private handleKeyDown;
     private readonly renderInput;
     /**
      * Renderiza o texto de ajuda do input, considerando se está definido como string ou slot.
@@ -383,6 +399,7 @@ export declare class Input {
      * @returns JSX.Element representando o slot de ícone.
      */
     private renderIconSlot;
+    private handleActionClick;
     /**
      * Renderiza o botão de ação do input, considerando o tipo de input e slots disponíveis.
      * @returns JSX.Element representando o botão de ação.

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

@@ -5,6 +5,10 @@ export type InputDensity = BrDensity;
 export type InputState = BrFeedbackState;
 /** Regra de validação fornecida pelo consumidor do campo. */
 export type InputValidator = (value: string) => string | null | Promise<string | null>;
+/** Clique que ativou o botão do slot `action`, inclusive por teclado. */
+export interface InputActionClickDetail {
+    originalEvent: MouseEvent;
+}
 /** Estado observável de uma validação customizada do campo. */
 export interface InputValidationChangeDetail {
     validating: boolean;

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

@@ -121,7 +121,12 @@ export declare class Item {
      * @deprecated Use `button`.
      */
     isButton: boolean;
-    /** Renderiza o item como botão. Quando informado, tem precedência sobre `isButton`. */
+    /**
+     * Renderiza o item como botão de alternância: o acionamento alterna `selected`, emite
+     * `brItemSelect` e expõe o estado em `aria-pressed`. Para uma ação sem estado (ex.: "Sair"),
+     * use `href` com `navigation-mode="event"` ou um `br-button`.
+     * Quando informado, tem precedência sobre `isButton`.
+     */
     button?: boolean;
     /**
      * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:

package/dist/types/components/magic-button/magic-button.d.ts

@@ -56,9 +56,11 @@ export declare class MagicButton {
      */
     label: string;
     /**
-     * Identificador legado do ícone a ser exibido.
-     * Nomes simples (por exemplo, `question`) são resolvidos pelo registro SVG local.
-     * Para classes CSS ou SVGs personalizados, prefira o slot `icon`.
+     * Ícone como identificador Iconify (ex.: `fa6-solid:star`) ou nome simples (ex.: `question`,
+     * resolvido como `fa6-solid:question` no registro SVG local), renderizado pelo `br-icon`.
+     * Para classes CSS (ex.: Font Awesome) ou SVGs personalizados, use o slot `icon`, a forma preferida.
+     * Uso descontinuado: classes CSS nesta prop (ex.: `fas fa-star`) não são exibidas no Shadow DOM
+     * e geram aviso.
      */
     icon: string;
     /**
@@ -102,6 +104,8 @@ export declare class MagicButton {
      * registro local Font Awesome 6; valores já qualificados continuam intactos.
      */
     private getIconName;
+    /** Fallback do slot `icon`: somente identificadores Iconify; classes CSS geram aviso. */
+    private renderIconFallback;
     /**
      * Renderiza o componente.
      */

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

@@ -86,6 +86,12 @@ export declare class Modal {
      */
     alignFooter: ModalFooterAlign;
     handleShowChange(newValue: boolean, oldValue: boolean): void;
+    /**
+     * Devolve o foco ao elemento que abriu o modal. Sem esse alvo (ex.: modal aberto por
+     * `show` inicial ou foco anterior no body), libera o foco que ainda estiver no conteúdo
+     * sendo ocultado, para que a digitação não continue num campo invisível.
+     */
+    private returnFocusOnClose;
     /**
      * Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`).
      */

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

@@ -42,10 +42,12 @@ import type { PaginationColorMode, PaginationDensity, PaginationPageChangeDetail
  * @part per-page - Parte para o seletor de itens por página na variante contextual.
  * @part per-page-container - Contêiner encaminhado do seletor de itens por página.
  * @part per-page-input - Campo encaminhado do seletor de itens por página.
+ * @part per-page-input-label - Rótulo encaminhado do seletor de itens por página.
  * @part per-page-list - Lista encaminhada do seletor de itens por página.
  * @part go-to - Parte para o seletor de navegação direta na variante contextual.
  * @part go-to-container - Contêiner encaminhado do seletor de navegação direta.
  * @part go-to-input - Campo encaminhado do seletor de navegação direta.
+ * @part go-to-input-label - Rótulo encaminhado do seletor de navegação direta.
  * @part go-to-list - Lista encaminhada do seletor de navegação direta.
  * @part prev-button - Parte para o botão de página anterior, usada para estilização via ::part().
  * @part prev-button-inner - Botão interno encaminhado da página anterior.

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

@@ -1,6 +1,7 @@
 import { type EventEmitter } from '../../../stencil-public-runtime';
 import type { BrDensity } from '../../global.types';
 import type { InputToggle } from '../../input/input.types';
+import type { SelectComboboxState } from '../select.types';
 /**
  * Subcomponente especializado de `br-select` responsável pelo campo de acionamento, entrada de texto e controle de expansão do popup.
  *
@@ -96,7 +97,8 @@ export declare class SelectInput {
      */
     filterable: boolean;
     /**
-     * Exibe o ícone de busca dentro do campo.
+     * Exibe a lupa mesmo quando o campo não é filtrável.
+     * Quando filterable é true, a lupa é exibida automaticamente.
      *
      * @type {boolean | undefined}
      */
@@ -140,6 +142,12 @@ export declare class SelectInput {
     private flipped;
     private inputElement?;
     componentDidRender(): void;
+    private comboboxState?;
+    private accessibleList?;
+    private accessibleStatus?;
+    private accessibleDescription?;
+    syncCombobox(state: SelectComboboxState): Promise<void>;
+    private applyComboboxState;
     /**
      * Atualiza o ícone para o estado visual de lista aberta.
      *
@@ -162,7 +170,6 @@ export declare class SelectInput {
     private handleFocus;
     private handleInput;
     private handleClick;
-    handleActionClick(): void;
     private getCssClassMap;
     private renderSearchIcon;
     private renderDropdownIcon;

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

@@ -23,10 +23,10 @@ import type { SelectOptionData } from '../select.types';
 export declare class SelectList {
     private static readonly SELECT_ALL_LABEL;
     private static readonly DESELECT_ALL_LABEL;
-    private static readonly SELECT_ALL_VALUE;
     el: HTMLBrSelectListElement;
     /**
-     * Define a densidade visual da lista, das opções e do indicador de carregamento.
+     * Define a densidade visual da lista, das opções regulares e do indicador de carregamento.
+     * A opção sintética de selecionar todos permanece com densidade `small`.
      * Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.
      *
      * @default 'medium'
@@ -77,6 +77,11 @@ export declare class SelectList {
      * @default 0
      */
     overscan: number;
+    /**
+     * Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas.
+     * @default false
+     */
+    hideDividers: boolean;
     /**
      * Rótulo apresentado para a ação de selecionar todos no modo múltiplo.
      *
@@ -107,6 +112,7 @@ export declare class SelectList {
     isMultiple: boolean;
     scrollTop: number;
     measuredItemHeight: number | null;
+    measuredSelectAllItemHeight: number | null;
     /**
      * O `br-select` fornece a opção sintética de selecionar todos antes de
      * conseguir chamar `setMultiple()` no elemento da lista. Usar esse
@@ -116,6 +122,8 @@ export declare class SelectList {
     private get effectiveMultiple();
     private listElement?;
     private measurementFrame;
+    private measurementInProgress;
+    private measurementRequested;
     private filteredOptionsCache;
     private filteredOptionsCacheKey;
     private filteredOptionsCacheSource?;
@@ -193,6 +201,8 @@ export declare class SelectList {
      * @returns `true` quando a opção foi encontrada para foco.
      */
     focusOption(index: number): Promise<boolean>;
+    /** Torna o item ativo visível sem retirar o foco do campo. */
+    revealOption(index: number): Promise<boolean>;
     /**
      * Aciona a seleção programática de uma opção específica.
      *
@@ -227,6 +237,8 @@ export declare class SelectList {
     private handleScroll;
     private getViewportHeight;
     private getRowHeight;
+    private getRowsHeight;
+    private getRowTop;
     private getVisibleRange;
     private clampScrollPosition;
     private scheduleMeasureItemHeight;

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

@@ -121,6 +121,7 @@ export declare class SelectOption {
      */
     setSelectedState(selected?: boolean): Promise<void>;
     private handleActivation;
+    private get isControlledBySingleSelect();
     private handleKeyDown;
     private emitStateChange;
     private get isControlledBySelect();

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

@@ -15,6 +15,20 @@ import type { SelectOptionData, SelectOptionStateChange, SelectSearchDetail, Sel
  * - **Integração com formulários:** É associado a formulários nativos (`formAssociated`), comunicando seu valor, estado de validação (válido/inválido), mensagens de erro contextuais e eventos padrão (`change`, `input`).
  * - **Navegação acessível:** Suporta controle total via teclado (setas para cima/baixo, Enter, Escape, Home, End), foco gerenciado e anúncios para leitores de tela.
  *
+ * ### Navegação por teclado
+ *
+ * O foco permanece no campo `combobox` enquanto a lista está aberta; a opção em destaque é comunicada por `aria-activedescendant`.
+ * Ao receber foco, o campo abre a lista sem alterar a seleção atual.
+ *
+ * - **ArrowDown / ArrowUp:** abre a lista e destaca a próxima opção na direção pressionada; com a lista aberta, move o destaque sem mover o foco físico.
+ * - **Home / End:** em modo não filtrável, destaca a primeira ou a última opção habilitada; em modo filtrável, preserva o movimento do cursor no texto.
+ * - **Enter:** abre a lista quando fechada e confirma a opção destacada quando aberta.
+ * - **Espaço:** confirma a opção destacada em modo não filtrável; em modo filtrável, insere um espaço no campo de busca.
+ * - **Escape:** fecha a lista, remove o destaque e devolve o foco ao campo.
+ * - **Tab:** fecha a lista e deixa o navegador mover o foco para o próximo controle, sem alterar a seleção implicitamente.
+ * - **Busca incremental:** em modo não filtrável, caracteres consecutivos destacam a primeira opção habilitada correspondente; em modo filtrável, a digitação filtra a lista.
+ * - **Alt+ArrowDown / Alt+ArrowUp:** abre ou fecha a lista sem alterar a seleção.
+ *
  * ### Quando utilizar
  *
  * - **Utilize quando:**
@@ -141,6 +155,7 @@ export declare class Select {
     /**
      * Define a densidade visual compartilhada pelo campo e pela lista de opções.
      * Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.
+     * A opção sintética de selecionar todos permanece com densidade `small`.
      *
      * @default 'medium'
      */
@@ -200,6 +215,11 @@ export declare class Select {
      * @default 1
      */
     overscan: number;
+    /**
+     * Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas.
+     * @default false
+     */
+    hideDividers: boolean;
     private get effectiveVisibleItems();
     private get effectiveDensity();
     private get effectiveItemHeight();
@@ -388,6 +408,8 @@ export declare class Select {
     private selectInputElement;
     private selectListElement;
     private shouldRestoreSelectedOptionOnOpen;
+    private isSelectInputPointerDown;
+    private skipSelectInputClickToggle;
     private pendingOptions;
     private slotElement;
     private handleSlotChange;
@@ -396,7 +418,15 @@ export declare class Select {
     private isStateChangeReady;
     private isValueChangeReady;
     private readonly listboxId;
+    private checkingValidity;
+    private showValidationErrors;
+    private validationErrorMessage;
     private activeOptionIndex;
+    /**
+     * Oculta o indicador visual da opção ativa após interação por ponteiro, como `:focus-visible`.
+     * O índice ativo e o `aria-activedescendant` são preservados; o teclado volta a exibi-lo.
+     */
+    private isActiveIndicatorHidden;
     private displayValue?;
     private searchTerm;
     private formDisabled;
@@ -416,8 +446,9 @@ export declare class Select {
     private hasImperativeOptions;
     private remoteSelectedOptions;
     private selectionInitialized;
+    private typeAhead;
+    private lastTypeAheadTime;
     private selectedValues;
-    private suppressFocusOpen;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
@@ -443,11 +474,14 @@ export declare class Select {
     private syncOpenState;
     private attachBlockingSurfaceListener;
     private detachBlockingSurfaceListener;
+    handleSelectFocusOut(event: FocusEvent): void;
+    handleSelectInvalid(event: Event): void;
     handleSelectInputFocus(): void;
+    handleSelectPointerDown(event: PointerEvent): void;
     handleSelectInputValueChange(event: CustomEvent<string>): void;
     handleSelectInputActionClick(): void;
     handleSelectInputClick(): void;
-    handleSelectOptionStateChange(event: CustomEvent<SelectOptionStateChange>): void;
+    handleSelectOptionStateChange(event: CustomEvent<SelectOptionStateChange>, restoreFocus?: boolean): void;
     /**
      * Recalcula a coleção quando uma opção projetada muda por atribuição direta
      * de `selected`, `disabled`, `label`, `group` ou `value`. A lista virtualizada em
@@ -573,15 +607,21 @@ export declare class Select {
      *
      * @returns O id da opção ativa ou `undefined` quando a lista está fechada.
      */
-    private getActiveDescendant;
+    private syncComboboxAccessibility;
+    /**
+     * Indica se o clique atual foi o mesmo que deu foco ao campo e abriu a lista,
+     * limpando o estado do ponteiro. Esse clique não deve alternar a lista de novo.
+     */
+    private consumeFocusOpenClick;
     private toggleOpenFromPointer;
     private openListAndRestorePointerFocus;
     private scrollFirstSelectedOptionToTop;
     private openAndFocusBoundary;
+    private focusOptionByTypedCharacters;
     /**
-     * Define qual opção deve receber foco ao abrir o select pelo teclado.
+     * Define qual opção deve receber foco ao abrir ou iniciar a navegação pelo teclado.
      *
-     * @param direction Direção inicial da navegação. `1` abre do topo para baixo e `-1` do fim para cima.
+     * @param direction Direção inicial da navegação. `1` avança e `-1` recua.
      */
     private focusInitialOption;
     private moveActiveOption;
@@ -595,13 +635,14 @@ export declare class Select {
      * Encaminha o foco lógico para uma opção específica da lista interna.
      *
      * @param index Índice da opção que deve receber foco.
+     * @param scrollToTop Posiciona a opção no topo da viewport quando verdadeiro.
      */
     private focusOptionByIndex;
     /**
      * Seleciona a opção atualmente ativa sem duplicar a lógica de seleção da lista.
      *
      * @remarks
-     * Em modo simples, a opção ativa é sempre marcada. Em modo múltiplo, a seleção é alternada.
+     * Em modo simples, confirma a opção ativa; no múltiplo, alterna sua seleção.
      */
     private selectFocusedOption;
     private syncActiveOptionIndex;
@@ -633,7 +674,6 @@ export declare class Select {
      * os filhos atuais do host.
      */
     private getCurrentOptions;
-    private normalizeSearchText;
     private getNavigableOptions;
     private clearSearch;
     private getEventPath;

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

@@ -43,6 +43,7 @@ export type SelectSearchDetail = {
     query: string;
 };
 export type SelectListController = {
+    revealOption?: (index: number) => Promise<boolean>;
     focusOption?: (index: number) => Promise<boolean>;
     scrollOptionToTop?: (index: number) => Promise<boolean>;
     scrollFirstSelectedOptionToTop?: () => Promise<boolean>;
@@ -53,3 +54,14 @@ export type SelectListController = {
 export type EventWithLegacyPath = Event & {
     path?: EventTarget[];
 };
+export type SelectComboboxState = {
+    options: SelectOptionData[];
+    activeIndex: number;
+    expanded: boolean;
+    multiple: boolean;
+    label: string;
+    loading: boolean;
+    required: boolean;
+    invalid: boolean;
+    errorMessage: string;
+};

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

@@ -1,3 +1,5 @@
+import type { SelectOptionData } from './select.types';
+export declare const SELECT_ALL_OPTION_VALUE = "__select_all__";
 export type SelectionTransitionInput = {
     currentValues: string[];
     multiple: boolean;
@@ -11,3 +13,4 @@ export type SelectionTransition = {
 };
 export declare function transitionSelection({ currentValues, multiple, value, selected, selectableValues, }: SelectionTransitionInput): SelectionTransition;
 export declare function transitionAllSelection(currentValues: string[], selected: boolean, selectableValues: string[]): SelectionTransition;
+export declare function filterSelectOptions(options: SelectOptionData[], term: string, selectAllLabel: string, unselectAllLabel: string): SelectOptionData[];

package/dist/types/components/sign-in/sign-in.d.ts

@@ -22,7 +22,7 @@ import type { SignInEmphasis, SignInShape } from './sign-in.types';
  *
  * O `br-sign-in` é um botão de autenticação estilizado com a marca oficial do Governo Federal, recebendo propriedades de rótulo e variantes institucionais.
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/sign-in?tab=designer).
+ * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/signin?tab=designer).
  *
 
  * @category Identidade, Ações, Formulários
@@ -49,7 +49,8 @@ export declare class SignIn {
      */
     customId: string;
     /**
-     * Define se o sign-in usará um esquema de cores escuro.
+     * Define se o sign-in usará um esquema de cores escuro, para fundos escuros.
+     * Quando omitido, ou com valor diferente de `dark`, usa o esquema claro.
      */
     colorMode: 'dark';
     /**

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

@@ -40,8 +40,12 @@ export declare class TabItem {
     /** Texto canônico do item. Quando informado, tem precedência sobre `tabItemTitle`. */
     label?: string;
     /**
-     * Define o ícone do item de tab usando classes CSS do Font Awesome 5, como `fas fa-bell`.
-     * O formato Iconify é aceito apenas para compatibilidade legada e não deve ser usado em novos códigos.
+     * Ícone da aba como identificador Iconify (ex.: `fa6-solid:bell`), renderizado em SVG pelo `br-icon`.
+     * Para ícones por classe CSS (ex.: Font Awesome), use o slot `icon-{id}` do `br-tab`, a forma
+     * preferida: `<i slot="icon-avisos" class="fas fa-bell" aria-hidden="true"></i>`.
+     * O slot tem precedência sobre esta prop.
+     * Uso descontinuado: classes CSS nesta prop (ex.: `fas fa-bell`) não são exibidas no Shadow DOM,
+     * geram aviso e devem migrar para o slot `icon-{id}`. Identificadores Iconify continuam suportados.
      */
     icon: string;
     /**

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

@@ -37,6 +37,7 @@ import type { TabAlignItems, TabColorMode, TabDensity } from './tab.types';
  * @category Navegação, Seleção, Conteúdo
  * @status stable
  * @slot default - Slot para inserir os itens das abas (br-tab-item)
+ * @slot icon-{id} - Ícone da aba cujo `br-tab-item` tem o `id` informado (ex.: `<i slot="icon-avisos" class="fas fa-bell" aria-hidden="true"></i>`). Forma preferida para ícones por classe CSS, como Font Awesome: o elemento fica em light DOM e recebe os estilos globais da página. Tem precedência sobre a prop `icon` do 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.
@@ -192,7 +193,13 @@ export declare class Tab {
      * Retorna o mapeamento de classes CSS para cada item de navegação
      */
     private getTabItemCssClassMap;
+    private hasSlottedIcon;
+    /**
+     * Ícone da aba: o slot `icon-{id}` tem precedência; a prop `icon` do item é o fallback e
+     * aceita identificadores Iconify. Classes CSS na prop não funcionam no Shadow DOM e são ignoradas.
+     */
     private renderTabIcon;
+    private handleIconSlotChange;
     /**
      * Retorna o alinhamento em formato flexbox
      */