@govbr-ds/webcomponents 2.0.0-next.21 → 2.0.0-next.22

package/dist/collection/components/checkgroup/checkgroup.js

@@ -0,0 +1,197 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import { Host, h, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/utilitarios/js/checkgroup?tab=desenvolvedor).
+ *
+ * @slot default - Slot para adicionar os checkboxes que serão controlados pelo checkgroup.
+ */
+export class Checkgroup {
+    constructor() {
+        /**
+         * Contém o id gerado aleatoriamente
+         */
+        this.idDefault = `${uuidv4()}`;
+        this.inheritedAttributes = {};
+        this.handleAllCheckboxChange = () => {
+            var _a;
+            let checkListAll = Array.from(this.el.querySelectorAll('br-checkbox'));
+            checkListAll.forEach((item) => {
+                item.checked = this.checked;
+                item.indeterminate = false;
+            });
+            const parentCheckbox = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('br-checkbox');
+            if (parentCheckbox) {
+                parentCheckbox.indeterminate = false;
+            }
+        };
+        this.label = undefined;
+        this.labelSelecionado = 'Desselecionar tudo';
+        this.labelDesselecionado = 'Selecionar tudo';
+        this.indeterminate = false;
+        this.checked = false;
+        this.isIndeterminate = false;
+    }
+    componentWillLoad() {
+        this.isIndeterminate = this.el.hasAttribute('indeterminate');
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.updateGroupState();
+    }
+    getCssClassMap() {
+        return {
+            'br-checkgroup': true,
+        };
+    }
+    handleChange(event) {
+        const target = event.target;
+        if (this.isParentCheckbox(target)) {
+            this.checked = !this.checked;
+            this.handleAllCheckboxChange();
+        }
+        else {
+            this.updateGroupState();
+        }
+    }
+    isParentCheckbox(target) {
+        var _a;
+        return target === ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('br-checkbox'));
+    }
+    updateGroupState() {
+        const checkListAll = Array.from(this.el.querySelectorAll('br-checkbox'));
+        const allChecked = checkListAll.every((item) => item.checked);
+        const noneChecked = checkListAll.every((item) => !item.checked);
+        if (allChecked) {
+            this.checked = true;
+            this.isIndeterminate = false;
+        }
+        else if (noneChecked) {
+            this.checked = false;
+            this.isIndeterminate = false;
+        }
+        else {
+            this.checked = false;
+            this.isIndeterminate = true;
+        }
+    }
+    render() {
+        return (h(Host, { key: '7edcada2c8dc6074bc8c911960d8f4d1ce765683' }, h("div", Object.assign({ key: 'e7abe8ed6ca4b49869212ece845c13576b38e702', class: this.getCssClassMap() }, this.inheritedAttributes, { style: { width: '100%' } }), this.label && h("label", { key: '6b95576472b6ab7bce56f6419acb944d681acc1b' }, this.label), h("div", { key: 'a55f84bc3119d4cfebba10ab142e4e1a4833c544', class: "mb-1" }, h("div", { key: 'b60382c83b410da74a38b4bca95b5cedea31245b', class: "checkgroup-example" }, h("br-checkbox", { key: '72a2054e69dcb6b99cd2ff0e04023ba449ac52e2', name: `checkgroup-${this.idDefault}`, checked: this.checked, indeterminate: this.isIndeterminate, label: this.checked ? this.labelDesselecionado : this.labelSelecionado, "aria-label": this.checked ? this.labelDesselecionado : this.labelSelecionado, onBrDidCheckedChange: this.handleChange.bind(this) }))), h("div", { key: '60e166d6caab796fe0fbf22d1bdfb296ff8bad28', class: "mb-1 ml-2" }, h("slot", { key: '21355b734eedc5a9818b4bd1ac8e310450c8c017' })))));
+    }
+    static get is() { return "br-checkgroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkgroup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkgroup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto descritivo do grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelSelecionado": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o texto do label quando o checkbox est\u00E1 marcado."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-selecionado",
+                "reflect": true,
+                "defaultValue": "'Desselecionar tudo'"
+            },
+            "labelDesselecionado": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o texto do label quando o checkbox est\u00E1 desmarcado."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-desselecionado",
+                "reflect": true,
+                "defaultValue": "'Selecionar tudo'"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado intermedi\u00E1rio do checkbox.\nSe definido como verdadeiro, o checkbox exibir\u00E1 um estado intermedi\u00E1rio, que \u00E9 um estado visual que indica que a op\u00E7\u00E3o est\u00E1 parcialmente selecionada.\nEste estado \u00E9 \u00FAtil quando o checkbox faz parte de um grupo com sele\u00E7\u00E3o parcial."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indeterminate",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checked": {},
+            "isIndeterminate": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "brDidCheckedChange",
+                "method": "handleChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=checkgroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkgroup.js","sourceRoot":"","sources":["../../../src/components/checkgroup/checkgroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Host,\n  h,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid';\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/utilitarios/js/checkgroup?tab=desenvolvedor).\n *\n * @slot default - Slot para adicionar os checkboxes que serão controlados pelo checkgroup.\n */\n@Component({\n  tag: 'br-checkgroup',\n  styleUrl: 'checkgroup.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkgroup {\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: HTMLBrCheckgroupElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Texto descritivo do grupo.\n   */\n  @Prop() label: string\n\n  /**\n   * Define o texto do label quando o checkbox está marcado.\n   */\n  @Prop({ reflect: true }) labelSelecionado: string = 'Desselecionar tudo'\n\n  /**\n   * Define o texto do label quando o checkbox está desmarcado.\n   */\n  @Prop({ reflect: true }) labelDesselecionado: string = 'Selecionar tudo'\n\n  /**\n   * Define o estado intermediário do checkbox.\n   * Se definido como verdadeiro, o checkbox exibirá um estado intermediário, que é um estado visual que indica que a opção está parcialmente selecionada.\n   * Este estado é útil quando o checkbox faz parte de um grupo com seleção parcial.\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false\n\n  /**\n   * Contém o id gerado aleatoriamente\n   */\n    private readonly idDefault = `${uuidv4()}`\n\n  /**\n   * Define o estado de seleção do checkbox.\n   * Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.\n   */\n  @State() checked: boolean = false\n\n  /**\n   * Indica se o grupo de checkboxes está indeterminado\n   */\n  @State() isIndeterminate: boolean = false\n\n  componentWillLoad() {\n    this.isIndeterminate = this.el.hasAttribute('indeterminate')\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n\n    this.updateGroupState();\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-checkgroup': true,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  @Listen('brDidCheckedChange', {\n    target: 'document',\n  })\n  handleChange(event: Event) {\n\n    const target = event.target as HTMLBrCheckboxElement;\n\n    if (this.isParentCheckbox(target)) {\n      this.checked = !this.checked;\n      this.handleAllCheckboxChange();\n    } else {\n      this.updateGroupState();\n    }\n  }\n\n  private isParentCheckbox(target: HTMLBrCheckboxElement): boolean {\n    return target === this.el.shadowRoot?.querySelector('br-checkbox');\n  }\n\n  private readonly handleAllCheckboxChange = () => {\n    let checkListAll = Array.from(this.el.querySelectorAll('br-checkbox'));\n\n    checkListAll.forEach((item) => {\n      item.checked = this.checked;\n      item.indeterminate = false;\n    });\n\n    const parentCheckbox = this.el.shadowRoot?.querySelector('br-checkbox');\n    if (parentCheckbox) {\n      parentCheckbox.indeterminate = false;\n    }\n  }\n\n  private updateGroupState() {\n    const checkListAll = Array.from(this.el.querySelectorAll('br-checkbox'));\n    const allChecked = checkListAll.every((item) => item.checked);\n    const noneChecked = checkListAll.every((item) => !item.checked);\n\n    if (allChecked) {\n      this.checked = true;\n      this.isIndeterminate = false;\n    } else if (noneChecked) {\n      this.checked = false;\n      this.isIndeterminate = false;\n    } else {\n      this.checked = false;\n      this.isIndeterminate = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.getCssClassMap()}\n          {...this.inheritedAttributes}\n          style={{ width: '100%' }}\n        >\n          {this.label && <label>{this.label}</label>}\n          <div class=\"mb-1\">\n            <div class=\"checkgroup-example\">\n              <br-checkbox\n                name={`checkgroup-${this.idDefault}`}\n                checked={this.checked}\n                indeterminate={this.isIndeterminate}\n                label={this.checked ? this.labelDesselecionado : this.labelSelecionado}\n                aria-label={this.checked ? this.labelDesselecionado : this.labelSelecionado}\n                onBrDidCheckedChange={this.handleChange.bind(this)}\n              ></br-checkbox>\n            </div>\n          </div>\n          <div class=\"mb-1 ml-2\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.css

@@ -213,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -221,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }

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

