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

package/dist/collection/components/list/list.js

@@ -0,0 +1,383 @@
+import { Host, h } from "@stencil/core";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+/**
+* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/list?tab=designer).
+*
+* @slot default - Slot padrão para inclusão dos itens da lista.
+* @slot header - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).
+*/
+export class List {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.renderHeader = () => {
+            if (this.listTitle || this.hasSlotContent('header')) {
+                return (h("div", { class: "header" }, this.listTitle && (h("div", { class: "title" }, this.listTitle)), this.hasSlotContent('header') && (h("div", { class: "d-flex" }, h("slot", { name: "header" })))));
+            }
+            return null;
+        };
+        this.listTitle = undefined;
+        this.isHorizontal = false;
+        this.hideHeaderDivider = false;
+    }
+    connectedCallback() {
+        this.brDidConnect.emit();
+    }
+    componentWillLoad() {
+        this.brWillLoad.emit();
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    componentDidLoad() {
+        if (this.isHorizontal) {
+            const slotItems = Array.from(this.el.querySelectorAll('br-item'));
+            slotItems.forEach((item) => {
+                const nextElement = item.nextElementSibling;
+                if (nextElement === null || nextElement === void 0 ? void 0 : nextElement.classList.contains('br-divider')) {
+                    const divider = nextElement;
+                    divider.style.borderWidth = '0 1px 0 0';
+                    divider.style.width = '1px';
+                }
+            });
+        }
+        const items = Array.from(this.el.querySelectorAll('br-item'));
+        items.forEach((item) => {
+            item.setAttribute('role', 'listitem');
+        });
+        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();
+    }
+    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-list': true,
+            'horizontal': this.isHorizontal
+        };
+    }
+    hasSlotContent(slotName) {
+        return !!this.el.querySelector(`[slot="${slotName}"]`);
+    }
+    renderDivider() {
+        if ((this.listTitle || this.hasSlotContent('header')) && !this.hideHeaderDivider) {
+            return h("div", { class: "br-divider" });
+        }
+        return null;
+    }
+    render() {
+        return (h(Host, { key: '8a455944df84292a69b3ad4c6a2500b64e78de98' }, h("div", Object.assign({ key: '4098c4f688290e035aa3775df06a6885d058b55c', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "list" }), this.renderHeader(), this.renderDivider(), h("slot", { key: '1358811266e52513572441a0f0039bd16ac35afd' }))));
+    }
+    static get is() { return "br-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "listTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o t\u00EDtulo para a lista."
+                },
+                "attribute": "list-title",
+                "reflect": true
+            },
+            "isHorizontal": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se a lista ser\u00E1 horizontal. Por padr\u00E3o, a lista \u00E9 vertical."
+                },
+                "attribute": "is-horizontal",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hideHeaderDivider": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica que o divider para o t\u00EDtulo da lista estar\u00E1 oculto."
+                },
+                "attribute": "hide-header-divider",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidConnect",
+                "name": "brDidConnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o componente \u00E9 conectado ao DOM.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWillLoad",
+                "name": "brWillLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes que o componente seja carregado pela primeira vez.\nUtilize este evento para realizar tarefas de inicializa\u00E7\u00E3o antes do componente ser exibido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidLoad",
+                "name": "brDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido carregado pela primeira vez.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer depois que o componente foi totalmente carregado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWillRender",
+                "name": "brWillRender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes do componente ser renderizado.\nUtilize este evento para preparar o componente antes de sua renderiza\u00E7\u00E3o.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidRender",
+                "name": "brDidRender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido renderizado.\nUtilize este evento para executar a\u00E7\u00F5es que devem ocorrer ap\u00F3s a renderiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brShouldUpdate",
+                "name": "brShouldUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento para indicar se o componente deve ser atualizado ou n\u00E3o.\nEste evento \u00E9 chamado antes de qualquer atualiza\u00E7\u00E3o do componente para decidir se a atualiza\u00E7\u00E3o deve prosseguir.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWillUpdate",
+                "name": "brWillUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes de o componente ser atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es preparat\u00F3rias antes da atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidUpdate",
+                "name": "brDidUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es ap\u00F3s a atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidDisconnect",
+                "name": "brDidDisconnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o componente \u00E9 desconectado do DOM.\nUtilize este evento para realizar a limpeza ou outras a\u00E7\u00F5es necess\u00E1rias quando o componente \u00E9 removido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormAssociatedCallback",
+                "name": "brFormAssociatedCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "form - Dados do formul\u00E1rio associado."
+                        }],
+                    "text": "Emite um evento quando o componente \u00E9 associado ou removido de um `<form>`.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "FormData",
+                    "resolved": "FormData",
+                    "references": {
+                        "FormData": {
+                            "location": "global",
+                            "id": "global::FormData"
+                        }
+                    }
+                }
+            }, {
+                "method": "brFormDisabledCallback",
+                "name": "brFormDisabledCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "disabled - Novo estado `disabled` do componente dentro do formul\u00E1rio."
+                        }],
+                    "text": "Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informa\u00E7\u00F5es."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormResetCallback",
+                "name": "brFormResetCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando um `<form>` \u00E9 resetado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormStateRestoreCallback",
+                "name": "brFormStateRestoreCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "state - Estado restaurado do formul\u00E1rio."
+                        }, {
+                            "name": "param",
+                            "text": "_mode - Modo de preenchimento autom\u00E1tico do navegador."
+                        }],
+                    "text": "Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informa\u00E7\u00F5es."
+                },
+                "complexType": {
+                    "original": "[state: string, _mode: string]",
+                    "resolved": "[state: string, _mode: string]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACvG,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;;EAKE;AAOF,MAAM,OAAO,IAAI;;QAsLP,wBAAmB,GAAe,EAAE,CAAA;QAK5C,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACpD,OAAO,CACL,WAAK,KAAK,EAAC,QAAQ;oBAChB,IAAI,CAAC,SAAS,IAAI,CACjB,WAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,SAAS,CACX,CACP;oBACA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAChC,WAAK,KAAK,EAAC,QAAQ;wBACjB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACP,CACG,CACP,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAA;;4BA5L+D,KAAK;iCAKA,KAAK;;IAO1E,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAQD,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;YAElE,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACzB,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBAC5C,IAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;oBAClD,MAAM,OAAO,GAAG,WAA0B,CAAC;oBAC3C,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;oBACxC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;gBAC9B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;QAC9D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IASD,sBAAsB,CAAC,IAAc;QACnC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1C,CAAC;IASD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC5C,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAA;IACjC,CAAC;IAUD,wBAAwB,CAAC,KAAa,EAAE,KAAa;QACnD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IACtD,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAA;IACH,CAAC;IAIO,cAAc,CAAC,QAAgB;QACrC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAA;IACxD,CAAC;IAqBD,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAClF,OAAO,WAAK,KAAK,EAAC,YAAY,GAAO,CAAC;QACxC,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0EAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB,IAAE,IAAI,EAAC,MAAM;gBACzE,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,aAAa,EAAE;gBACrB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, 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/list?tab=designer).\n*\n* @slot default - Slot padrão para inclusão dos itens da lista.\n* @slot header - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).\n*/\n@Component({\n  tag: 'br-list',\n  styleUrl: 'list.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class List {\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  * Define o título para a lista.\n  */\n  @Prop({ reflect: true }) listTitle: string\n\n  /**\n  * Indica se a lista será horizontal. Por padrão, a lista é vertical.\n  */\n  @Prop({ reflect: true, mutable: true }) isHorizontal: boolean = false;\n\n  /**\n  * Indica que o divider para o título da lista estará oculto.\n  */\n  @Prop({ reflect: true, mutable: true }) hideHeaderDivider: 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.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    if (this.isHorizontal) {\n      const slotItems = Array.from(this.el.querySelectorAll('br-item'));\n\n      slotItems.forEach((item) => {\n        const nextElement = item.nextElementSibling;\n        if (nextElement?.classList.contains('br-divider')) {\n          const divider = nextElement as HTMLElement;\n          divider.style.borderWidth = '0 1px 0 0';\n          divider.style.width = '1px';\n        }\n      });\n    }\n\n    const items = Array.from(this.el.querySelectorAll('br-item'));\n    items.forEach((item) => {\n      item.setAttribute('role', 'listitem');\n    });\n\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 getCssClassMap(): CssClassMap {\n    return {\n      'br-list': true,\n      'horizontal': this.isHorizontal\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private hasSlotContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`)\n  }\n  renderHeader = () => {\n    if (this.listTitle || this.hasSlotContent('header')) {\n      return (\n        <div class=\"header\">\n          {this.listTitle && (\n            <div class=\"title\">\n              {this.listTitle}\n            </div>\n          )}\n          {this.hasSlotContent('header') && (\n            <div class=\"d-flex\">\n              <slot name=\"header\"></slot>\n            </div>\n          )}\n        </div>\n      );\n    }\n    return null;\n  }\n\n  renderDivider() {\n    if ((this.listTitle || this.hasSlotContent('header') ) && !this.hideHeaderDivider) {\n      return <div class=\"br-divider\"></div>;\n    }\n    return null;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"list\">\n          {this.renderHeader()}\n          {this.renderDivider()}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/loading/loading.css

@@ -115,6 +115,30 @@ progress {
   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;
@@ -155,6 +179,16 @@ progress {
 .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);

package/dist/collection/components/loading/loading.js

@@ -46,7 +46,7 @@ export class Loading {
         };
     }
     render() {
-        return (h(Host, { key: '66a1366c13b4d572e1de48f93bfd882d136e3e17' }, this.isProgress ? (h("div", Object.assign({}, this.inheritedAttributes, { class: this.getCssClassMap(), role: "progressbar", "data-progress": this.progressPercent, "aria-label": "Carregando exemplo com porcentagem", "aria-valuemin": "0", "aria-valuenow": this.progressPercent, "aria-valuemax": "100" }), h("div", { class: "br-loading-mask full" }, h("div", { class: "br-loading-fill" })), h("div", { class: "br-loading-mask" }, h("div", { class: "br-loading-fill" })))) : (h("div", { class: "loading-progress-alignment" }, h("div", { class: this.getCssClassMap(), role: "progressbar", "aria-label": "Carregando exemplo indeterminado pequeno" }), h("span", { class: "rotulo" }, this.label)))));
+        return (h(Host, { key: 'c1e9b7535b5ee4c293dd6b0985359d741966d987' }, this.isProgress ? (h("div", Object.assign({}, this.inheritedAttributes, { class: this.getCssClassMap(), role: "progressbar", "data-progress": this.progressPercent, "aria-label": "Carregando exemplo com porcentagem", "aria-valuemin": "0", "aria-valuenow": this.progressPercent, "aria-valuemax": "100" }), h("div", { class: "br-loading-mask full" }, h("div", { class: "br-loading-fill" })), h("div", { class: "br-loading-mask" }, h("div", { class: "br-loading-fill" })))) : (h("div", { class: "loading-progress-alignment" }, h("div", { class: this.getCssClassMap(), role: "progressbar", "aria-label": "Carregando exemplo indeterminado pequeno" }), h("span", { class: "rotulo" }, this.label)))));
     }
     static get is() { return "br-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/message.css

@@ -115,6 +115,30 @@ progress {
   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;
@@ -155,6 +179,16 @@ progress {
 .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);

package/dist/collection/components/message/message.js

@@ -64,7 +64,7 @@ export class Message {
         };
     }
     render() {
-        return (h(Host, { key: '907d3fdd67a557e7ceb80ebd35ba0c49e82f182c' }, this.isFeedback ? (h("div", { class: "mb-3" }, h("span", Object.assign({ class: `feedback ${this.state}`, role: "alert" }, this.inheritedAttributes), this.showIcon ? h("br-icon", { class: "icon-space", "icon-name": this.checkIconState() }) : null, !this.message ? h("slot", null) : this.message))) : (h("div", Object.assign({ class: this.getCssClassMap(), role: "alert" }, this.inheritedAttributes), this.showIcon && (h("div", { class: "icon" }, h("br-icon", { "icon-name": this.checkIconState(), height: "20", "aria-hidden": "true" }))), h("div", { class: "content", role: "alert" }, !this.message ? (h("div", null, this.messageTitle && h("strong", null, this.messageTitle), this.messageTitle && !this.isInline && h("br", null), h("slot", null))) : (h("div", null, h("span", { class: "message-title mr-1" }, this.messageTitle), h("span", { class: "message-body" }, this.message)))), this.isClosable && !this.isFeedback && (h("div", { class: "close" }, h("br-button", { shape: "circle", type: "button", "aria-label": "Fechar a mensagem", onClick: () => this.dismissHandler() }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" }))))))));
+        return (h(Host, { key: '70cc50ddc65eebdb94bf1876e1e6861381d6550c' }, this.isFeedback ? (h("div", { class: "mb-3" }, h("span", Object.assign({ class: `feedback ${this.state}`, role: "alert" }, this.inheritedAttributes), this.showIcon ? h("br-icon", { class: "icon-space", "icon-name": this.checkIconState() }) : null, !this.message ? h("slot", null) : this.message))) : (h("div", Object.assign({ class: this.getCssClassMap(), role: "alert" }, this.inheritedAttributes), this.showIcon && (h("div", { class: "icon" }, h("br-icon", { "icon-name": this.checkIconState(), height: "20", "aria-hidden": "true" }))), h("div", { class: "content", role: "alert" }, !this.message ? (h("div", null, this.messageTitle && h("strong", null, this.messageTitle), this.messageTitle && !this.isInline && h("br", null), h("slot", null))) : (h("div", null, h("span", { class: "message-title mr-1" }, this.messageTitle), h("span", { class: "message-body" }, this.message)))), this.isClosable && !this.isFeedback && (h("div", { class: "close" }, h("br-button", { shape: "circle", type: "button", "aria-label": "Fechar a mensagem", onClick: () => this.dismissHandler() }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" }))))))));
     }
     static get is() { return "br-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.css

@@ -115,6 +115,30 @@ progress {
   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;
@@ -155,6 +179,16 @@ progress {
 .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);

package/dist/collection/components/radio/radio.js

@@ -115,7 +115,7 @@ export class Radio {
         return this.customId ? this.customId : this.name;
     }
     render() {
-        return (h(Host, { key: '660b969988e41a89fdae674f8de5383dadf5c659', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'b146f7d3944904b24eb3695679512b0161953f26', class: this.getCssClassMap(), onClick: () => this.handleClick(), onKeyDown: (event) => this.handleKeyDown(event) }, h("input", Object.assign({ key: 'dcd4a5addad7971f6ad0947f09d3cded5d3cebf0', "aria-label": this.label, type: "radio", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: (event) => event.stopPropagation() }, this.inheritedAttributes)), h("label", { key: '39a07b6dc9b460b33f511f608b2a612b92ba8b84', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
+        return (h(Host, { key: '6d235669002b93600a2f0bff169090829705e645', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '812175f6ef00534cb2746ad9a73968880a961d54', class: this.getCssClassMap(), onClick: () => this.handleClick(), onKeyDown: (event) => this.handleKeyDown(event) }, h("input", Object.assign({ key: 'e2b25221aa94af34ddc81fa82674fae50c98b915', "aria-label": this.label, type: "radio", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: (event) => event.stopPropagation() }, this.inheritedAttributes)), h("label", { key: '52fb6cde4877be2f339d509492f92b96477367b1', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
     }
     static get is() { return "br-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.css

@@ -115,6 +115,30 @@ progress {
   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;
@@ -155,6 +179,16 @@ progress {
 .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);

package/dist/collection/components/switch/switch.js

@@ -98,7 +98,7 @@ export class Switch {
         };
     }
     render() {
-        return (h(Host, { key: '8b8937fd009fd8b3e9485223bdf774ce0bec5f4c' }, h("div", Object.assign({ key: '84855cf0eabeed83b87e0c3c608a7d76934a5951', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: '0b723be154e6ac75d32c47a84f022888609fa765', id: this._getComputedId(), type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: (event) => this._handleCheckedChange(event) }), h("label", { key: 'c29c937bdd42c464754cb0d8f34b323aea136269', htmlFor: this._getComputedId() }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: '4ccd82a482a1d2d4875cefa2817903ae7ee1a55e', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
+        return (h(Host, { key: '6a321798c94f8322687a54b6c25bc7f86f24b94a' }, h("div", Object.assign({ key: 'd9257697669b62d8e3bca034c8d2b4499b07b736', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: 'b88c30c7fd497e9d691ef8f9367eda6e0a41f751', id: this._getComputedId(), type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: (event) => this._handleCheckedChange(event) }), h("label", { key: '4e796fc09b89b259ecef2a367c3995df3b11ae8e', htmlFor: this._getComputedId() }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: '3095c063cbba59f93125c644d55431763bb64be1', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
     }
     static get is() { return "br-switch"; }
     static get encapsulation() { return "shadow"; }