@govbr-ds/webcomponents 2.0.0-next.13 → 2.0.0-next.15

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

@@ -0,0 +1,426 @@
+import { Host, h } from "@stencil/core";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/dropdown?tab=designer).
+ *
+ * @slot trigger - Slot que recebe o elemento acionador
+ * @slot target - Slot que recebe o elemento alvo
+ */
+export class Dropdown {
+    constructor() {
+        /**
+         * Alterna o estado do dropdown entre aberto e fechado.
+         */
+        this.toggle = (event) => {
+            event.stopPropagation();
+            this.isOpen = !this.isOpen;
+        };
+        this.inheritedAttributes = {};
+        this.isOpen = false;
+    }
+    /**
+     * Método chamado sempre que a propriedade `isOpen` muda.
+     * Emite um evento com o novo estado do dropdown.
+     */
+    isOpenChanged() {
+        this.brDropdownChange.emit({ 'is-opened': this.isOpen });
+    }
+    connectedCallback() {
+        this.brDidConnect.emit();
+        document.addEventListener('click', this.onClickOutside.bind(this));
+    }
+    componentWillLoad() {
+        this.brWillLoad.emit();
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    componentDidLoad() {
+        this.brDidLoad.emit();
+    }
+    componentWillRender() {
+        this.brWillRender.emit();
+    }
+    componentDidRender() {
+        this.brDidRender.emit();
+    }
+    componentShouldUpdate() {
+        this.brShouldUpdate.emit();
+    }
+    componentWillUpdate() {
+        this.brWillUpdate.emit();
+    }
+    componentDidUpdate() {
+        this.brDidUpdate.emit();
+    }
+    disconnectedCallback() {
+        this.brDidDisconnect.emit();
+        document.removeEventListener('click', this.onClickOutside.bind(this));
+    }
+    formAssociatedCallback(form) {
+        this.brFormAssociatedCallback.emit(form);
+    }
+    formDisabledCallback(disabled) {
+        this.brFormDisabledCallback.emit(disabled);
+    }
+    formResetCallback() {
+        this.brFormResetCallback.emit();
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.brFormStateRestoreCallback.emit([state, _mode]);
+    }
+    getCssClassMap() {
+        return {
+            'br-dropdown': true,
+        };
+    }
+    /**
+     * Método que lida com cliques fora do dropdown.
+     *
+     * @param {MouseEvent} event - O evento de clique que ocorreu.
+     */
+    onClickOutside(event) {
+        const path = event.composedPath();
+        const dropdownElement = this.el.shadowRoot.querySelector('#target');
+        if (dropdownElement && !path.includes(dropdownElement)) {
+            this.hide();
+        }
+    }
+    /**
+     * Abre o dropdown.
+     * Define a propriedade `isOpen` como verdadeira e retorna o novo estado.
+     * Este método é marcado com @Method() para que possa ser chamado externamente.
+     */
+    async open() {
+        this.isOpen = true;
+        return { isOpen: this.isOpen }; // Retorna o novo estado
+    }
+    /**
+     * Esconde o dropdown.
+     * Define a propriedade `isOpen` como falsa e retorna o novo estado.
+     * Este método é marcado com @Method() para que possa ser chamado externamente.
+     */
+    async hide() {
+        this.isOpen = false;
+        return { isOpen: this.isOpen }; // Retorna o novo estado
+    }
+    render() {
+        return (h(Host, { key: '25638a100598f3ea3af3713f1584e72aa686a751', "is-open": this.isOpen }, h("div", Object.assign({ key: 'f565d3e6efeca8f4d3e8c53378d172bb8e751829', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'ac90183419b5d4d03541aeb021fa391d77c7ad26', id: "trigger", onClick: this.toggle, "aria-controls": "target", "aria-haspopup": "true", "aria-expanded": this.isOpen }, h("slot", { key: '500aa694847e93aee709acb6486b240ab7b87373', name: "trigger" })), h("div", { key: '87740e95057ef5c7200d5e01011691b49b6edb4e', id: "target", "aria-hidden": !this.isOpen }, h("slot", { key: 'f1c92198fc05a61e052d4588ea9465024749f653', name: "target" })))));
+    }
+    static get is() { return "br-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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)."
+                },
+                "attribute": "is-open",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidConnect",
+                "name": "brDidConnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o componente \u00E9 conectado ao DOM.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWillLoad",
+                "name": "brWillLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes que o componente seja carregado pela primeira vez.\nUtilize este evento para realizar tarefas de inicializa\u00E7\u00E3o antes do componente ser exibido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidLoad",
+                "name": "brDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido carregado pela primeira vez.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer depois que o componente foi totalmente carregado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWillRender",
+                "name": "brWillRender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes do componente ser renderizado.\nUtilize este evento para preparar o componente antes de sua renderiza\u00E7\u00E3o.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidRender",
+                "name": "brDidRender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido renderizado.\nUtilize este evento para executar a\u00E7\u00F5es que devem ocorrer ap\u00F3s a renderiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brShouldUpdate",
+                "name": "brShouldUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento para indicar se o componente deve ser atualizado ou n\u00E3o.\nEste evento \u00E9 chamado antes de qualquer atualiza\u00E7\u00E3o do componente para decidir se a atualiza\u00E7\u00E3o deve prosseguir.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWillUpdate",
+                "name": "brWillUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes de o componente ser atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es preparat\u00F3rias antes da atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidUpdate",
+                "name": "brDidUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es ap\u00F3s a atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidDisconnect",
+                "name": "brDidDisconnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o componente \u00E9 desconectado do DOM.\nUtilize este evento para realizar a limpeza ou outras a\u00E7\u00F5es necess\u00E1rias quando o componente \u00E9 removido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormAssociatedCallback",
+                "name": "brFormAssociatedCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "form - Dados do formul\u00E1rio associado."
+                        }],
+                    "text": "Emite um evento quando o componente \u00E9 associado ou removido de um `<form>`.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "FormData",
+                    "resolved": "FormData",
+                    "references": {
+                        "FormData": {
+                            "location": "global",
+                            "id": "global::FormData"
+                        }
+                    }
+                }
+            }, {
+                "method": "brFormDisabledCallback",
+                "name": "brFormDisabledCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "disabled - Novo estado `disabled` do componente dentro do formul\u00E1rio."
+                        }],
+                    "text": "Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informa\u00E7\u00F5es."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormResetCallback",
+                "name": "brFormResetCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando um `<form>` \u00E9 resetado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormStateRestoreCallback",
+                "name": "brFormStateRestoreCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "state - Estado restaurado do formul\u00E1rio."
+                        }, {
+                            "name": "param",
+                            "text": "_mode - Modo de preenchimento autom\u00E1tico do navegador."
+                        }],
+                    "text": "Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informa\u00E7\u00F5es."
+                },
+                "complexType": {
+                    "original": "[state: string, _mode: string]",
+                    "resolved": "[state: string, _mode: string]",
+                    "references": {}
+                }
+            }, {
+                "method": "brDropdownChange",
+                "name": "brDropdownChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o estado do dropdown muda."
+                },
+                "complexType": {
+                    "original": "{ 'is-opened': boolean }",
+                    "resolved": "{ 'is-opened': boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "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 \u00E9 marcado com",
+                    "tags": [{
+                            "name": "Method",
+                            "text": "() para que possa ser chamado externamente."
+                        }]
+                }
+            },
+            "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 \u00E9 marcado com",
+                    "tags": [{
+                            "name": "Method",
+                            "text": "() para que possa ser chamado externamente."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "isOpenChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\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/dropdown?tab=designer).\n *\n * @slot trigger - Slot que recebe o elemento acionador\n * @slot target - Slot que recebe o elemento alvo\n */\n@Component({\n  tag: 'br-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Dropdown {\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: HTMLBrDropdownElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Indica se o dropdown está aberto ou fechado.\n   * Esta propriedade é refletida no DOM e pode ser alterada externamente.\n   * O valor padrão é falso (fechado).\n   */\n  @Prop({ reflect: true, mutable: true }) isOpen: boolean = false\n\n  /**\n   * Método chamado sempre que a propriedade `isOpen` muda.\n   * Emite um evento com o novo estado do dropdown.\n   */\n  @Watch('isOpen')\n  isOpenChanged() {\n    this.brDropdownChange.emit({ 'is-opened': this.isOpen })\n  }\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n    document.addEventListener('click', this.onClickOutside.bind(this))\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n    document.removeEventListener('click', this.onClickOutside.bind(this))\n  }\n\n  /**\n   * Emite um evento quando o componente é associado ou removido de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n   *\n   * @param form - Dados do formulário associado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n   *\n   * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando um `<form>` é resetado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n   *\n   * @param state - Estado restaurado do formulário.\n   * @param _mode - Modo de preenchimento automático do navegador.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\n  }\n\n  /**\n   * Evento emitido quando o estado do dropdown muda.\n   */\n  @Event() brDropdownChange: EventEmitter<{ 'is-opened': boolean }>\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-dropdown': true,\n    }\n  }\n\n  /**\n   * Alterna o estado do dropdown entre aberto e fechado.\n   */\n  private readonly toggle = (event: Event) => {\n    event.stopPropagation()\n    this.isOpen = !this.isOpen\n  }\n\n  /**\n   * Método que lida com cliques fora do dropdown.\n   *\n   * @param {MouseEvent} event - O evento de clique que ocorreu.\n   */\n  private onClickOutside(event: MouseEvent) {\n    const path = event.composedPath()\n    const dropdownElement = this.el.shadowRoot.querySelector('#target')\n\n    if (dropdownElement && !path.includes(dropdownElement)) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Abre o dropdown.\n   * Define a propriedade `isOpen` como verdadeira e retorna o novo estado.\n   * Este método é marcado com @Method() para que possa ser chamado externamente.\n   */\n  @Method()\n  async open(): Promise<{ isOpen: boolean }> {\n    this.isOpen = true\n    return { isOpen: this.isOpen } // Retorna o novo estado\n  }\n\n  /**\n   * Esconde o dropdown.\n   * Define a propriedade `isOpen` como falsa e retorna o novo estado.\n   * Este método é marcado com @Method() para que possa ser chamado externamente.\n   */\n  @Method()\n  async hide(): Promise<{ isOpen: boolean }> {\n    this.isOpen = false\n    return { isOpen: this.isOpen } // Retorna o novo estado\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host is-open={this.isOpen}>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          <div\n            id=\"trigger\"\n            onClick={this.toggle}\n            aria-controls=\"target\"\n            aria-haspopup=\"true\"\n            aria-expanded={this.isOpen}\n          >\n            <slot name=\"trigger\"></slot>\n          </div>\n          <div id=\"target\" aria-hidden={!this.isOpen}>\n            <slot name=\"target\"></slot>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/icon/icon.css

@@ -38,7 +38,8 @@ img {
 }
 
 button,
-input {
+input,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: var(--font-line-height-medium);
@@ -82,6 +83,10 @@ progress {
   vertical-align: baseline;
 }
 
+textarea {
+  overflow: auto;
+}
+
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
@@ -139,6 +144,17 @@ progress {
   width: auto;
 }
 
+.container {
+  --grid-margin: var(--grid-portrait-margin);
+  --grid-maxwidth: var(--grid-portrait-maxwidth);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--grid-maxwidth);
+  padding-left: var(--grid-margin);
+  padding-right: var(--grid-margin);
+  width: 100%;
+}
+
 .row {
   --grid-gutter: var(--grid-portrait-gutter);
   display: flex;
@@ -148,24 +164,52 @@ progress {
 }
 
 @media (min-width: 576px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tablet-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
+  }
 }
 @media (min-width: 992px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tablet-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
+  }
 }
 @media (min-width: 1280px) {
+  .container {
+    --grid-margin: var(--grid-desktop-margin);
+  }
   .row {
     --grid-gutter: var(--grid-desktop-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
+  }
 }
 @media (min-width: 1600px) {
+  .container {
+    --grid-margin: var(--grid-tv-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tv-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
+  }
+}
+
+.mt-1 {
+  margin-top: var(--spacing-scale-half) !important;
 }
 
 .mr-1 {
@@ -180,6 +224,10 @@ progress {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
 
+.pt-half {
+  padding-top: var(--spacing-scale-half) !important;
+}
+
 .py-3 {
   padding-bottom: var(--spacing-scale-2x) !important;
   padding-top: var(--spacing-scale-2x) !important;
@@ -256,6 +304,11 @@ img {
   max-width: 100%;
   vertical-align: middle;
 }
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
 
 label,
 .label {
@@ -290,6 +343,7 @@ label,
 }
 
 input,
+textarea,
 .input {
   color: var(--color-light);
   font-size: var(--font-size-scale-up-01);
@@ -333,6 +387,10 @@ code,
   white-space: nowrap !important;
 }
 
+.text-base {
+  font-size: var(--font-size-scale-base) !important;
+}
+
 .highlight {
   background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
   color: var(--status-highlight-text);
@@ -349,6 +407,50 @@ code,
   pointer-events: none;
 }
 
+[data-toggle=dropdown] + * {
+  position: absolute;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown [data-toggle=dropdown] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
 :host {
   margin: 0 var(--spacing-scale-base);
 }

package/dist/collection/components/icon/icon.js

@@ -18,7 +18,7 @@ export class Icon {
         this.IconName = undefined;
         this.height = '16';
         this.width = '24';
-        this.class = undefined;
+        this.CssClasses = undefined;
         this.isInline = false;
         this.rotate = undefined;
         this.flip = undefined;
@@ -52,7 +52,7 @@ export class Icon {
         this.brDidDisconnect.emit();
     }
     render() {
-        return (h(Host, { key: 'd9c47dae20ecb4a14c506f65fa6e5bd3562564d8' }, h("iconify-icon", Object.assign({ key: '9b2d324a421b84acb468988634a4f8bc5df76c8b', flip: this.flip, width: this.width, class: this.class, icon: this.IconName, inline: this.isInline, height: this.height, rotate: this.rotate }, this.inheritedAttributes))));
+        return (h(Host, { key: 'cd30e2c534c440372a5f42f60dc76f13c97e1be4' }, h("iconify-icon", Object.assign({ key: '2d479f72952402f5189754b79872a6ac583789da', flip: this.flip, width: this.width, class: this.CssClasses, icon: this.IconName, inline: this.isInline, height: this.height, rotate: this.rotate }, this.inheritedAttributes))));
     }
     static get is() { return "br-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -121,7 +121,7 @@ export class Icon {
                 "reflect": true,
                 "defaultValue": "'24'"
             },
-            "class": {
+            "CssClasses": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -135,7 +135,7 @@ export class Icon {
                     "tags": [],
                     "text": "Permite adicionar classes CSS adicionais ao \u00EDcone.\nUse esta propriedade para aplicar estilos personalizados ao \u00EDcone, al\u00E9m dos estilos padr\u00E3o."
                 },
-                "attribute": "class",
+                "attribute": "css-classes",
                 "reflect": true
             },
             "isInline": {