@@ -74,7 +74,7 @@ export class Dropdown {
         return { isOpen: this.isOpen }; // Retorna o novo estado
     }
     render() {
-        return (h(Host, { key: '5a14d5ee59bb7b245085cac751c6b3ca2964c313', "is-open": this.isOpen }, h("div", Object.assign({ key: '7e1ef66474efe1fc9916cfcd623520d6dd6a4cd6', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'e7e75bde235c6ee16eca052733b0183842a6d0fd', id: "trigger", onClick: this.toggle, "aria-controls": "target", "aria-haspopup": "true", "aria-expanded": this.isOpen }, h("slot", { key: 'dfd29202462c590e31c302a1a6c73aa5013e6d4d', name: "trigger" })), h("div", { key: '6481087ab2204e956e526049ecb8702a6f2c6c49', id: "target", "aria-hidden": !this.isOpen }, h("slot", { key: 'fd4b9c9f029b45f0c5b5fafb4803421e959fa6fd', name: "target" })))));
+        return (h(Host, { key: '1f9920cb3da62d43e35c0cc5fd25f1cf66a0d04c', "is-open": this.isOpen }, h("div", Object.assign({ key: '255b9239a88e3aade90175e14a4a60f36d6f2e5f', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: '3dd1404997a97f9357ec5aca71a98b95c52ad1b2', id: "trigger", onClick: this.toggle, "aria-controls": "target", "aria-haspopup": "true", "aria-expanded": this.isOpen }, h("slot", { key: '585d766af3334d6ceb58e7f31e93fb748a52e3ac', name: "trigger" })), h("div", { key: '21eecf44f455e9d67081633d70dcdd790e9e2cd2', id: "target", "aria-hidden": !this.isOpen }, h("slot", { key: 'e506ff60614dabc87a953a9bf9d35ba4b048845f', name: "target" })))));
     }
     static get is() { return "br-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -105,6 +105,8 @@ export class Dropdown {
                     "tags": [],
                     "text": "Indica se o dropdown est\u00E1 aberto ou fechado.\nEsta propriedade \u00E9 refletida no DOM e pode ser alterada externamente.\nO valor padr\u00E3o \u00E9 falso (fechado)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-open",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACtH,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;;GAKG;AAOH,MAAM,OAAO,QAAQ;;QAgDnB;;WAEG;QACc,WAAM,GAAG,CAAC,KAAY,EAAE,EAAE;YACzC,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAA;QAC5B,CAAC,CAAA;QAsCO,wBAAmB,GAAe,EAAE,CAAA;sBA9Ec,KAAK;;IAE/D;;;OAGG;IAEH,aAAa;QACX,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IAC1D,CAAC;IAED,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAOO,cAAc;QACpB,OAAO;YACL,aAAa,EAAE,IAAI;SACpB,CAAA;IACH,CAAC;IAUD;;;;OAIG;IACK,cAAc,CAAC,KAAiB;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QAEnE,IAAI,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,IAAI,EAAE,CAAA;QACb,CAAC;IACH,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QAClB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA,CAAC,wBAAwB;IACzD,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA,CAAC,wBAAwB;IACzD,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,gEAAU,IAAI,CAAC,MAAM;YACxB,0EAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB;gBAC7D,4DACE,EAAE,EAAC,SAAS,EACZ,OAAO,EAAE,IAAI,CAAC,MAAM,mBACN,QAAQ,mBACR,MAAM,mBACL,IAAI,CAAC,MAAM;oBAE1B,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;gBACN,4DAAK,EAAE,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,MAAM;oBACxC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  connectedCallback() {\n    document.addEventListener('click', this.onClickOutside.bind(this))\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.onClickOutside.bind(this))\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,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACtH,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;;GAKG;AAOH,MAAM,OAAO,QAAQ;;QAgDnB;;WAEG;QACc,WAAM,GAAG,CAAC,KAAY,EAAE,EAAE;YACzC,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAA;QAC5B,CAAC,CAAA;QAsCO,wBAAmB,GAAe,EAAE,CAAA;sBA9Ec,KAAK;;IAE/D;;;OAGG;IAEH,aAAa;QACX,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IAC1D,CAAC;IAED,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAOO,cAAc;QACpB,OAAO;YACL,aAAa,EAAE,IAAI;SACpB,CAAA;IACH,CAAC;IAUD;;;;OAIG;IACK,cAAc,CAAC,KAAiB;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QAEnE,IAAI,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,IAAI,EAAE,CAAA;QACb,CAAC;IACH,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QAClB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA,CAAC,wBAAwB;IACzD,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA,CAAC,wBAAwB;IACzD,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,gEAAU,IAAI,CAAC,MAAM;YACxB,0EAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB;gBAC7D,4DACE,EAAE,EAAC,SAAS,EACZ,OAAO,EAAE,IAAI,CAAC,MAAM,mBACN,QAAQ,mBACR,MAAM,mBACL,IAAI,CAAC,MAAM;oBAE1B,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;gBACN,4DAAK,EAAE,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,MAAM;oBACxC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  connectedCallback() {\n    document.addEventListener('click', this.onClickOutside.bind(this))\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.onClickOutside.bind(this))\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

@@ -213,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -221,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }

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

