@govbr-ds/webcomponents 2.0.0-next.34 → 2.0.0-next.35

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

@@ -19,9 +19,26 @@ export declare class Select {
      */
     isMultiple: boolean;
     /**
-     * JSON contendo as opções do select.
+     * Define as opções disponíveis no componente de seleção.
+     * Pode ser fornecida como:
+     * - Uma **string** contendo um JSON válido que será analisado em um array de objetos. Exemplo: `'[{"label": "Opção 1", "value": "1"}]'.
+     * - Um **array de objetos**, onde cada objeto representa uma opção com as propriedades:
+     *   - `label`: O texto exibido para o usuário (obrigatório).
+     *   - `value`: O valor associado à opção (obrigatório).
+     *   - `selected`: Um boolean opcional que indica se a opção está pré-selecionada (padrão: `false`).
+     * 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.
+     * Exemplo de uso:
+     * ```typescript
+     * options='[{"label": "Sim", "value": "1"}, {"label": "Não", "value": "0"}]'
+     * // ou
+     * options=[{ label: "Sim", value: "1" }, { label: "Não", value: "0" }]
+     * ```
      */
-    options: string;
+    options: string | {
+        label: string;
+        value: string;
+        selected?: boolean;
+    }[];
     /**
      * Rótulo para selecionar todas as opções.
      */
@@ -46,7 +63,7 @@ export declare class Select {
     parsedOptions: {
         label: string;
         value: string;
-        selected: boolean;
+        selected?: boolean;
     }[];
     inputValue: string;
     isAllSelected: boolean;
@@ -60,7 +77,16 @@ export declare class Select {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    private sanitizeOptions;
+    /**
+     * 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.
+     * Se a lista estiver aberta (`this.isExpanded`) e o clique ocorrer fora (`!this.el.contains(target)`), ela é fechada.
+     * A reatividade do StencilJS garante a atualização automática da interface.
+     * A arrow function (`=>`) mantém o contexto correto de `this` ao ser usada como callback.
+     *
+     * @param {MouseEvent} event O evento de clique.
+     * @returns {void}
+     */
     private readonly handleClickOutside;
     private handleKeydownOnInput;
     private handleKeydownOnList;

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

@@ -0,0 +1,103 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+ *
+ * @slot default - Slot que abriga o componente step-item. Este slot tem a particularidade de aceitar somente o componente step-item em sua composição. Caso outro elemento ou componente seja incluído dentro dele, o componente Step não será renderizado, e uma mensagem de erro será exibida no console.
+ */
+export declare class Step {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrStepElement;
+    elementInternals: ElementInternals;
+    /**
+     * propriedade responsável por definir a orientação do componente Step
+     */
+    layout: 'horizontal' | 'vertical';
+    /**
+     *
+     * define o passo que começará destacado
+     */
+    initialStep: string;
+    /**
+     *
+     * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem
+     */
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     *
+     * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem
+     */
+    contentType: 'default' | 'br-icon' | 'no-content' | 'slotted';
+    /**
+     *
+     * Propriedade que define o tipo de comportamento que o componente Step deverá seguir
+     */
+    mode: 'controller' | 'step';
+    /**
+     *
+     * Propriedade que define o tipo de progressão de etapas que o step vai executar
+     */
+    progressionType: 'linear' | 'nonlinear';
+    activeStep: number;
+    stepItems: Element[];
+    /**
+     * Emite um evento após o componente ter sido carregado pela primeira vez.
+     * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+     */
+    brDidLoad: EventEmitter<void>;
+    componentDidLoad(): void;
+    /**
+     * Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a preparação de dados ou inicializações necessárias.
+     * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdwillLoad) para mais detalhes.
+     */
+    brWilLoad: EventEmitter<void>;
+    componentWillLoad(): void;
+    /**
+     * Emite um evento para indicar se o componente deve ser atualizado ou não.
+     * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.
+     */
+    brShouldUpdate: EventEmitter<void>;
+    componentShouldUpdate(newValue: any, oldValue: any, stateName: any): void;
+    /**
+     * listener para ouvir o evento de click no componente step
+     * Através desse listener o componente define qual será o proximo passo do step que terá o estado ativo
+     */
+    handleClick(event: any): void;
+    private getStepItemsElements;
+    private setStepItemsLabelPosition;
+    private setStepItemsDefaultContent;
+    private setStepItemsContentType;
+    private setStepItemsMode;
+    private getStepItemPosition;
+    private configureTimeLine;
+    private configureLinearProgression;
+    /**
+     *
+     * Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep
+     */
+    ProceedToNextStep(): Promise<void>;
+    /**
+     *
+     * Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep
+     */
+    BackToPreviousStep(): Promise<void>;
+    /**
+     *
+     * Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo.
+     */
+    StepValidation(validationStatus: 'success' | 'info' | 'danger' | 'warning'): Promise<void>;
+    /**
+     *
+     * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.
+     */
+    GetActiveStep(): Promise<number>;
+    private getCssClassMap;
+    private AriaObjectContent;
+    private getAreaLabel;
+    render(): any;
+}

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

@@ -0,0 +1,102 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+ *
+ * @slot nomeado label-area: insere o conteúdo customizado dentro do botão que compõe o componente.
+ */
+export declare class StepItem {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrStepItemElement;
+    elementInternals: ElementInternals;
+    /**
+     *  Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.
+     */
+    label: string;
+    /**
+     *  Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning".
+     */
+    highlight?: 'success' | 'info' | 'danger' | 'warning';
+    /**
+     *  Propriedade que define se o item Step está com estado ativo.
+     */
+    active: boolean;
+    /**
+     *  Propriedade que define se o item Step está com estado desativado..
+     */
+    disabled: boolean;
+    /**
+     *  Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.
+     */
+    brIconName?: string;
+    /**
+     *  Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
+     */
+    brIconAria: string;
+    showTimeLine: boolean;
+    stepItemPositionStatus: 'first' | 'middle' | 'last';
+    stepLayout: 'horizontal' | 'vertical';
+    labelPosition: 'top' | 'right' | 'bottom' | 'left';
+    contentType: 'default' | 'br-icon' | 'no-content' | 'slotted';
+    mode: 'controller' | 'step';
+    content: string;
+    ariaLabelContent: string;
+    /**
+     * Emite um evento após o componente ter sido carregado pela primeira vez.
+     * Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+     */
+    brWillRender: EventEmitter<void>;
+    componentWillRender(): void;
+    /**
+     * Emite um evento após o componente ter sido carregado pela primeira vez.
+     * Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+     */
+    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
+     */
+    setStepItemPositionStatus(value: 'first' | 'middle' | 'last'): Promise<void>;
+    /**
+     * Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.
+     */
+    handleShowTimeLine(value: boolean, layout: any): Promise<void>;
+    /**
+     *
+     * Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado
+     */
+    setLabelPosition(value: 'top' | 'right' | 'bottom' | 'left'): Promise<void>;
+    /**
+     *
+     * Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem
+     */
+    setContentType(value: 'default' | 'br-icon' | 'no-content' | 'slotted'): Promise<void>;
+    /**
+     *
+     * Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.
+     */
+    setMode(value: 'controller' | 'step'): Promise<void>;
+    /**
+     *
+     * 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 highLightAriaLabel;
+    private IconsName;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -629,9 +629,14 @@ export namespace Components {
          */
         "label": string;
         /**
-          * JSON contendo as opções do select.
+          * Define as opções disponíveis no componente de seleção. Pode ser fornecida como: - Uma **string** contendo um JSON válido que será analisado em um array de objetos. Exemplo: `'[{"label": "Opção 1", "value": "1"}]'. - Um **array de objetos**, onde cada objeto representa uma opção com as propriedades:   - `label`: O texto exibido para o usuário (obrigatório).   - `value`: O valor associado à opção (obrigatório).   - `selected`: Um boolean opcional que indica se a opção está pré-selecionada (padrão: `false`). 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. Exemplo de uso: ```typescript options='[{"label": "Sim", "value": "1"}, {"label": "Não", "value": "0"}]' // ou options=[{ label: "Sim", value: "1" }, { label: "Não", value: "0" }] ```
          */
-        "options": string;
+        "options": | string
+    | {
+        label: string
+        value: string
+        selected?: boolean
+      }[];
         /**
           * Texto auxiliar exibido antes de uma seleção.
          */
@@ -653,6 +658,104 @@ export namespace Components {
          */
         "unselectAllLabel": string;
     }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+     */
+    interface BrStep {
+        /**
+          * Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep
+         */
+        "BackToPreviousStep": () => Promise<void>;
+        /**
+          * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.
+         */
+        "GetActiveStep": () => Promise<number>;
+        /**
+          * Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep
+         */
+        "ProceedToNextStep": () => Promise<void>;
+        /**
+          * Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo.
+         */
+        "StepValidation": (validationStatus: "success" | "info" | "danger" | "warning") => Promise<void>;
+        /**
+          * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem
+         */
+        "contentType": 'default' | 'br-icon' | 'no-content' | 'slotted';
+        /**
+          * define o passo que começará destacado
+         */
+        "initialStep": string;
+        /**
+          * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem
+         */
+        "labelPosition"?: 'top' | 'right' | 'bottom' | 'left';
+        /**
+          * propriedade responsável por definir a orientação do componente Step
+         */
+        "layout": 'horizontal' | 'vertical';
+        /**
+          * Propriedade que define o tipo de comportamento que o componente Step deverá seguir
+         */
+        "mode": 'controller' | 'step';
+        /**
+          * Propriedade que define o tipo de progressão de etapas que o step vai executar
+         */
+        "progressionType": 'linear' | 'nonlinear';
+    }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+     */
+    interface BrStepItem {
+        /**
+          * Propriedade que define se o item Step está com estado ativo.
+         */
+        "active": boolean;
+        /**
+          * Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
+         */
+        "brIconAria": string;
+        /**
+          * Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.
+         */
+        "brIconName"?: string;
+        /**
+          * Propriedade que define se o item Step está com estado desativado..
+         */
+        "disabled": boolean;
+        /**
+          * Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.
+         */
+        "handleShowTimeLine": (value: boolean, layout: any) => Promise<void>;
+        /**
+          * Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning".
+         */
+        "highlight"?: 'success' | 'info' | 'danger' | 'warning';
+        /**
+          * Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.
+         */
+        "label": string;
+        /**
+          * Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem
+         */
+        "setContent": (value: string) => Promise<void>;
+        /**
+          * Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem
+         */
+        "setContentType": (value: "default" | "br-icon" | "no-content" | "slotted") => Promise<void>;
+        /**
+          * Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado
+         */
+        "setLabelPosition": (value: "top" | "right" | "bottom" | "left") => Promise<void>;
+        /**
+          * Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.
+         */
+        "setMode": (value: "controller" | "step") => Promise<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
+         */
+        "setStepItemPositionStatus": (value: "first" | "middle" | "last") => Promise<void>;
+    }
     /**
      * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/switch?tab=designer).
      */
@@ -868,6 +971,14 @@ export interface BrSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBrSelectElement;
 }
+export interface BrStepCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBrStepElement;
+}
+export interface BrStepItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBrStepItemElement;
+}
 export interface BrSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBrSwitchElement;
@@ -1118,6 +1229,49 @@ declare global {
         prototype: HTMLBrSelectElement;
         new (): HTMLBrSelectElement;
     };
+    interface HTMLBrStepElementEventMap {
+        "brDidLoad": void;
+        "brWilLoad": void;
+        "brShouldUpdate": void;
+    }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+     */
+    interface HTMLBrStepElement extends Components.BrStep, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBrStepElementEventMap>(type: K, listener: (this: HTMLBrStepElement, ev: BrStepCustomEvent<HTMLBrStepElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBrStepElementEventMap>(type: K, listener: (this: HTMLBrStepElement, ev: BrStepCustomEvent<HTMLBrStepElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBrStepElement: {
+        prototype: HTMLBrStepElement;
+        new (): HTMLBrStepElement;
+    };
+    interface HTMLBrStepItemElementEventMap {
+        "brWillRender": void;
+        "brDidRender": void;
+    }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+     */
+    interface HTMLBrStepItemElement extends Components.BrStepItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBrStepItemElementEventMap>(type: K, listener: (this: HTMLBrStepItemElement, ev: BrStepItemCustomEvent<HTMLBrStepItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBrStepItemElementEventMap>(type: K, listener: (this: HTMLBrStepItemElement, ev: BrStepItemCustomEvent<HTMLBrStepItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBrStepItemElement: {
+        prototype: HTMLBrStepItemElement;
+        new (): HTMLBrStepItemElement;
+    };
     interface HTMLBrSwitchElementEventMap {
         "checkedChange": boolean;
     }
@@ -1201,6 +1355,8 @@ declare global {
         "br-message": HTMLBrMessageElement;
         "br-radio": HTMLBrRadioElement;
         "br-select": HTMLBrSelectElement;
+        "br-step": HTMLBrStepElement;
+        "br-step-item": HTMLBrStepItemElement;
         "br-switch": HTMLBrSwitchElement;
         "br-tag": HTMLBrTagElement;
         "br-textarea": HTMLBrTextareaElement;
@@ -1844,9 +2000,14 @@ declare namespace LocalJSX {
          */
         "onBrDidSelectChange"?: (event: BrSelectCustomEvent<any>) => void;
         /**
-          * JSON contendo as opções do select.
+          * Define as opções disponíveis no componente de seleção. Pode ser fornecida como: - Uma **string** contendo um JSON válido que será analisado em um array de objetos. Exemplo: `'[{"label": "Opção 1", "value": "1"}]'. - Um **array de objetos**, onde cada objeto representa uma opção com as propriedades:   - `label`: O texto exibido para o usuário (obrigatório).   - `value`: O valor associado à opção (obrigatório).   - `selected`: Um boolean opcional que indica se a opção está pré-selecionada (padrão: `false`). 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. Exemplo de uso: ```typescript options='[{"label": "Sim", "value": "1"}, {"label": "Não", "value": "0"}]' // ou options=[{ label: "Sim", value: "1" }, { label: "Não", value: "0" }] ```
          */
-        "options"?: string;
+        "options"?: | string
+    | {
+        label: string
+        value: string
+        selected?: boolean
+      }[];
         /**
           * Texto auxiliar exibido antes de uma seleção.
          */
@@ -1864,6 +2025,84 @@ declare namespace LocalJSX {
          */
         "unselectAllLabel"?: string;
     }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+     */
+    interface BrStep {
+        /**
+          * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem
+         */
+        "contentType"?: 'default' | 'br-icon' | 'no-content' | 'slotted';
+        /**
+          * define o passo que começará destacado
+         */
+        "initialStep"?: string;
+        /**
+          * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem
+         */
+        "labelPosition"?: 'top' | 'right' | 'bottom' | 'left';
+        /**
+          * propriedade responsável por definir a orientação do componente Step
+         */
+        "layout"?: 'horizontal' | 'vertical';
+        /**
+          * Propriedade que define o tipo de comportamento que o componente Step deverá seguir
+         */
+        "mode"?: 'controller' | 'step';
+        /**
+          * Emite um evento após o componente ter sido carregado pela primeira vez. Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+         */
+        "onBrDidLoad"?: (event: BrStepCustomEvent<void>) => void;
+        /**
+          * Emite um evento para indicar se o componente deve ser atualizado ou não. Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.
+         */
+        "onBrShouldUpdate"?: (event: BrStepCustomEvent<void>) => void;
+        /**
+          * Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a preparação de dados ou inicializações necessárias. Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdwillLoad) para mais detalhes.
+         */
+        "onBrWilLoad"?: (event: BrStepCustomEvent<void>) => void;
+        /**
+          * Propriedade que define o tipo de progressão de etapas que o step vai executar
+         */
+        "progressionType"?: 'linear' | 'nonlinear';
+    }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+     */
+    interface BrStepItem {
+        /**
+          * Propriedade que define se o item Step está com estado ativo.
+         */
+        "active"?: boolean;
+        /**
+          * Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
+         */
+        "brIconAria"?: string;
+        /**
+          * Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.
+         */
+        "brIconName"?: string;
+        /**
+          * Propriedade que define se o item Step está com estado desativado..
+         */
+        "disabled"?: boolean;
+        /**
+          * Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning".
+         */
+        "highlight"?: 'success' | 'info' | 'danger' | 'warning';
+        /**
+          * Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.
+         */
+        "label"?: string;
+        /**
+          * Emite um evento após o componente ter sido carregado pela primeira vez. Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+         */
+        "onBrDidRender"?: (event: BrStepItemCustomEvent<void>) => void;
+        /**
+          * Emite um evento após o componente ter sido carregado pela primeira vez. Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+         */
+        "onBrWillRender"?: (event: BrStepItemCustomEvent<void>) => void;
+    }
     /**
      * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/switch?tab=designer).
      */
@@ -2066,6 +2305,8 @@ declare namespace LocalJSX {
         "br-message": BrMessage;
         "br-radio": BrRadio;
         "br-select": BrSelect;
+        "br-step": BrStep;
+        "br-step-item": BrStepItem;
         "br-switch": BrSwitch;
         "br-tag": BrTag;
         "br-textarea": BrTextarea;
@@ -2142,6 +2383,14 @@ declare module "@stencil/core" {
              */
             "br-radio": LocalJSX.BrRadio & JSXBase.HTMLAttributes<HTMLBrRadioElement>;
             "br-select": LocalJSX.BrSelect & JSXBase.HTMLAttributes<HTMLBrSelectElement>;
+            /**
+             * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+             */
+            "br-step": LocalJSX.BrStep & JSXBase.HTMLAttributes<HTMLBrStepElement>;
+            /**
+             * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+             */
+            "br-step-item": LocalJSX.BrStepItem & JSXBase.HTMLAttributes<HTMLBrStepItemElement>;
             /**
              * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/switch?tab=designer).
              */

package/dist/webcomponents/br-avatar.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"br-avatar.entry.esm.js","sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: block;\n\n  /**\n   * @prop --border-radius: Border radius of the avatar and inner image\n   */\n  border-radius: var(--border-radius);\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  /**\n   * Executa validações iniciais quando o componente é carregado\n   */\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n  }\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() readonly alt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Largura do ícone no avatar do tipo icônico\n   * */\n  @Prop() readonly iconWidth: string\n\n  /**\n   * Altura do ícone no avatar do tipo icônico\n   */\n  @Prop() readonly iconHeight: string\n\n  /**\n   * Ajuste para a margem de cima do ícone no avatar do tipo icônico\n   */\n  @Prop() readonly iconMarginTop: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  @State() private hasError = false\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  private readonly iconSizes = {\n    small: { height: '32px', width: '40px' },\n    medium: { height: '80px', width: '88px' },\n    large: { height: '128px', width: '136px' },\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  private renderAvatar() {\n    if (this.text?.trim().length > 0) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    } else if (this.src?.trim().length > 0 && !this.hasError) {\n      return (\n        <span class=\"content\" title={this.alt || this.text}>\n          <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n        </span>\n      )\n    } else {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight?.length > 0 ? this.iconHeight : this.iconSizes[this.density]?.height}\n            width={this.iconWidth?.length > 0 ? this.iconWidth : this.iconSizes[this.density]?.width}\n            aria-hidden=\"true\"\n            style={{\n              'margin-top': this.iconMarginTop?.length > 0 ? this.iconMarginTop : this.iconMarginTops[this.density],\n            }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} aria-disabled={this.disabled}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"br-avatar.entry.esm.js","sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: block;\n\n  /**\n   * @prop --border-radius: Border radius of the avatar and inner image\n   */\n  border-radius: var(--border-radius);\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  /**\n   * Executa validações iniciais quando o componente é carregado\n   */\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n  }\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() readonly alt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Largura do ícone no avatar do tipo icônico\n   * */\n  @Prop() readonly iconWidth: string\n\n  /**\n   * Altura do ícone no avatar do tipo icônico\n   */\n  @Prop() readonly iconHeight: string\n\n  /**\n   * Ajuste para a margem de cima do ícone no avatar do tipo icônico\n   */\n  @Prop() readonly iconMarginTop: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  @State() private hasError = false\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  private readonly iconSizes = {\n    small: { height: '32px', width: '40px' },\n    medium: { height: '80px', width: '88px' },\n    large: { height: '128px', width: '136px' },\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  private renderAvatar() {\n    if (this.text?.trim().length > 0) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    } else if (this.src?.trim().length > 0 && !this.hasError) {\n      return (\n        <span class=\"content\" title={this.alt || this.text}>\n          <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n        </span>\n      )\n    } else {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight?.length > 0 ? this.iconHeight : this.iconSizes[this.density]?.height}\n            width={this.iconWidth?.length > 0 ? this.iconWidth : this.iconSizes[this.density]?.width}\n            aria-hidden=\"true\"\n            style={{\n              'margin-top': this.iconMarginTop?.length > 0 ? this.iconMarginTop : this.iconMarginTops[this.density],\n            }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} aria-disabled={this.disabled}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"names":[],"mappings":"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"}