@govbr-ds/webcomponents 2.0.0-next.19 → 2.0.0-next.20

package/dist/collection/components/tag/tag.js

@@ -0,0 +1,256 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import { h, Host } 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/tag?tab=designer).
+ *
+ * @slot default - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.
+ */
+export class Tag {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.handleClose = () => {
+            this.el.remove();
+        };
+        this.label = '';
+        this.iconName = '';
+        this.color = '';
+        this.density = 'small';
+        this.shape = 'default';
+        this.status = false;
+        this.interaction = false;
+        this.disabled = false;
+        this.stateIconName = 'fa-solid:car';
+    }
+    componentWillLoad() {
+        this.brWillLoad.emit();
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    getCssClassMap() {
+        const classes = {
+            'br-tag': true,
+            interaction: this.interaction,
+            [this.color]: this.color !== '',
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            count: this.shape === 'rounded' ? true : false,
+            icon: this.shape === 'circle' ? true : false,
+            status: this.status,
+        };
+        return classes;
+    }
+    renderIcon() {
+        if (this.iconName.trim().length === 0)
+            return null;
+        return h("br-icon", { style: { fontSize: 'var(--icon-size-base)' }, "icon-name": this.iconName, "aria-hidden": "true" });
+    }
+    renderLabel() {
+        if (this.shape === 'circle' || this.status)
+            return null;
+        return (h("span", { id: "interactivetag1", "aria-label": this.label }, this.label));
+    }
+    renderCloseButton() {
+        if (!this.interaction)
+            return null;
+        return (h("br-button", { type: "button", shape: "circle", emphasis: !this.interaction ? 'tertiary' : 'primary', "aria-label": "Fechar", colorMode: !this.interaction ? 'dark' : null, "aria-describedby": "interactivetag1", onClick: this.handleClose, disabled: this.disabled }, h("br-icon", { "icon-name": "fa-solid:times" })));
+    }
+    renderStatusLabel() {
+        if (!this.status)
+            return null;
+        return (h("span", { class: "tag-spacing-status", id: "interactivetag1", "aria-label": this.label }, this.label));
+    }
+    render() {
+        return (h(Host, { key: '2ae1b9e249097b66fb02e0c903e294f73aad6bc0' }, h("div", { key: '65f39b80147b977231e8bb9566f2aa1797597646', class: "tag-position" }, h("span", Object.assign({ key: '452777774bfdba4a5eed2af6bb429f02f8dd9ed3', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "alert", "aria-live": "assertive" }), this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: 'c3cad61c4e5d7b683c9b4a6b66fbf0b62a56ac8a' })), this.renderStatusLabel())));
+    }
+    static get is() { return "br-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'label' \u00E9 uma string que representa o texto a ser exibido no componente.\nEla \u00E9 refletida no DOM, permitindo que altera\u00E7\u00F5es no valor sejam refletidas no elemento HTML correspondente."
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'iconName' define o nome do \u00EDcone que ser\u00E1 exibido ao lado do texto.\nO valor padr\u00E3o \u00E9 'fa-solid:car', que corresponde a um \u00EDcone de carro da biblioteca Font Awesome."
+                },
+                "attribute": "icon-name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'color' permite definir a cor do componente.\nAceita valores como 'red', 'blue', entre outros, e \u00E9 refletida no DOM."
+                },
+                "attribute": "color",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'density' permite definir a densidade do componente.\nAceita valores como 'small', 'medium' e 'large', e \u00E9 refletida no DOM."
+                },
+                "attribute": "density",
+                "reflect": true,
+                "defaultValue": "'small'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'rounded' | 'default'",
+                    "resolved": "\"circle\" | \"default\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'shape' define o formato do componente.\nValores poss\u00EDveis:\n- 'circle': Componente com formato circular.\n- 'rounded': Componente com bordas arredondadas.\n- 'default': Componente com formato padr\u00E3o."
+                },
+                "attribute": "shape",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "status": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'status' \u00E9 um booleano que indica se o status deve ser exibido.\nSe definido como true, o status ser\u00E1 mostrado ao lado do texto."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "interaction": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'interaction' \u00E9 um booleano que indica se a intera\u00E7\u00E3o deve ser habilitada.\nSe definido como true, o componente permitir\u00E1 intera\u00E7\u00F5es do usu\u00E1rio."
+                },
+                "attribute": "interaction",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'disabled' \u00E9 um booleano que indica se o componente deve estar desabilitado.\nSe definido como true, o componente n\u00E3o permitir\u00E1 intera\u00E7\u00F5es do usu\u00E1rio."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stateIconName": {}
+        };
+    }
+    static get events() {
+        return [{
+                "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": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\n\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/tag?tab=designer).\n *\n * @slot default - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.\n */\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\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: HTMLBrTagElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) iconName: string = ''\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) density: 'small' | 'medium' | 'large' = 'small'\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'rounded' | 'default' = 'default'\n\n  /**\n   * A propriedade 'status' é um booleano que indica se o status deve ser exibido.\n   * Se definido como true, o status será mostrado ao lado do texto.\n   */\n  @Prop({ reflect: true }) status: boolean = false\n\n  /**\n   * A propriedade 'interaction' é um booleano que indica se a interação deve ser habilitada.\n   * Se definido como true, o componente permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) interaction: boolean = false\n\n  /**\n   * A propriedade 'disabled' é um booleano que indica se o componente deve estar desabilitado.\n   * Se definido como true, o componente não permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  @State() stateIconName: string = 'fa-solid:car'\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  private getCssClassMap(): CssClassMap {\n    const classes: CssClassMap = {\n      'br-tag': true,\n      interaction: this.interaction,\n      [this.color]: this.color !== '',\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      count: this.shape === 'rounded' ? true : false,\n      icon: this.shape === 'circle' ? true : false,\n      status: this.status,\n    }\n\n    return classes\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderIcon() {\n    if (this.iconName.trim().length === 0) return null\n    return <br-icon style={{ fontSize: 'var(--icon-size-base)' }} icon-name={this.iconName} aria-hidden=\"true\" />\n  }\n\n  private renderLabel() {\n    if (this.shape === 'circle' || this.status) return null\n    return (\n      <span id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        type=\"button\"\n        shape=\"circle\"\n        emphasis={!this.interaction ? 'tertiary' : 'primary'}\n        aria-label=\"Fechar\"\n        colorMode={!this.interaction ? 'dark' : null}\n        aria-describedby=\"interactivetag1\"\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    if (!this.status) return null\n    return (\n      <span class=\"tag-spacing-status\" id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tag-position\">\n          <span class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"alert\" aria-live=\"assertive\">\n            {this.renderIcon()}\n            {this.renderLabel()}\n            {this.renderCloseButton()}\n            <slot></slot>\n          </span>\n          {this.renderStatusLabel()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/textarea/textarea.js

@@ -76,7 +76,7 @@ export class Textarea {
     render() {
         const caracteresRestantes = this.maxlength - this.currentLength;
         const mostrarLimite = this.currentLength > 0;
-        return (h(Host, { key: 'defc8132cc310b1fdce9555584503b1091381f1a' }, h("div", Object.assign({ key: 'cb6c15fda32b51936b72e3841f0902c62dfb1b2b', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: '7f6c1f253f9ff2925cdd03979f2d59c094d33764', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '3fdb79978863ec3748395a25f3314b70bc9e2c70', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: '8fb3b0cfeb66e6a41ca043280848beca7a48b831', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: '15886ef7f481fa9f68dd57d4765283fae22e82a4', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '793a5a2d1e8b5fb76c0ed96fc713544094c18809' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: '0b6052b895a5b960bff7c3eb879e949ad4846cfa' }))))));
+        return (h(Host, { key: '8bb5ea9efb0e2ee82d1c4074d7f9a8332fcfb635' }, h("div", Object.assign({ key: 'cedcc004557860b4b2724c5180f2c012a109fcc1', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: '3998a88b69f3dddc63ea41d08db7de96af28d25d', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '8f94f9c2aaf2758e5ee9be6938be50ce8c82db7c', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: 'a642046a4dd9da93ac051eb6bf0ecfe711433680', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: 'b859da1b3f48ed513e32374251a31ad3fc0f108f', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '0aaebed51ac98b00c4fca6e7d857664d117b0d74' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: 'e24c4673cc638ce9e37acf05d2d80fea32b7f8fa' }))))));
     }
     static get is() { return "br-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/upload/upload.js

@@ -133,7 +133,7 @@ export class Upload {
         fileInput.click();
     }
     render() {
-        return (h(Host, { key: 'f1ec05f1b00cc4ab0b77857f59a131f58ee33453' }, h("div", { key: 'eb58edc7b74899f9d61e9a8f29f1ddb5e8770400', class: this.getCssClassMap() }, h("label", { key: 'ed176b30f6e6076e956509da99049023f0169050', class: "upload-label", form: "single-file" }, h("span", { key: 'f61bd68bc184ebb271e668c4e199b4cc4f2e9482' }, this.label)), h("button", { key: 'b5a5d360161ddebabe673bd5a0ab2ac5f357e5be', class: "upload-button", type: "button", "aria-hidden": "true", tabIndex: this.disabled ? -1 : 0, disabled: this.disabled, "aria-label": "Selecionar arquivo para upload", onClick: () => this.handleFileSelection(), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event) }, h("br-icon", { key: '693d40ea2e9717c0fd399b7ede95735ea96fd58c', "icon-name": "fa-solid:upload", height: "16", "aria-hidden": "true" }), h("span", { key: 'b545c00edd27ec1fd06dc8e48891da4a1868f4cf' }, "Selecione o arquivo")), h("input", Object.assign({ key: 'eec6d4db4a1b102321544e5ef676dc2000243a1d', class: "upload-input", id: "single-file", type: "file", "aria-hidden": "null", "aria-label": "enviar arquivo", onChange: ($event) => this.onInputChange($event.target.files) }, this.inheritedAttributes, { multiple: this.multiple, disabled: this.disabled, accept: this.accept })), h("div", { key: '0580a6d5e28685ec3e91e84d1082cabc8a5dc87c', id: "list-files", class: "upload-list" }, this.filesSelected ? this.renderFilesUploaded() : null))));
+        return (h(Host, { key: 'aab6988f0879747fdb594e3810704e497718635c' }, h("div", { key: '274726af605123e4be46cd995b295c8eb147cbf4', class: this.getCssClassMap() }, h("label", { key: '40753e4671f13bd2daab5c823284e64dd104214b', class: "upload-label", form: "single-file" }, h("span", { key: 'd49a6054c231e556bb40ee4c8b06f0c8ff950507' }, this.label)), h("button", { key: 'dafa2d9c447bb65f01e9b5dbd81f63dde33d38d2', class: "upload-button", type: "button", "aria-hidden": "true", tabIndex: this.disabled ? -1 : 0, disabled: this.disabled, "aria-label": "Selecionar arquivo para upload", onClick: () => this.handleFileSelection(), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event) }, h("br-icon", { key: '22b4bf3b4618ecdff30cdcb8db2185db6da0af5f', "icon-name": "fa-solid:upload", height: "16", "aria-hidden": "true" }), h("span", { key: 'f8a3fbc9629d7a8cd85eb434d922356b5c61ab22' }, "Selecione o arquivo")), h("input", Object.assign({ key: '83b65e6e1a55db70d42c6075bea037d58b86c457', class: "upload-input", id: "single-file", type: "file", "aria-hidden": "null", "aria-label": "enviar arquivo", onChange: ($event) => this.onInputChange($event.target.files) }, this.inheritedAttributes, { multiple: this.multiple, disabled: this.disabled, accept: this.accept })), h("div", { key: '0a7a7f508c8379986a56d1a2aa5773b0f0709c17', id: "list-files", class: "upload-list" }, this.filesSelected ? this.renderFilesUploaded() : null))));
     }
     static get is() { return "br-upload"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,4 +15,13 @@ if (!window.elementsToListen && !window.eventsToListen) {
       })
     })
   })
+
+  function validateForm() {
+    const input = document.querySelector('#pattern')
+    if (!input.validity.valid) {
+      alert('Por favor, insira um código de país válido com três letras.')
+      return false // Impede o envio do formulário
+    }
+    return true // Permite o envio do formulário
+  }
 }

package/dist/collection/pages/components/tag/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll("br-tag");
+
+  const eventsToListen = ["click"];
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+        Evento: event.type,
+        Elemento: domElement.outerHTML,
+        ...(event.detail && { Detail: event.detail }),
+        ...(event.data && { Data: event.data }),
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/scripts/menu.js

@@ -27,7 +27,7 @@ const MENU_ITEMS = [
   {
     path: 'input',
     name: 'Input',
-    files: ['state', 'with-button', 'highlight', 'inline', 'density'],
+    files: ['state', 'with-button', 'highlight', 'inline', 'density', 'propriedades'],
   },
   {
     path: 'item',
@@ -54,15 +54,15 @@ const MENU_ITEMS = [
     name: 'Switch',
     files: ['label', 'has-icon', 'density', 'state'],
   },
+  {
+    path: 'tag',
+    name: 'Tag',
+    files: ['tag', 'densitys', 'status', 'interaction', 'icons', 'counts'],
+  },
   {
     path: 'textarea',
     name: 'Textarea',
-    files: [
-      'simples',
-      'contador',
-      'density',
-      'inline',
-    ],
+    files: ['simples', 'contador', 'density', 'inline'],
   },
   {
     path: 'upload',
@@ -97,7 +97,7 @@ const CLEAR_MENU_FILTER = document.getElementById('clear-menu-filter')
 const menuButton = document.getElementById('menu-button')
 const responsiveMenuButton = document.getElementById('responsive-menu-button')
 const menuElement = document.getElementById('main-navigation')
-const iconElement = menuButton.querySelector('i');
+const iconElement = menuButton.querySelector('i')
 
 function setLinks() {
   MENU_ITEMS.forEach((page) => {
@@ -109,7 +109,7 @@ function setLinks() {
       event.preventDefault()
 
       if (link.classList.contains('active')) {
-        return;
+        return
       }
 
       removeAllActiveClasses()
@@ -118,7 +118,7 @@ function setLinks() {
       window.history.pushState({}, '', `/${page.path}`)
 
       if (window.innerWidth <= 575) {
-        toggleMenu();
+        toggleMenu()
       }
     })
 
@@ -143,7 +143,7 @@ function setLinks() {
       event.preventDefault()
 
       if (link.classList.contains('active')) {
-        return;
+        return
       }
 
       removeAllActiveClasses()
@@ -152,7 +152,7 @@ function setLinks() {
       window.history.pushState({}, '', `/${page.path}`)
 
       if (window.innerWidth <= 575) {
-        toggleMenu();
+        toggleMenu()
       }
     })
 
@@ -187,15 +187,15 @@ window.addEventListener('load', () => {
   menuButton.addEventListener('click', toggleMenu)
   responsiveMenuButton.addEventListener('click', toggleMenu)
 
-  const mediaQuery = window.matchMedia("(min-width: 576px)");
-  mediaQuery.addEventListener('change', handleMediaChange);
+  const mediaQuery = window.matchMedia('(min-width: 576px)')
+  mediaQuery.addEventListener('change', handleMediaChange)
 
   function handleMediaChange(event) {
-    if (event.matches && responsiveMenuButton) responsiveMenuButton.style.display = 'none';
-    if (!event.matches && responsiveMenuButton) responsiveMenuButton.style.display = '';
+    if (event.matches && responsiveMenuButton) responsiveMenuButton.style.display = 'none'
+    if (!event.matches && responsiveMenuButton) responsiveMenuButton.style.display = ''
   }
 
-  handleMediaChange(mediaQuery);
+  handleMediaChange(mediaQuery)
 
   MENU_FILTER.addEventListener('input', filterMenu)
   CLEAR_MENU_FILTER.addEventListener('click', clearInput)
@@ -209,13 +209,13 @@ function removeAllActiveClasses() {
 }
 
 function toggleMenu() {
-  menuElement.classList.toggle('active');
+  menuElement.classList.toggle('active')
 
   if (menuElement.classList.contains('active')) {
-    iconElement.classList.remove('fa-bars');
-    iconElement.classList.add('fa-times');
+    iconElement.classList.remove('fa-bars')
+    iconElement.classList.add('fa-times')
   } else {
-    iconElement.classList.add('fa-bars');
-    iconElement.classList.remove('fa-times');
+    iconElement.classList.add('fa-bars')
+    iconElement.classList.remove('fa-times')
   }
 }

package/dist/collection/scripts/menu.js

@@ -0,0 +1,146 @@
+const MENU_ITEMS = [
+  {
+    path: 'avatar',
+    name: 'Avatar',
+    files: ['fotografico.html', 'iconico.html', 'letra.html'],
+  },
+  {
+    path: 'button',
+    name: 'Button',
+    files: ['colorMode.html', 'density.html', 'emphasis.html', 'iconPosition.html', 'shape.html', 'state.html'],
+  },
+  {
+    path: 'checkbox',
+    name: 'Checkbox',
+    files: ['hiddenLabel.html', 'horizontal.html', 'indeterminate.html', 'slotted.html', 'state.html', 'vertical.html'],
+  },
+  {
+    path: 'dropdown',
+    name: 'Dropdown',
+    files: ['dropdown.html'],
+  },
+  {
+    path: 'icon',
+    name: 'Icon',
+    files: ['flip.html', 'font-awesome.html', 'inline.html', 'rotate.html', 'width-height.html'],
+  },
+  {
+    path: 'input',
+    name: 'Input',
+    files: ['state.html', 'icon-button.html', 'highlight.html', 'inline.html', 'density.html'],
+  },
+  {
+    path: 'item',
+    name: 'Item',
+    files: ['density.html', 'item.html', 'state.html', 'selection.html'],
+  },
+  {
+    path: 'list',
+    name: 'List',
+    files: ['list.html', 'density.html', 'grouped.html', 'horizontal.html'],
+  },
+  {
+    path: 'loading',
+    name: 'Loading',
+    files: ['indeterminate.html', 'progress.html'],
+  },
+  {
+    path: 'message',
+    name: 'Message',
+    files: ['feedback.html', 'message.html'],
+  },
+  {
+    path: 'radio',
+    name: 'Radio',
+    files: ['radio-group.html', 'has-hidden-label.html', 'slotted.html', 'state.html'],
+  },
+  {
+    path: 'switch',
+    name: 'Switch',
+    files: ['label.html', 'hasIcon.html', 'density.html', 'state.html'],
+  },
+  {
+    path: 'textarea',
+    name: 'Textarea',
+    files: [
+      'textarea-contador.html',
+      'textarea-density.html',
+      'textarea-label-left.html',
+      'textarea-theme.html',
+      'textarea.html',
+    ],
+  },
+  {
+    path: 'upload',
+    name: 'Upload',
+    files: ['single.html', 'multiple.html', 'restricted.html', 'disabled.html'],
+  },
+  {
+    path: 'tag',
+    name: 'Tag',
+<<<<<<< HEAD
+    files: [['tag.html', 'densitys.html', 'status.html', 'interaction.html', 'icons.html', 'counts.html']],
+=======
+    files: ['tag.html'],
+>>>>>>> next
+  },
+]
+
+const MENU_BODY = document.querySelector('.menu-body')
+const MENU_FILTER = document.getElementById('menu-filter')
+const CLEAR_BUTTON = document.getElementById('clear-button')
+
+// Função para definir links do menu
+function setLinks() {
+  MENU_ITEMS.forEach((page) => {
+    const link = document.createElement('a')
+    link.href = `/${page.path}`
+    link.className = 'menu-item br-link'
+    link.textContent = page.name
+    link.addEventListener('click', (event) => {
+      event.preventDefault()
+      removeAllActiveClasses()
+      link.classList.add('active')
+      loadPage(page.path, page.files)
+      window.history.pushState({}, '', `/${page.path}`)
+    })
+
+    MENU_BODY.appendChild(link)
+  })
+}
+
+// Função para filtrar o menu
+function filterMenu() {
+  const filterValue = MENU_FILTER.value.toLowerCase()
+  const menuItems = MENU_BODY.querySelectorAll('.menu-item')
+
+  menuItems.forEach((item) => {
+    if (item.textContent.toLowerCase().includes(filterValue)) {
+      item.style.display = '' // Exibir item
+    } else {
+      item.style.display = 'none' // Ocultar item
+    }
+  })
+
+  CLEAR_BUTTON.style.display = filterValue ? 'block' : 'none'
+}
+
+// Função para limpar o input
+function clearInput() {
+  MENU_FILTER.value = ''
+  filterMenu()
+}
+
+// Função para carregar links de menu e página da URL
+window.addEventListener('load', () => {
+  setLinks()
+  loadPageFromURL()
+
+  // Adicionar funcionalidade de exibir/esconder o menu ao clicar no botão
+  const menuButton = document.getElementById('menu-button')
+  menuButton.addEventListener('click', toggleMenu)
+
+  // Adicionar funcionalidade de filtro ao campo de entrada
+  MENU_FILTER.addEventListener('input', filterMenu)
+  CLEAR_BUTTON.addEventListener('click', clearInput)
+})