@@ -31,7 +31,7 @@ export class Icon {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     render() {
-        return (h(Host, { key: '4e061bbb7aabb1fa8820a44cfa570e3372ec6d1b' }, h("iconify-icon", Object.assign({ key: '14ea56661308b88bbc72c280facae0963b18cd30', flip: this.flip, width: this.width, class: this.cssClasses, icon: this.iconName, inline: this.isInline, height: this.height, rotate: this.rotate }, this.inheritedAttributes))));
+        return (h(Host, { key: '8f8bfea88c86a9b917adf9921f95a3eb7b58a8ab' }, h("iconify-icon", Object.assign({ key: 'ec5a2e4483d871624730e48b63d323617863d821', 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"; }
@@ -61,6 +61,8 @@ export class Icon {
                     "tags": [],
                     "text": "Nome do \u00EDcone a ser exibido, utilizando a biblioteca Iconify.\nEste nome deve corresponder ao nome do \u00EDcone definido na biblioteca para que ele seja exibido corretamente."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-name",
                 "reflect": true
             },
@@ -78,6 +80,8 @@ export class Icon {
                     "tags": [],
                     "text": "Define a altura do \u00EDcone. Pode ser especificada em qualquer unidade CSS v\u00E1lida, como pixels (px), ems (em), rems (rem), etc.\nO valor padr\u00E3o \u00E9 '16'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "height",
                 "reflect": true,
                 "defaultValue": "'16'"
@@ -96,6 +100,8 @@ export class Icon {
                     "tags": [],
                     "text": "Define a largura do \u00EDcone. Pode ser especificada em qualquer unidade CSS v\u00E1lida, como pixels (px), ems (em), rems (rem), etc.\nO valor padr\u00E3o \u00E9 '24'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "width",
                 "reflect": true,
                 "defaultValue": "'24'"
@@ -114,6 +120,8 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "css-classes",
                 "reflect": true
             },
@@ -131,6 +139,8 @@ export class Icon {
                     "tags": [],
                     "text": "Se definido como verdadeiro, o \u00EDcone ser\u00E1 alinhado verticalmente ao texto ao seu redor.\n\u00DAtil quando o \u00EDcone \u00E9 usado em linha com texto para garantir que esteja alinhado corretamente com o texto.\nO valor padr\u00E3o \u00E9 `false`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-inline",
                 "reflect": true,
                 "defaultValue": "false"
@@ -149,6 +159,8 @@ export class Icon {
                     "tags": [],
                     "text": "Define o \u00E2ngulo de rota\u00E7\u00E3o do \u00EDcone.\nAceita valores como \"90deg\", \"180deg\" e \"270deg\" para rotacionar o \u00EDcone em diferentes \u00E2ngulos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rotate",
                 "reflect": true
             },
@@ -166,6 +178,8 @@ export class Icon {
                     "tags": [],
                     "text": "Define o tipo de espelhamento do \u00EDcone.\nAceita valores como \"horizontal\" para espelhar o \u00EDcone horizontalmente, \"vertical\" para espelhar verticalmente, ou ambos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "flip",
                 "reflect": true
             }

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,cAAc,CAAA;AACrB,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAEpF;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,IAAI;;QAkDP,wBAAmB,GAAe,EAAE,CAAA;;sBAjCF,IAAI;qBAML,IAAI;;wBAaC,KAAK;;;;IAgBnD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mFACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,IACf,IAAI,CAAC,mBAAmB,EACd,CACX,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport 'iconify-icon'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\n\n/**\n * O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.\n * Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.\n *\n * Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone\n * deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para\n * integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário\n * e a clareza das interfaces.\n *\n * Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).\n */\n@Component({\n  tag: 'br-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\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: HTMLBrIconElement\n\n  /**\n   * Nome do ícone a ser exibido, utilizando a biblioteca Iconify.\n   * Este nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente.\n   */\n  @Prop({ reflect: true }) iconName: string\n\n  /**\n   * Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '16'.\n   */\n  @Prop({ reflect: true }) height: string = '16'\n\n  /**\n   * Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '24'.\n   */\n  @Prop({ reflect: true }) width: string = '24'\n\n  /**\n   * Permite adicionar classes CSS adicionais ao ícone.\n   * Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.\n   */\n  @Prop({ reflect: true }) cssClasses?: string\n\n  /**\n   * Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor.\n   * Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto.\n   * O valor padrão é `false`.\n   */\n  @Prop({ reflect: true }) isInline?: boolean = false\n\n  /**\n   * Define o ângulo de rotação do ícone.\n   * Aceita valores como \"90deg\", \"180deg\" e \"270deg\" para rotacionar o ícone em diferentes ângulos.\n   */\n  @Prop({ reflect: true }) rotate?: '90deg' | '180deg' | '270deg'\n\n  /**\n   * Define o tipo de espelhamento do ícone.\n   * Aceita valores como \"horizontal\" para espelhar o ícone horizontalmente, \"vertical\" para espelhar verticalmente, ou ambos.\n   */\n  @Prop({ reflect: true }) flip?: 'horizontal' | 'vertical'\n\n  private inheritedAttributes: Attributes = {}\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  render() {\n    return (\n      <Host>\n        <iconify-icon\n          flip={this.flip}\n          width={this.width}\n          class={this.cssClasses}\n          icon={this.iconName}\n          inline={this.isInline}\n          height={this.height}\n          rotate={this.rotate}\n          {...this.inheritedAttributes}\n        ></iconify-icon>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,cAAc,CAAA;AACrB,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAEpF;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,IAAI;;QAkDP,wBAAmB,GAAe,EAAE,CAAA;;sBAjCF,IAAI;qBAML,IAAI;;wBAaC,KAAK;;;;IAgBnD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mFACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,IACf,IAAI,CAAC,mBAAmB,EACd,CACX,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport 'iconify-icon'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\n\n/**\n * O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.\n * Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.\n *\n * Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone\n * deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para\n * integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário\n * e a clareza das interfaces.\n *\n * Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).\n */\n@Component({\n  tag: 'br-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\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: HTMLBrIconElement\n\n  /**\n   * Nome do ícone a ser exibido, utilizando a biblioteca Iconify.\n   * Este nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente.\n   */\n  @Prop({ reflect: true }) iconName: string\n\n  /**\n   * Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '16'.\n   */\n  @Prop({ reflect: true }) height: string = '16'\n\n  /**\n   * Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '24'.\n   */\n  @Prop({ reflect: true }) width: string = '24'\n\n  /**\n   * Permite adicionar classes CSS adicionais ao ícone.\n   * Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.\n   */\n  @Prop({ reflect: true }) cssClasses?: string\n\n  /**\n   * Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor.\n   * Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto.\n   * O valor padrão é `false`.\n   */\n  @Prop({ reflect: true }) isInline?: boolean = false\n\n  /**\n   * Define o ângulo de rotação do ícone.\n   * Aceita valores como \"90deg\", \"180deg\" e \"270deg\" para rotacionar o ícone em diferentes ângulos.\n   */\n  @Prop({ reflect: true }) rotate?: '90deg' | '180deg' | '270deg'\n\n  /**\n   * Define o tipo de espelhamento do ícone.\n   * Aceita valores como \"horizontal\" para espelhar o ícone horizontalmente, \"vertical\" para espelhar verticalmente, ou ambos.\n   */\n  @Prop({ reflect: true }) flip?: 'horizontal' | 'vertical'\n\n  private inheritedAttributes: Attributes = {}\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  render() {\n    return (\n      <Host>\n        <iconify-icon\n          flip={this.flip}\n          width={this.width}\n          class={this.cssClasses}\n          icon={this.iconName}\n          inline={this.isInline}\n          height={this.height}\n          rotate={this.rotate}\n          {...this.inheritedAttributes}\n        ></iconify-icon>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/input/input.css

@@ -213,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -221,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }

package/dist/collection/components/input/input.js

@@ -129,7 +129,7 @@ export class Input {
         return null;
     }
     render() {
-        return (h(Host, { key: 'd5e8fec1c09589e9c9e9aa206b3c1669ef1f04f8' }, h("div", { key: '431430f8d91e3086b114d4bc7fa3b43e9b5b9eab', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent())));
+        return (h(Host, { key: '7db54be8c6f64d73126cff434d407895f20e2075' }, h("div", { key: '9448cee18e6c87443ffb0dd67cbaf60d5539a11d', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent())));
     }
     static get is() { return "br-input"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +160,8 @@ export class Input {
                     "tags": [],
                     "text": "Identificador \u00FAnico do input.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "id",
                 "reflect": true,
                 "defaultValue": "`br-input-${uuidv4()}`"
@@ -178,6 +180,8 @@ export class Input {
                     "tags": [],
                     "text": "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\u00FAmeros\n- 'tel': Campo para n\u00FAmeros de telefone\n- 'text': Campo de texto padr\u00E3o\n- 'url': Campo para URLs"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'text'"
@@ -196,6 +200,8 @@ export class Input {
                     "tags": [],
                     "text": "Controla o comportamento de preenchimento autom\u00E1tico do navegador para o input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocomplete",
                 "reflect": true
             },
@@ -213,6 +219,8 @@ export class Input {
                     "tags": [],
                     "text": "Ajusta a densidade, alterando o espa\u00E7amento interno para um visual mais compacto ou mais expandido."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "density",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -231,6 +239,8 @@ export class Input {
                     "tags": [],
                     "text": "Desativa o input, tornando-o n\u00E3o interativo."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -249,6 +259,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, o r\u00F3tulo e o input estar\u00E3o na mesma linha (layout inline)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-inline",
                 "reflect": true,
                 "defaultValue": "false"
@@ -267,6 +279,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, o input ter\u00E1 destaque visual."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-highlight",
                 "reflect": true,
                 "defaultValue": "false"
@@ -285,6 +299,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o estado do input\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "state",
                 "reflect": true
             },
@@ -302,6 +318,8 @@ export class Input {
                     "tags": [],
                     "text": "Texto exibido como r\u00F3tulo do input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true
             },
@@ -319,6 +337,8 @@ export class Input {
                     "tags": [],
                     "text": "Nome do input, utilizado para identifica\u00E7\u00E3o em formul\u00E1rios."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -336,6 +356,8 @@ export class Input {
                     "tags": [],
                     "text": "Texto exibido dentro do input quando est\u00E1 vazio, fornecendo uma dica ou sugest\u00E3o ao usu\u00E1rio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -353,6 +375,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, o valor do input \u00E9 exibido, mas n\u00E3o pode ser editado pelo usu\u00E1rio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": true,
                 "defaultValue": "false"
@@ -371,6 +395,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, o input \u00E9 obrigat\u00F3rio e deve ser preenchido antes que o formul\u00E1rio possa ser enviado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
@@ -389,6 +415,8 @@ export class Input {
                     "tags": [],
                     "text": "Valor inicial exibido no input.\nPode ser alterado pelo usu\u00E1rio se a propriedade `readonly` n\u00E3o estiver ativa."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             },
@@ -406,6 +434,8 @@ export class Input {
                     "tags": [],
                     "text": "Texto adicional que fornece ajuda ou informa\u00E7\u00F5es sobre o input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "help-text",
                 "reflect": true
             },
@@ -423,6 +453,8 @@ export class Input {
                     "tags": [],
                     "text": "Controla a corre\u00E7\u00E3o autom\u00E1tica do texto."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocorrect",
                 "reflect": true,
                 "defaultValue": "'off'"
@@ -441,6 +473,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o valor m\u00EDnimo para campos de entrada num\u00E9ricos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": true
             },
@@ -458,6 +492,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o valor m\u00E1ximo para campos de entrada num\u00E9ricos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": true
             },
@@ -475,6 +511,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o comprimento m\u00EDnimo do valor do campo de entrada."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "minlength",
                 "reflect": true
             },
@@ -492,6 +530,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o comprimento m\u00E1ximo do valor do campo de entrada."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "maxlength",
                 "reflect": true
             },
@@ -509,6 +549,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, permite a sele\u00E7\u00E3o de m\u00FAltiplos arquivos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": true,
                 "defaultValue": "false"
@@ -527,6 +569,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o padr\u00E3o de entrada para valida\u00E7\u00E3o."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "pattern",
                 "reflect": true
             },
@@ -544,6 +588,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o valor do passo para campos de entrada num\u00E9ricos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step",
                 "reflect": true
             }