@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/dropdown/dropdown.js

@@ -0,0 +1,939 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { listenForExternalBlockingSurface } from "../../shared/utils/floating-surface-dismiss";
+import { FloatingUIManager } from "../../shared/utils/floating-ui";
+import { generateUniqueId } from "../../shared/utils/id";
+import { isNil } from "../../shared/utils/isNil";
+/**
+ * ## 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/dropdown?tab=designer).
+ *
+ * @category Ações
+ * @status stable
+ * @slot trigger - Slot para o elemento que aciona a abertura do dropdown.
+ * @slot target - Slot para o conteúdo exibido pelo dropdown.
+ *
+ * @part trigger - Área do acionador do dropdown.
+ * @part target - Área de conteúdo exibida pelo dropdown.
+ * @part trigger-arrow - Indicador visual opcional do acionador do dropdown.
+ */
+export class Dropdown {
+    constructor() {
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         * > **Uso compartilhado:** mantenha esta descrição idêntica em todos os componentes que usam `customId`.
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Indica se o dropdown está aberto ou fechado.
+         * Esta propriedade é refletida no DOM e pode ser alterada externamente.
+         * O valor padrão é falso (fechado).
+         */
+        this.isOpen = false;
+        /**
+         * Define o posicionamento do target (alvo) em relação ao trigger (acionador).
+         */
+        this.placement = 'bottom-start';
+        /**
+         * Exibe uma seta ao lado do elemento acionador.
+         * O valor padrão é falso para preservar a apresentação dos triggers existentes.
+         */
+        this.showArrow = false;
+        /**
+         * Define o posicionamento da seta ('left' ou 'right') em relação ao elemento acionador.
+         * O valor padrão é 'right'.
+         */
+        this.arrowPosition = 'right';
+        /**
+         * Define se o dropdown deve permanecer aberto quando outro dropdown é aberto.
+         * Quando definido como false (padrão), o dropdown será fechado automaticamente quando outro dropdown for aberto.
+         * Quando definido como true, o dropdown permanecerá aberto mesmo quando outro dropdown for aberto.
+         */
+        this.preventAutoDismiss = false;
+        /**
+         * Define o z-index do elemento target (alvo) do dropdown.
+         * Permite customizar a ordem de sobreposição do painel dropdown em relação aos demais elementos da página.
+         * O valor padrão utiliza a variável CSS do design system: var(--z-index-layer-1).
+         */
+        this.targetZIndex = 'var(--z-index-layer-1)';
+        /**
+         * Desabilita a interação com o componente.
+         *
+         * > **Uso compartilhado:** mantenha esta descrição idêntica em todos os componentes que usam `disabled`.
+         */
+        this.disabled = false;
+        /**
+         * Método chamado sempre que a propriedade `isOpen` muda.
+         * Emite um evento com o novo estado do dropdown.
+         */
+        this.pendingOpenInit = false;
+        this.clickListenerAttached = false;
+        this.targetElement = null;
+        this.dropdownItems = [];
+        this.dropdownLinks = [];
+        this.focusableElement = null;
+        this.triggerKeydownHandler = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleTriggerBehavior(event);
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                this.hide();
+                this.focusOnTriggerElement();
+            }
+            else if (event.key === 'ArrowDown' && this.isOpen) {
+                event.preventDefault();
+                this.initializeDropdownItems();
+                if (this.dropdownLinks.length > 0) {
+                    this.focusOnElement(this.dropdownLinks[0]);
+                }
+                else if (this.dropdownItems.length > 0) {
+                    this.focusOnElement(this.dropdownItems[0]);
+                }
+            }
+        };
+        this.targetKeydownHandler = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.hide();
+                this.focusOnTriggerElement();
+            }
+        };
+        /**
+         * Alterna o estado do dropdown entre aberto e fechado.
+         */
+        this.toggle = (event) => {
+            if (this.disabled)
+                return;
+            event.stopPropagation();
+            this.isOpen = !this.isOpen;
+        };
+        /**
+         * Handler para eventos de keydown nos itens não-link
+         * Implementa navegação completa por setas, Tab não navega entre estes itens
+         */
+        this.handleItemKeydown = (event) => {
+            const item = event.currentTarget;
+            const key = event.key;
+            const currentIndex = this.dropdownItems.indexOf(item);
+            const lastIndex = this.dropdownItems.length - 1;
+            switch (key) {
+                case 'ArrowUp':
+                    event.preventDefault();
+                    if (currentIndex <= 0) {
+                        this.focusOnElement(this.dropdownItems[lastIndex]);
+                    }
+                    else {
+                        this.focusOnElement(this.dropdownItems[currentIndex - 1]);
+                    }
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    if (currentIndex >= lastIndex) {
+                        this.focusOnElement(this.dropdownItems[0]);
+                    }
+                    else {
+                        this.focusOnElement(this.dropdownItems[currentIndex + 1]);
+                    }
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusOnElement(this.dropdownItems[0]);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusOnElement(this.dropdownItems[lastIndex]);
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    item.click();
+                    this.hide();
+                    this.focusOnTriggerElement();
+                    break;
+                case 'Tab':
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.hide();
+                    this.focusOnTriggerElement();
+                    break;
+                default:
+                    break;
+            }
+        };
+        /**
+         * Handler específico para links
+         */
+        this.handleLinkKeydown = (event) => {
+            const link = event.currentTarget;
+            const key = event.key;
+            const linkIndex = this.dropdownLinks.indexOf(link);
+            const lastLinkIndex = this.dropdownLinks.length - 1;
+            switch (key) {
+                case 'ArrowUp':
+                case 'ArrowDown':
+                case 'Home':
+                case 'End':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'Tab':
+                    event.preventDefault();
+                    if (!event.shiftKey) {
+                        if (linkIndex >= lastLinkIndex) {
+                            this.focusOnElement(this.dropdownLinks[0]);
+                        }
+                        else {
+                            this.focusOnElement(this.dropdownLinks[linkIndex + 1]);
+                        }
+                    }
+                    else {
+                        if (linkIndex <= 0) {
+                            this.focusOnElement(this.dropdownLinks[lastLinkIndex]);
+                        }
+                        else {
+                            this.focusOnElement(this.dropdownLinks[linkIndex - 1]);
+                        }
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (key === ' ' && link.tagName.toLowerCase() === 'a') {
+                        event.preventDefault();
+                    }
+                    setTimeout(() => this.hide(), 100);
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.hide();
+                    this.focusOnTriggerElement();
+                    break;
+                default:
+                    break;
+            }
+        };
+    }
+    isOpenChanged(newValue) {
+        if (newValue) {
+            this.attachClickListener();
+            this.attachOpenListeners();
+            this.brDidOpen.emit({ id: this.customId });
+            this.pendingOpenInit = true;
+        }
+        else {
+            this.detachClickListener();
+            this.detachOpenListeners();
+            this.cleanupPositioning();
+            this.brDidClose.emit({ id: this.customId });
+            if (this.triggerElement !== null && this.triggerElement !== undefined) {
+                this.focusOnTriggerElement();
+            }
+        }
+        this.brDropdownChange.emit({ isOpen: newValue });
+        this.brDropdownOpenChange.emit({ open: newValue });
+    }
+    /**
+     * Aplica o novo valor de z-index ao elemento target.
+     */
+    targetZIndexChanged() {
+        this.updateTargetZIndex();
+    }
+    /**
+     * Evento emitido quando o dropdown é aberto.
+     * Este evento é usado para implementar o auto-dismiss de outros dropdowns.
+     *
+     * @internal
+     */
+    placementChanged() {
+        if (!this.isOpen)
+            return;
+        this.cleanupPositioning();
+        this.positionDropdown();
+    }
+    /**
+     * Fecha o dropdown se for desabilitado enquanto estiver aberto.
+     */
+    disabledChanged(newValue) {
+        if (newValue && this.isOpen) {
+            this.hide();
+        }
+    }
+    connectedCallback() {
+        this.clickHandler = this.onClickOutside.bind(this);
+        this.dropdownOpenHandler = this.onDropdownDidOpen.bind(this);
+        if (this.isOpen)
+            this.attachOpenListeners();
+    }
+    disconnectedCallback() {
+        this.detachClickListener();
+        this.detachOpenListeners();
+        if (this.targetElement !== null && this.targetElement !== undefined) {
+            this.targetElement.removeEventListener('keydown', this.targetKeydownHandler);
+        }
+        this.cleanupPositioning();
+        this.clearDropdownItemListeners();
+    }
+    componentDidLoad() {
+        this.triggerElement = this.el.shadowRoot.querySelector('#trigger');
+        this.targetElement = this.el.shadowRoot.querySelector('#target');
+        this.setBehavior();
+        this.updateTargetZIndex();
+        if (this.isOpen) {
+            this.attachClickListener();
+            this.initializeDropdownItems();
+            this.positionDropdown();
+        }
+    }
+    attachClickListener() {
+        if (this.clickListenerAttached)
+            return;
+        document.addEventListener('click', this.clickHandler);
+        this.clickListenerAttached = true;
+    }
+    detachClickListener() {
+        if (!this.clickListenerAttached)
+            return;
+        document.removeEventListener('click', this.clickHandler);
+        this.clickListenerAttached = false;
+    }
+    attachOpenListeners() {
+        if (!this.isOpen)
+            return;
+        document.addEventListener('brDidOpen', this.dropdownOpenHandler);
+        this.cleanupBlockingSurfaceDismissal ?? (this.cleanupBlockingSurfaceDismissal = listenForExternalBlockingSurface(this.el, () => void this.hide()));
+    }
+    detachOpenListeners() {
+        document.removeEventListener('brDidOpen', this.dropdownOpenHandler);
+        this.cleanupBlockingSurfaceDismissal?.();
+        this.cleanupBlockingSurfaceDismissal = undefined;
+    }
+    componentDidRender() {
+        if (this.isOpen && this.pendingOpenInit) {
+            this.pendingOpenInit = false;
+            this.initializeDropdownItems();
+            this.positionDropdown();
+        }
+    }
+    /**
+     * Esconde o dropdown.
+     * Define a propriedade `isOpen` como falsa e retorna o novo estado.
+     * Este método pode ser chamado externamente.
+     * @deprecated Use `close`.
+     */
+    async hide() {
+        this.isOpen = false;
+        return { isOpen: this.isOpen };
+    }
+    /** Fecha o dropdown e mantém o formato de retorno legado. */
+    async close() {
+        return await this.hide();
+    }
+    /**
+     * Abre o dropdown.
+     * Define a propriedade `isOpen` como verdadeira e retorna o novo estado.
+     * Este método pode ser chamado externamente.
+     */
+    async open() {
+        this.isOpen = true;
+        return { isOpen: this.isOpen };
+    }
+    /**
+     * Define o foco no elemento interno do componente.
+     * Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
+     */
+    async setFocus() {
+        if (this.focusableElement !== null && this.focusableElement !== undefined) {
+            this.focusableElement.focus();
+        }
+        else {
+            this.focusOnTriggerElement();
+        }
+    }
+    /**
+     * Limpa o posicionamento do Floating UI
+     */
+    cleanupPositioning() {
+        this.floatingManager?.stop();
+    }
+    clearDropdownItemListeners() {
+        this.dropdownItems.forEach((item) => {
+            item.removeEventListener('keydown', this.handleItemKeydown);
+        });
+        this.dropdownLinks.forEach((link) => {
+            link.removeEventListener('keydown', this.handleLinkKeydown);
+        });
+        this.dropdownItems = [];
+        this.dropdownLinks = [];
+    }
+    /**
+     * Foca em um elemento específico com suporte a componentes personalizados
+     * @param targetElement Elemento a receber o foco
+     */
+    focusOnElement(targetElement) {
+        if (targetElement && targetElement !== this.el) {
+            if ('setFocus' in targetElement) {
+                targetElement.setFocus();
+            }
+            else {
+                targetElement.focus();
+            }
+            targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        }
+    }
+    /**
+     * Foca no elemento interativo dentro do slot trigger
+     * Esta função procura pelo elemento dentro do slot trigger e aplica o foco nele
+     */
+    focusOnTriggerElement() {
+        const triggerSlot = this.el.shadowRoot.querySelector('slot[name="trigger"]');
+        if (triggerSlot !== null) {
+            const slotElements = triggerSlot.assignedElements();
+            if (slotElements.length > 0) {
+                const firstElement = slotElements[0];
+                if ('setFocus' in firstElement) {
+                    firstElement.setFocus();
+                }
+                else {
+                    firstElement.focus();
+                }
+                firstElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+            }
+            else {
+                this.focusTrigger();
+            }
+        }
+        else {
+            this.focusTrigger();
+        }
+    }
+    /**
+     * Auxiliar para focar no elemento trigger
+     */
+    focusTrigger() {
+        if (typeof this.triggerElement !== 'undefined') {
+            this.triggerElement.focus();
+            this.triggerElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        }
+    }
+    getCssClassMap() {
+        return {
+            'br-dropdown': true,
+            disabled: this.disabled,
+        };
+    }
+    /**
+     * Lida com o comportamento no trigger
+     */
+    handleTriggerBehavior(event) {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.toggle(event);
+        if (this.isOpen) {
+            setTimeout(() => {
+                this.initializeDropdownItems();
+            }, 0);
+        }
+    }
+    /**
+     * Inicializa os itens do dropdown com comportamentos de navegação com teclado,
+     * separando claramente entre elementos navegáveis por Tab e elementos navegáveis por setas
+     */
+    initializeDropdownItems() {
+        if (this.targetElement === null)
+            return;
+        this.clearDropdownItemListeners();
+        this.targetElement.setAttribute('tabindex', '-1');
+        this.targetElement.focus();
+        const targetSlot = this.el.shadowRoot.querySelector('slot[name="target"]');
+        if (isNil(targetSlot))
+            return;
+        const assignedElements = targetSlot.assignedElements();
+        if (assignedElements.length === 0)
+            return;
+        const nonLinkSelector = 'button, br-button, input, br-input, br-item:not([href]), textarea, br-textarea, select, br-select, details, [tabindex]:not([tabindex="-1"]):not(a[href])';
+        const linkSelector = 'a[href], br-item[href]';
+        assignedElements.forEach((element) => {
+            if (element instanceof HTMLElement) {
+                if (element.matches(linkSelector)) {
+                    this.dropdownLinks.push(element);
+                }
+                else if (element.matches(nonLinkSelector)) {
+                    this.dropdownItems.push(element);
+                }
+            }
+            const linkChildren = Array.from(element.querySelectorAll(linkSelector));
+            this.dropdownLinks = this.dropdownLinks.concat(linkChildren);
+            const nonLinkChildren = Array.from(element.querySelectorAll(nonLinkSelector));
+            this.dropdownItems = this.dropdownItems.concat(nonLinkChildren);
+        });
+        this.dropdownItems.forEach((item) => {
+            item.addEventListener('keydown', this.handleItemKeydown);
+        });
+        this.dropdownLinks.forEach((link) => {
+            link.addEventListener('keydown', this.handleLinkKeydown);
+        });
+        if (this.dropdownLinks.length > 0) {
+            this.focusOnElement(this.dropdownLinks[0]);
+            this.focusableElement = this.dropdownLinks[0];
+        }
+        else if (this.dropdownItems.length > 0) {
+            this.focusOnElement(this.dropdownItems[0]);
+            this.focusableElement = this.dropdownItems[0];
+        }
+    }
+    /**
+     * Método que lida com cliques fora do dropdown.
+     *
+     * @param {MouseEvent} event - O evento de clique que ocorreu.
+     */
+    onClickOutside(event) {
+        if (!this.isOpen)
+            return;
+        const path = event.composedPath();
+        if (this.triggerElement &&
+            this.targetElement &&
+            !path.includes(this.triggerElement) &&
+            !path.includes(this.targetElement)) {
+            this.hide();
+        }
+    }
+    /**
+     * Método que lida com o evento brDidOpen de outros dropdowns
+     * Fecha este dropdown se não for o emissor do evento e preventAutoDismiss=false
+     */
+    onDropdownDidOpen(event) {
+        if (this.preventAutoDismiss) {
+            return;
+        }
+        const customEvent = event;
+        const eventTarget = event.target;
+        const isDropdownEvent = eventTarget?.tagName.toLowerCase() === 'br-dropdown';
+        if (isDropdownEvent && this.isOpen && customEvent.detail.id !== this.customId) {
+            this.hide();
+        }
+    }
+    /**
+     * Posiciona o dropdown usando Floating UI
+     */
+    positionDropdown() {
+        if (this.triggerElement == null || this.targetElement == null)
+            return;
+        this.floatingManager = new FloatingUIManager({
+            triggerElement: this.triggerElement,
+            contentElement: this.targetElement,
+            placement: this.placement,
+            offset: 4,
+        });
+        this.floatingManager.start();
+    }
+    /**
+     * Configura os comportamentos de interação do dropdown
+     */
+    setBehavior() {
+        if (this.triggerElement === null)
+            return;
+        if (this.targetElement !== null) {
+            this.targetElement.addEventListener('keydown', this.targetKeydownHandler);
+        }
+    }
+    /**
+     * Atualiza o z-index do target conforme a propriedade targetZIndex
+     */
+    updateTargetZIndex() {
+        if (this.targetElement === null) {
+            return;
+        }
+        if (this.targetZIndex !== null && this.targetZIndex !== undefined) {
+            this.targetElement.style.zIndex = this.targetZIndex;
+        }
+    }
+    render() {
+        return (h(Host, { key: '695bafe3b8c346f97a0db7360e32ac518ea1502b', "is-open": this.isOpen, placement: this.placement, "prevent-auto-dismiss": this.preventAutoDismiss, disabled: this.disabled, "arrow-position": this.arrowPosition }, h("div", { key: '301507910f180a8e8799df3a3b677f768c3bf50f', class: this.getCssClassMap(), id: this.customId }, h("div", { key: '7eed65fb40a674563a0378271ab8dbf4c3e441ef', id: "trigger", part: "trigger", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.disabled ? null : this.toggle, onKeyDown: (e) => (this.disabled ? null : this.triggerKeydownHandler(e)), "aria-controls": "target", "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || null, "aria-disabled": this.disabled ? 'true' : null }, this.showArrow && this.arrowPosition === 'left' ? (h("br-icon", { iconName: this.isOpen ? 'fa6-solid:caret-up' : 'fa6-solid:caret-down', "aria-hidden": "true", part: "trigger-arrow", width: "16", height: "16" })) : null, h("slot", { key: 'fa3d69c559202120e5f13c37b02fc4f89a4f1063', name: "trigger" }), this.showArrow && this.arrowPosition === 'right' ? (h("br-icon", { iconName: this.isOpen ? 'fa6-solid:caret-up' : 'fa6-solid:caret-down', "aria-hidden": "true", part: "trigger-arrow", width: "16", height: "16" })) : null), h("div", { key: '9071300ed8deeeeaa0f669f825e6eecf1fa96e75', id: "target", part: "target", "aria-hidden": this.isOpen ? 'false' : 'true' }, h("slot", { key: 'c6c7dca48b06b11ab9c97d8e3f76de0a275dfb0d', name: "target" })))));
+    }
+    static get is() { return "br-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId().\n\n> **Uso compartilhado:** mantenha esta descri\u00E7\u00E3o id\u00EAntica em todos os componentes que usam `customId`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o dropdown est\u00E1 aberto ou fechado.\nEsta propriedade \u00E9 refletida no DOM e pode ser alterada externamente.\nO valor padr\u00E3o \u00E9 falso (fechado)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "DropdownPlacement": {
+                            "location": "import",
+                            "path": "./dropdown.types",
+                            "id": "src/components/dropdown/dropdown.types.ts::DropdownPlacement",
+                            "referenceLocation": "DropdownPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o posicionamento do target (alvo) em rela\u00E7\u00E3o ao trigger (acionador)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "showArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe uma seta ao lado do elemento acionador.\nO valor padr\u00E3o \u00E9 falso para preservar a apresenta\u00E7\u00E3o dos triggers existentes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-arrow",
+                "defaultValue": "false"
+            },
+            "arrowPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownArrowPosition",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "DropdownArrowPosition": {
+                            "location": "import",
+                            "path": "./dropdown.types",
+                            "id": "src/components/dropdown/dropdown.types.ts::DropdownArrowPosition",
+                            "referenceLocation": "DropdownArrowPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o posicionamento da seta ('left' ou 'right') em rela\u00E7\u00E3o ao elemento acionador.\nO valor padr\u00E3o \u00E9 'right'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "arrow-position",
+                "defaultValue": "'right'"
+            },
+            "preventAutoDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o dropdown deve permanecer aberto quando outro dropdown \u00E9 aberto.\nQuando definido como false (padr\u00E3o), o dropdown ser\u00E1 fechado automaticamente quando outro dropdown for aberto.\nQuando definido como true, o dropdown permanecer\u00E1 aberto mesmo quando outro dropdown for aberto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "prevent-auto-dismiss",
+                "defaultValue": "false"
+            },
+            "targetZIndex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o z-index do elemento target (alvo) do dropdown.\nPermite customizar a ordem de sobreposi\u00E7\u00E3o do painel dropdown em rela\u00E7\u00E3o aos demais elementos da p\u00E1gina.\nO valor padr\u00E3o utiliza a vari\u00E1vel CSS do design system: var(--z-index-layer-1)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-z-index",
+                "defaultValue": "'var(--z-index-layer-1)'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita a intera\u00E7\u00E3o com o componente.\n\n> **Uso compartilhado:** mantenha esta descri\u00E7\u00E3o id\u00EAntica em todos os componentes que usam `disabled`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o r\u00F3tulo acess\u00EDvel usado por tecnologias assistivas.\n\n> **Uso compartilhado:** mantenha esta descri\u00E7\u00E3o id\u00EAntica em todos os componentes que usam `ariaLabel`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidOpen",
+                "name": "brDidOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o dropdown abre."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidClose",
+                "name": "brDidClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o dropdown fecha."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "brDropdownChange",
+                "name": "brDropdownChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `brDropdownOpenChange`."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ isOpen: boolean }",
+                    "resolved": "{ isOpen: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "brDropdownOpenChange",
+                "name": "brDropdownOpenChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando o estado aberto muda."
+                },
+                "complexType": {
+                    "original": "DropdownOpenChangeDetail",
+                    "resolved": "DropdownOpenChangeDetail",
+                    "references": {
+                        "DropdownOpenChangeDetail": {
+                            "location": "import",
+                            "path": "./dropdown.types",
+                            "id": "src/components/dropdown/dropdown.types.ts::DropdownOpenChangeDetail",
+                            "referenceLocation": "DropdownOpenChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<{ isOpen: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isOpen: boolean; }>"
+                },
+                "docs": {
+                    "text": "Esconde o dropdown.\nDefine a propriedade `isOpen` como falsa e retorna o novo estado.\nEste m\u00E9todo pode ser chamado externamente.",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `close`."
+                        }]
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<{ isOpen: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isOpen: boolean; }>"
+                },
+                "docs": {
+                    "text": "Fecha o dropdown e mant\u00E9m o formato de retorno legado.",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<{ isOpen: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isOpen: boolean; }>"
+                },
+                "docs": {
+                    "text": "Abre o dropdown.\nDefine a propriedade `isOpen` como verdadeira e retorna o novo estado.\nEste m\u00E9todo pode ser chamado externamente.",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o foco no elemento interno do componente.\nEste m\u00E9todo pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "isOpenChanged"
+            }, {
+                "propName": "targetZIndex",
+                "methodName": "targetZIndexChanged"
+            }, {
+                "propName": "placement",
+                "methodName": "placementChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
+}