@govbr-ds/webcomponents 2.3.0 → 2.4.0

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[];