@govbr-ds/webcomponents 2.0.0-next.12 → 2.0.0-next.14

package/dist/components/br-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BrDropdown extends Components.BrDropdown, HTMLElement {}
+export const BrDropdown: {
+    prototype: BrDropdown;
+    new (): BrDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/br-dropdown.js

@@ -0,0 +1,156 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-698e7a18.js';
+import { i as inheritAriaAttributes } from './p-ee6f4f3f.js';
+
+const dropdownCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:flex !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 992px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 1280px){.row{--grid-gutter:var(--grid-desktop-gutter)}}@media (min-width: 1600px){.row{--grid-gutter:var(--grid-tv-gutter)}}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}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{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{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{display:block;position:relative}:host #trigger{display:inline-block;cursor:pointer}:host #target{display:none;position:absolute;top:100%;left:0}:host([is-open]) #target{display:block}";
+const BrDropdownStyle0 = dropdownCss;
+
+const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.brDidConnect = createEvent(this, "brDidConnect", 7);
+        this.brWillLoad = createEvent(this, "brWillLoad", 7);
+        this.brDidLoad = createEvent(this, "brDidLoad", 7);
+        this.brWillRender = createEvent(this, "brWillRender", 7);
+        this.brDidRender = createEvent(this, "brDidRender", 7);
+        this.brShouldUpdate = createEvent(this, "brShouldUpdate", 7);
+        this.brWillUpdate = createEvent(this, "brWillUpdate", 7);
+        this.brDidUpdate = createEvent(this, "brDidUpdate", 7);
+        this.brDidDisconnect = createEvent(this, "brDidDisconnect", 7);
+        this.brFormAssociatedCallback = createEvent(this, "brFormAssociatedCallback", 7);
+        this.brFormDisabledCallback = createEvent(this, "brFormDisabledCallback", 7);
+        this.brFormResetCallback = createEvent(this, "brFormResetCallback", 7);
+        this.brFormStateRestoreCallback = createEvent(this, "brFormStateRestoreCallback", 7);
+        this.brDropdownChange = createEvent(this, "brDropdownChange", 7);
+        this.elementInternals = this.attachInternals();
+        /**
+         * 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 formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "isOpen": ["isOpenChanged"]
+    }; }
+    static get style() { return BrDropdownStyle0; }
+}, [65, "br-dropdown", {
+        "isOpen": [1540, "is-open"],
+        "open": [64],
+        "hide": [64]
+    }, undefined, {
+        "isOpen": ["isOpenChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["br-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "br-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Dropdown);
+            }
+            break;
+    } });
+}
+
+const BrDropdown = Dropdown;
+const defineCustomElement = defineCustomElement$1;
+
+export { BrDropdown, defineCustomElement };
+
+//# sourceMappingURL=br-dropdown.js.map

package/dist/components/br-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"br-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=br-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n\n  #trigger {\n    display: inline-block;\n    cursor: pointer;\n  }\n\n  #target {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n  }\n}\n\n:host([is-open]) {\n    #target {\n    display: block;\n  }\n}\n","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"],"version":3}

package/dist/components/br-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './p-a32b2d34.js';
+import { I as Icon, d as defineCustomElement$1 } from './p-87afe26f.js';
 
 const BrIcon = Icon;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/br-input.js

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-4c4ab942.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-698e7a18.js';
 import { i as inheritAriaAttributes } from './p-ee6f4f3f.js';
-import { d as defineCustomElement$3 } from './p-1b05c8e6.js';
-import { d as defineCustomElement$2 } from './p-a32b2d34.js';
+import { d as defineCustomElement$3 } from './p-5769e796.js';
+import { d as defineCustomElement$2 } from './p-87afe26f.js';
 import { v as v4 } from './p-14616bce.js';
 
-const inputCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 992px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 1280px){.row{--grid-gutter:var(--grid-desktop-gutter)}}@media (min-width: 1600px){.row{--grid-gutter:var(--grid-tv-gutter)}}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.br-input{--input-button-margin:var(--spacing-scale-half);--input-padding:0 var(--spacing-scale-2x);--input-padding-button:var(--spacing-scale-5x);--input-padding-icon:var(--spacing-scale-5x);--input-size:var(--input-medium);--input-small:32px;--input-medium:40px;--input-large:48px;--input-highlight:56px;--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);color:var(--color);position:relative}.br-input input{background-color:var(--background-light);border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width);color:var(--color-light);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);height:var(--input-size);margin-top:var(--spacing-scale-half);padding-bottom:0;padding-left:var(--spacing-scale-2x);padding-right:var(--spacing-scale-2x);padding-top:0;width:100%}.br-input input::-ms-reveal,.br-input input::-ms-clear,.br-input input::-webkit-calendar-picker-indicator{display:none}.br-input input[type=search]::-webkit-search-decoration,.br-input input[type=search]::-webkit-search-cancel-button,.br-input input[type=search]::-webkit-search-results-button,.br-input input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.br-input.input-inline{display:flex}.br-input.input-inline .input-label{margin-right:var(--spacing-scale-baseh);margin-top:calc(var(--input-size) * 0.5 - var(--spacing-scale-half))}.br-input .input-group{position:relative}.br-input .input-icon{align-items:center;color:var(--border-color-alternative);display:flex;height:var(--input-size);margin-left:var(--spacing-scale-baseh);position:absolute}.br-input .input-icon+input{padding-left:var(--input-padding-icon)}.br-input .br-button{--button-size:var(--button-small);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);border-radius:50%;float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative;transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));width:var(--button-size)}.br-input.input-button input{padding-right:var(--input-padding-button)}.br-input.has-icon input{padding-right:var(--input-padding-icon)}.br-input.has-icon .br-button.circle{float:right;margin-right:var(--spacing-scale-half);margin-top:calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);transform:translateY(0)}.br-input.has-icon.small .br-button.circle{margin-top:calc((var(--button-size) + var(--spacing-scale-base)) * -1)}.br-input.has-icon.large .br-button.circle{margin-top:calc(var(--button-size) * -1)}.br-input.input-highlight{--input-button-margin:var(--spacing-scale-2x);--input-padding:0 var(--spacing-scale-3x);--input-padding-button:var(--spacing-scale-7x);--input-padding-icon:var(--spacing-scale-7x);--input-size:var(--input-highlight)}.br-input.input-highlight input{background-color:var(--gray-2);border-color:transparent;padding-left:var(--spacing-scale-3x);padding-right:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon{margin-left:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon+input{padding-left:var(--spacing-scale-7x)}.br-input.success input{border-color:var(--success);border-width:2px}.br-input.danger input{border-color:var(--danger);border-width:2px}.br-input.warning input{border-color:var(--warning);border-width:2px}.br-input.info input{border-color:var(--info);border-width:2px}.br-input input:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input input:focus,.br-input input:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-input .feedback{margin-bottom:var(--spacing-scale-half)}.br-input.small{--input-size:var(--input-small)}.br-input.medium{--input-size:var(--input-medium)}.br-input.large{--input-size:var(--input-large)}.br-input.dark-mode,.br-input.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:block}:host .br-input .input-icon{margin-top:0.1em;margin-left:var(--spacing-scale-base)}:host .br-input .input-icon+input{padding-left:calc(var(--input-padding-icon) + 3px)}.br-input br-button{float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative}.button-transform{transform:translateY(calc((var(--input-size) - 32px) * 0.5))}";
+const inputCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:flex !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 992px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 1280px){.row{--grid-gutter:var(--grid-desktop-gutter)}}@media (min-width: 1600px){.row{--grid-gutter:var(--grid-tv-gutter)}}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}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{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{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)}.br-input{--input-button-margin:var(--spacing-scale-half);--input-padding:0 var(--spacing-scale-2x);--input-padding-button:var(--spacing-scale-5x);--input-padding-icon:var(--spacing-scale-5x);--input-size:var(--input-medium);--input-small:32px;--input-medium:40px;--input-large:48px;--input-highlight:56px;--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);color:var(--color);position:relative}.br-input input{background-color:var(--background-light);border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width);color:var(--color-light);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);height:var(--input-size);margin-top:var(--spacing-scale-half);padding-bottom:0;padding-left:var(--spacing-scale-2x);padding-right:var(--spacing-scale-2x);padding-top:0;width:100%}.br-input input::-ms-reveal,.br-input input::-ms-clear,.br-input input::-webkit-calendar-picker-indicator{display:none}.br-input input[type=search]::-webkit-search-decoration,.br-input input[type=search]::-webkit-search-cancel-button,.br-input input[type=search]::-webkit-search-results-button,.br-input input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.br-input.input-inline{display:flex}.br-input.input-inline .input-label{margin-right:var(--spacing-scale-baseh);margin-top:calc(var(--input-size) * 0.5 - var(--spacing-scale-half))}.br-input .input-group{position:relative}.br-input .input-icon{align-items:center;color:var(--border-color-alternative);display:flex;height:var(--input-size);margin-left:var(--spacing-scale-baseh);position:absolute}.br-input .input-icon+input{padding-left:var(--input-padding-icon)}.br-input .br-button{--button-size:var(--button-small);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);border-radius:50%;float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative;transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));width:var(--button-size)}.br-input.input-button input{padding-right:var(--input-padding-button)}.br-input.has-icon input{padding-right:var(--input-padding-icon)}.br-input.has-icon .br-button.circle{float:right;margin-right:var(--spacing-scale-half);margin-top:calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);transform:translateY(0)}.br-input.has-icon.small .br-button.circle{margin-top:calc((var(--button-size) + var(--spacing-scale-base)) * -1)}.br-input.has-icon.large .br-button.circle{margin-top:calc(var(--button-size) * -1)}.br-input.input-highlight{--input-button-margin:var(--spacing-scale-2x);--input-padding:0 var(--spacing-scale-3x);--input-padding-button:var(--spacing-scale-7x);--input-padding-icon:var(--spacing-scale-7x);--input-size:var(--input-highlight)}.br-input.input-highlight input{background-color:var(--gray-2);border-color:transparent;padding-left:var(--spacing-scale-3x);padding-right:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon{margin-left:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon+input{padding-left:var(--spacing-scale-7x)}.br-input .br-list{box-shadow:var(--surface-shadow-md);max-height:530px;overflow:auto;position:absolute;width:100%;z-index:var(--z-index-layer-2)}.br-input .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-input .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-input .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-input .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-input .br-list .br-item{--item-padding-y:var(--spacing-scale-2x)}.br-input .br-list .br-item:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input .br-list .br-item:not(:first-child){border-top:var(--surface-width-sm) solid var(--border-color)}.br-input.success input{border-color:var(--success);border-width:2px}.br-input.danger input{border-color:var(--danger);border-width:2px}.br-input.warning input{border-color:var(--warning);border-width:2px}.br-input.info input{border-color:var(--info);border-width:2px}.br-input input:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input input:focus,.br-input input:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-input .feedback{margin-bottom:var(--spacing-scale-half)}.br-input.small{--input-size:var(--input-small)}.br-input.medium{--input-size:var(--input-medium)}.br-input.large{--input-size:var(--input-large)}.br-input.dark-mode,.br-input.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:block}:host .br-input .input-icon{margin-top:0.1em;margin-left:var(--spacing-scale-base)}:host .br-input .input-icon+input{padding-left:calc(var(--input-padding-icon) + 3px)}.br-input br-button{float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half)) * -1);padding:0;position:relative}.button-transform{transform:translateY(calc((var(--input-size) - 32px) * 0.5))}";
 const BrInputStyle0 = inputCss;
 
 const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
@@ -28,8 +28,13 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         this.valueChange = createEvent(this, "valueChange", 7);
         this.elementInternals = this.attachInternals();
         this.inheritedAttributes = {};
+        this.handleInput = (event) => {
+            this.value = event.target.value;
+            this.valueChange.emit(this.value);
+        };
         this.renderLabel = () => {
-            if (this.label) {
+            var _a;
+            if (((_a = this.label) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 if (this.isInline) {
                     return (h("div", { class: "input-label" }, h("label", { class: "text-nowrap", htmlFor: this.defaultID }, this.label)));
                 }
@@ -44,10 +49,11 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
             this.showIconTextPassword = input.type === 'password';
         };
         this.renderInput = () => {
-            return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.defaultID, autocomplete: this.autocomplete, autofocus: this.autofocus, disabled: this.disabled, onInput: this.handleInput.bind(this), placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
+            return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.defaultID, autocomplete: this.autocomplete, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
         };
         this.renderHelpText = () => {
-            return this.helpText ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
+            var _a;
+            return ((_a = this.helpText) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
         };
         this.renderIconPassword = () => {
             const showPassword = !this.showIconTextPassword;
@@ -56,7 +62,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         this.defaultID = `br-input-${v4()}`;
         this.type = 'text';
         this.autocomplete = undefined;
-        this.autofocus = false;
         this.density = 'medium';
         this.disabled = false;
         this.isInline = false;
@@ -133,12 +138,8 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
             warning: this.warning,
         };
     }
-    handleInput(event) {
-        this.value = event.target.value;
-        this.valueChange.emit(this.value);
-    }
     hasSlotContent(slotName) {
-        return !!this.el.querySelector(`[slot="${slotName}"]`);
+        return this.el.querySelector(`[slot="${slotName}"]`) !== null;
     }
     renderIconSlot() {
         if (this.hasSlotContent('icon')) {
@@ -155,7 +156,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         return null;
     }
     render() {
-        return (h(Host, { key: 'd6d001f1ad2ce509ad81a4ecf9be52353b85e661' }, h("div", { key: '9d672553f29ec3147eacfc26b8cb9f35a67d7223', class: this.getInputCssClassMap() }, this.renderLabel(), this.hasIconSlot ? (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput())) : (this.renderInput()), this.renderButton(), this.renderHelpText())));
+        return (h(Host, { key: '04d44896164c990470d07dde9bd531afa826dfe2' }, h("div", { key: '9605db5f9260861938915b37dda216b5babf2ea1', class: this.getInputCssClassMap() }, this.renderLabel(), this.hasIconSlot ? (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput())) : (this.renderInput()), this.renderButton(), this.renderHelpText())));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -164,7 +165,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
         "defaultID": [513, "default-i-d"],
         "type": [513],
         "autocomplete": [513],
-        "autofocus": [516],
         "density": [513],
         "disabled": [516],
         "isInline": [516, "is-inline"],

package/dist/components/br-input.js.map

@@ -1 +1 @@
-{"file":"br-input.js","mappings":"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","names":["uuidv4"],"sources":["src/components/input/input.scss?tag=br-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/input/input.scss\";\n\n:host {\n  display: block;\n\n  .br-input .input-icon {\n    margin-top: 0.1em;\n    margin-left: var(--spacing-scale-base);\n  }\n\n  .br-input .input-icon + input {\n    padding-left: calc(var(--input-padding-icon) + 3px);\n  }\n}\n\n\n.br-input br-button {\n  float: right;\n  margin-right: var(--input-button-margin);\n  margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n  padding: 0;\n  position: relative;\n}\n\n  .button-transform{\n    transform: translateY(calc((var(--input-size) - 32px) * 0.5));\n  }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\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: HTMLElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do campo de entrada.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) defaultID: string = `br-input-${uuidv4()}`\n\n  /**\n   * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n   * - 'color': Seletor de cor\n   * - 'email': Campo para e-mail\n   * - 'hidden': Campo oculto\n   * - 'password': Campo para senha\n   * - 'range': Controle deslizante\n   * - 'search': Campo de pesquisa\n   * - 'number': Campo para números\n   * - 'tel': Campo para números de telefone\n   * - 'text': Campo de texto padrão\n   * - 'url': Campo para URLs\n   */\n  @Prop({ reflect: true }) type:\n    | 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'url' = 'text'\n\n  /**\n   * Controla o comportamento de preenchimento automático do navegador para o input.\n   */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n  /**\n   * Se definido como verdadeiro, o input receberá foco automaticamente ao ser renderizado.\n   */\n  @Prop({ reflect: true }) autofocus: boolean = false\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o input, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se verdadeiro, o input terá destaque visual.\n   */\n  @Prop({ reflect: true }) isHighlight: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n   */\n  @Prop({ reflect: true }) success: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação com erro.\n   */\n  @Prop({ reflect: true }) danger: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado informativo.\n   */\n  @Prop({ reflect: true }) info: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de alerta.\n   */\n  @Prop({ reflect: true }) warning: boolean = false\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Nome do input, utilizado para identificação em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /**\n   * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n   */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /**\n   * Valor inicial exibido no input.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /**\n   * Texto adicional que fornece ajuda ou informações sobre o input.\n   */\n  @Prop({ reflect: true }) helpText: string\n\n  @State() showIconTextPassword: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\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  }\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.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\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  }\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  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.hasActionSlot,\n      small: this.density === 'small',\n      large: this.density === 'large',\n      medium: this.density === 'medium',\n      'input-inline': this.isInline,\n      'input-highlight': this.isHighlight,\n      success: this.success,\n      danger: this.danger,\n      info: this.info,\n      warning: this.warning,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange!: EventEmitter<string>\n  private handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  renderLabel = () => {\n    if (this.label) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label class=\"text-nowrap\" htmlFor={this.defaultID}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.defaultID}>{this.label}</label>\n      }\n    }\n  }\n\n  togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    input.type = input.type === 'password' ? 'text' : 'password'\n    this.showIconTextPassword = input.type === 'password'\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`)\n  }\n\n  renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.defaultID}\n        autocomplete={this.autocomplete}\n        autofocus={this.autofocus}\n        disabled={this.disabled}\n        onInput={this.handleInput.bind(this)}\n        placeholder={this.placeholder}\n        readonly={this.readonly}\n        required={this.required}\n        title={this.el.title}\n        type={this.type}\n        value={this.value}\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  renderHelpText = () => {\n    return this.helpText ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  renderIconPassword = () => {\n    const showPassword = !this.showIconTextPassword\n    return <br-icon icon-name={showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash'}></br-icon>\n  }\n\n  renderIconSlot() {\n    if (this.hasSlotContent('icon')) {\n      return (\n        <div class=\"input-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n      )\n    }\n  }\n\n  renderButton() {\n    if (this.type === 'password') {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          onClick={this.togglePasswordVisibility}\n        >\n          {this.renderIconPassword()}\n        </br-button>\n      )\n    } else if (this.hasSlotContent('action')) {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          // onClick={this.onIconAction}\n        >\n          <slot name=\"action\"></slot>\n        </br-button>\n      )\n    }\n    return null\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.hasIconSlot ? (\n            <div class=\"input-group\">\n              {this.renderIconSlot()}\n              {this.renderInput()}\n            </div>\n          ) : (\n            this.renderInput()\n          )}\n\n          {this.renderButton()}\n          {this.renderHelpText()}\n        </div>\n      </Host>\n    )\n  }\n}\n"],"version":3}
+{"file":"br-input.js","mappings":"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","names":["uuidv4"],"sources":["src/components/input/input.scss?tag=br-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/input/input.scss\";\n\n:host {\n  display: block;\n\n  .br-input .input-icon {\n    margin-top: 0.1em;\n    margin-left: var(--spacing-scale-base);\n  }\n\n  .br-input .input-icon + input {\n    padding-left: calc(var(--input-padding-icon) + 3px);\n  }\n}\n\n\n.br-input br-button {\n  float: right;\n  margin-right: var(--input-button-margin);\n  margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n  padding: 0;\n  position: relative;\n}\n\n  .button-transform{\n    transform: translateY(calc((var(--input-size) - 32px) * 0.5));\n  }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do campo de entrada.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) defaultID: string = `br-input-${uuidv4()}`\n\n  /**\n   * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n   * - 'color': Seletor de cor\n   * - 'email': Campo para e-mail\n   * - 'hidden': Campo oculto\n   * - 'password': Campo para senha\n   * - 'range': Controle deslizante\n   * - 'search': Campo de pesquisa\n   * - 'number': Campo para números\n   * - 'tel': Campo para números de telefone\n   * - 'text': Campo de texto padrão\n   * - 'url': Campo para URLs\n   */\n  @Prop({ reflect: true }) type:\n    | 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'url' = 'text'\n\n  /**\n   * Controla o comportamento de preenchimento automático do navegador para o input.\n   */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o input, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se verdadeiro, o input terá destaque visual.\n   */\n  @Prop({ reflect: true }) isHighlight: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n   */\n  @Prop({ reflect: true }) success: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação com erro.\n   */\n  @Prop({ reflect: true }) danger: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado informativo.\n   */\n  @Prop({ reflect: true }) info: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de alerta.\n   */\n  @Prop({ reflect: true }) warning: boolean = false\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Nome do input, utilizado para identificação em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /**\n   * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n   */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /**\n   * Valor inicial exibido no input.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /**\n   * Texto adicional que fornece ajuda ou informações sobre o input.\n   */\n  @Prop({ reflect: true }) helpText: string\n\n  @State() showIconTextPassword: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\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  }\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.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\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  }\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  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.hasActionSlot,\n      small: this.density === 'small',\n      large: this.density === 'large',\n      medium: this.density === 'medium',\n      'input-inline': this.isInline,\n      'input-highlight': this.isHighlight,\n      success: this.success,\n      danger: this.danger,\n      info: this.info,\n      warning: this.warning,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange!: EventEmitter<string>\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  private readonly renderLabel = () => {\n    if (this.label?.length > 0) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label class=\"text-nowrap\" htmlFor={this.defaultID}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.defaultID}>{this.label}</label>\n      }\n    }\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    input.type = input.type === 'password' ? 'text' : 'password'\n    this.showIconTextPassword = input.type === 'password'\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private readonly renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.defaultID}\n        autocomplete={this.autocomplete}\n        disabled={this.disabled}\n        onInput={this.handleInput}\n        placeholder={this.placeholder}\n        readonly={this.readonly}\n        required={this.required}\n        title={this.el.title}\n        type={this.type}\n        value={this.value}\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly renderHelpText = () => {\n    return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  private readonly renderIconPassword = () => {\n    const showPassword = !this.showIconTextPassword\n    return <br-icon icon-name={showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash'}></br-icon>\n  }\n\n  private renderIconSlot() {\n    if (this.hasSlotContent('icon')) {\n      return (\n        <div class=\"input-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n      )\n    }\n  }\n\n  private renderButton() {\n    if (this.type === 'password') {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          onClick={this.togglePasswordVisibility}\n        >\n          {this.renderIconPassword()}\n        </br-button>\n      )\n    } else if (this.hasSlotContent('action')) {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          // onClick={this.onIconAction}\n        >\n          <slot name=\"action\"></slot>\n        </br-button>\n      )\n    }\n    return null\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.hasIconSlot ? (\n            <div class=\"input-group\">\n              {this.renderIconSlot()}\n              {this.renderInput()}\n            </div>\n          ) : (\n            this.renderInput()\n          )}\n\n          {this.renderButton()}\n          {this.renderHelpText()}\n        </div>\n      </Host>\n    )\n  }\n}\n"],"version":3}