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

package/dist/cjs/webcomponents.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecdd4399.js');
+const index = require('./index-fb4e9eaf.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["br-input.cjs",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"autofocus":[516],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message.cjs",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar.cjs",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox.cjs",[[65,"br-checkbox",{"indeterminate":[1540],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[1540,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-item.cjs",[[65,"br-item",{"disabled":[516],"isActive":[1540,"is-active"],"isSelected":[1540,"is-selected"],"isInteractive":[1540,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list.cjs",[[65,"br-list",{"listTitle":[513,"list-title"],"isHorizontal":[1540,"is-horizontal"],"hideHeaderDivider":[1540,"hide-header-divider"]}]]],["br-loading.cjs",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio.cjs",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[1540,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"toggle":[516],"_slotDefault":[32],"handleClick":[64],"handleKeyDown":[64]},[[4,"brDidSelect","handleItemInteractiveSelect"]]]]],["br-switch.cjs",[[65,"br-switch",{"disabled":[516],"checked":[1540],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[1540,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-button_2.cjs",[[65,"br-button",{"autofocus":[516],"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"class":[513],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
+  return index.bootstrapLazy([["br-input.cjs",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message.cjs",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar.cjs",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox.cjs",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown.cjs",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item.cjs",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list.cjs",[[65,"br-list",{"listTitle":[513,"list-title"],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading.cjs",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio.cjs",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"toggle":[516],"_slotDefault":[32]},[[4,"brDidSelect","handleItemInteractiveSelect"]]]]],["br-switch.cjs",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-button_2.cjs",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"CssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/webcomponents.cjs.js.map

@@ -1 +1 @@
-{"file":"webcomponents.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,+MAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"file":"webcomponents.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,+MAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/avatar/avatar.js",
     "components/button/button.js",
     "components/checkbox/checkbox.js",
+    "components/dropdown/dropdown.js",
     "components/icon/icon.js",
     "components/input/input.js",
     "components/item/item.js",

package/dist/collection/components/avatar/avatar.css

@@ -256,6 +256,11 @@ img {
   max-width: 100%;
   vertical-align: middle;
 }
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
 
 label,
 .label {
@@ -349,6 +354,50 @@ code,
   pointer-events: none;
 }
 
+[data-toggle=dropdown] + * {
+  position: absolute;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown [data-toggle=dropdown] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
 .br-avatar {
   --avatar-size: var(--avatar-small);
   --avatar-icon-size: var(--avatar-icon-small);
@@ -407,6 +456,15 @@ code,
   --avatar-icon-size: var(--avatar-icon-large);
   --avatar-text-size: var(--avatar-text-large);
 }
+.br-avatar[data-toggle=dropdown]:focus {
+  outline: none;
+}
+ .br-avatar[data-toggle=dropdown]:focus-visible {
+  outline-color: var(--focus);
+  outline-offset: var(--focus-offset);
+  outline-style: var(--focus-style);
+  outline-width: var(--focus-width);
+}
 .br-avatar .image {
   align-items: center;
   background-color: var(--blue-10);

package/dist/collection/components/avatar/avatar.js

@@ -79,7 +79,7 @@ export class Avatar {
     }
     setIconSize() {
         var _a, _b;
-        if (!((_a = this.image) === null || _a === void 0 ? void 0 : _a.trim().length) && !((_b = this.text) === null || _b === void 0 ? void 0 : _b.trim().length)) {
+        if (((_a = this.image) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0 && ((_b = this.text) === null || _b === void 0 ? void 0 : _b.trim().length) !== 0) {
             const size = this.iconSizes[this.density];
             this.iconHeight = size.height;
             this.iconWidth = size.width;
@@ -90,10 +90,10 @@ export class Avatar {
     }
     renderAvatar() {
         var _a, _b;
-        if ((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim().length) {
+        if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim().length) > 0) {
             return (h("span", { class: "content bg-support-01 text-pure-0", title: this.text }, this.text[0].toUpperCase()));
         }
-        if ((_b = this.image) === null || _b === void 0 ? void 0 : _b.trim().length) {
+        if (((_b = this.image) === null || _b === void 0 ? void 0 : _b.trim().length) > 0) {
             return (h("span", { class: "content", title: this.imageAlt || this.text }, h("img", { src: this.image, alt: this.imageAlt, loading: "lazy" })));
         }
         if (this.isIconic) {
@@ -101,7 +101,7 @@ export class Avatar {
         }
     }
     render() {
-        return (h(Host, { key: '3ec24f0b250572d05af4058ef5d1c135414a3237' }, h("span", Object.assign({ key: 'ca670019b75e79dfde00b8e065d169673ec781ec', class: this.getCssClassMap() }, this.inheritedAttributes), this.renderAvatar())));
+        return (h(Host, { key: '90d4903713585ba969eb111676d95f89c53522f5' }, h("span", Object.assign({ key: '3bb155bdc14da14da5bb576323446157636f3974', class: this.getCssClassMap() }, this.inheritedAttributes), this.renderAvatar())));
     }
     static get is() { return "br-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\nenum Density {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\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  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop() density: string = Density.Medium\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() image: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() imageAlt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() text: string\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    this.setIconSize()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  // Largura do ícone no avatar do tipo icônico\n  @State() iconWidth: string\n\n  // Altura do ícone no avatar do tipo icônico\n  @State() iconHeight: string\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      small: this.density === Density.Small,\n      medium: this.density === Density.Medium,\n      large: this.density === Density.Large,\n    }\n  }\n\n  /**\n   * Calcula o tamanho dos ícones de acordo com a classe de densidade\n   */\n  private iconSizes = {\n    small: { height: '32', width: '40' },\n    medium: { height: '80', width: '88' },\n    large: { height: '128', width: '136' },\n  }\n\n  private setIconSize() {\n    if (!this.image?.trim().length && !this.text?.trim().length) {\n      const size = this.iconSizes[this.density]\n      this.iconHeight = size.height\n      this.iconWidth = size.width\n    }\n  }\n\n  private iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private adjustIconStyle(density: string) {\n    return this.iconMarginTops[density] || '1em'\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderAvatar() {\n    if (this.text?.trim().length) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    }\n\n    if (this.image?.trim().length) {\n      return (\n        <span class=\"content\" title={this.imageAlt || this.text}>\n          <img src={this.image} alt={this.imageAlt} loading=\"lazy\" />\n        </span>\n      )\n    }\n\n    if (this.isIconic) {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight}\n            width={this.iconWidth}\n            aria-hidden=\"true\"\n            style={{ 'margin-top': this.adjustIconStyle(this.density) }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\nenum Density {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\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: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop() density: string = Density.Medium\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() image: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() imageAlt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() text: string\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    this.setIconSize()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  // Largura do ícone no avatar do tipo icônico\n  @State() iconWidth: string\n\n  // Altura do ícone no avatar do tipo icônico\n  @State() iconHeight: string\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      small: this.density === Density.Small,\n      medium: this.density === Density.Medium,\n      large: this.density === Density.Large,\n    }\n  }\n\n  /**\n   * Calcula o tamanho dos ícones de acordo com a classe de densidade\n   */\n  private readonly iconSizes = {\n    small: { height: '32', width: '40' },\n    medium: { height: '80', width: '88' },\n    large: { height: '128', width: '136' },\n  }\n\n  private setIconSize() {\n    if (this.image?.trim().length !== 0 && this.text?.trim().length !== 0) {\n      const size = this.iconSizes[this.density]\n      this.iconHeight = size.height\n      this.iconWidth = size.width\n    }\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private adjustIconStyle(density: string) {\n    return this.iconMarginTops[density] || '1em'\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderAvatar() {\n    if (this.text?.trim().length > 0) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    }\n\n    if (this.image?.trim().length > 0) {\n      return (\n        <span class=\"content\" title={this.imageAlt || this.text}>\n          <img src={this.image} alt={this.imageAlt} loading=\"lazy\" />\n        </span>\n      )\n    }\n\n    if (this.isIconic) {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight}\n            width={this.iconWidth}\n            aria-hidden=\"true\"\n            style={{ 'margin-top': this.adjustIconStyle(this.density) }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/button/button.css

@@ -256,6 +256,11 @@ img {
   max-width: 100%;
   vertical-align: middle;
 }
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
 
 label,
 .label {
@@ -349,6 +354,50 @@ code,
   pointer-events: none;
 }
 
+[data-toggle=dropdown] + * {
+  position: absolute;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown [data-toggle=dropdown] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
 .br-button {
   --button-radius: 100em;
   --button-xsmall: 24px;
@@ -598,6 +647,13 @@ a.br-button {
   animation: fill ease-in-out 2s;
   transform: rotate(3.6deg);
 }
+.loading[data-progress="3"] .br-loading-mask.full,
+.loading[data-progress="3"] .br-loading-fill,
+.br-loading[data-progress="3"] .br-loading-mask.full,
+.br-loading[data-progress="3"] .br-loading-fill {
+  animation: fill ease-in-out 2s;
+  transform: rotate(5.4deg);
+}
 .loading[data-progress="5"] .br-loading-mask.full,
 .loading[data-progress="5"] .br-loading-fill,
 .br-loading[data-progress="5"] .br-loading-mask.full,

package/dist/collection/components/button/button.js

@@ -7,8 +7,21 @@ import { inheritAriaAttributes } from "../../utils/inherited-attributes";
  */
 export class Button {
     constructor() {
+        this.handleClick = () => {
+            if (this.type === 'submit') {
+                const submitEvent = new SubmitEvent('submit', {
+                    submitter: this.elementInternals.form,
+                    composed: true,
+                    cancelable: true,
+                    bubbles: true,
+                });
+                this.elementInternals.form.dispatchEvent(submitEvent);
+            }
+            if (this.type === 'reset') {
+                this.elementInternals.form.reset();
+            }
+        };
         this.inheritedAttributes = {};
-        this.autofocus = false;
         this.colorMode = undefined;
         this.density = undefined;
         this.disabled = false;
@@ -59,20 +72,6 @@ export class Button {
     formStateRestoreCallback(state, _mode) {
         this.brFormStateRestoreCallback.emit([state, _mode]);
     }
-    handleClick() {
-        if (this.type === 'submit') {
-            const submitEvent = new SubmitEvent('submit', {
-                submitter: this.elementInternals.form,
-                composed: true,
-                cancelable: true,
-                bubbles: true,
-            });
-            this.elementInternals.form.dispatchEvent(submitEvent);
-        }
-        if (this.type === 'reset') {
-            this.elementInternals.form.reset();
-        }
-    }
     getCssClassMap() {
         return {
             'br-button': true,
@@ -88,7 +87,7 @@ export class Button {
         };
     }
     render() {
-        return (h(Host, { key: '8c496f8f5ff52840ff7ee13e3901b9a5464a9b3b', "aria-disabled": this.disabled ? 'true' : null }, h("button", Object.assign({ key: '685dd72cc52efdf67a8b4059b2bc75bbb3a98c5b', class: this.getCssClassMap(), type: this.type, disabled: this.disabled, autofocus: this.autofocus, value: this.value, onClick: () => this.handleClick() }, this.inheritedAttributes), h("slot", { key: '6da79451bc92ad7fa5851c425244398413930e72' }))));
+        return (h(Host, { key: '01d8aa91c3282453a80a9f54e3d223688b235354', "aria-disabled": this.disabled ? 'true' : null }, h("button", Object.assign({ key: '1a2949be7c6d9b865af11c1bd9a7b5bc12f15d5d', class: this.getCssClassMap(), type: this.type, disabled: this.disabled, value: this.value, onClick: this.handleClick }, this.inheritedAttributes), h("slot", { key: '0d0a45fef31732720036a4ea436a003dc9d5cae9' }))));
     }
     static get is() { return "br-button"; }
     static get encapsulation() { return "shadow"; }
@@ -105,24 +104,6 @@ export class Button {
     }
     static get properties() {
         return {
-            "autofocus": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Se definido como verdadeiro, o bot\u00E3o receber\u00E1 foco automaticamente ao ser renderizado."
-                },
-                "attribute": "autofocus",
-                "reflect": true,
-                "defaultValue": "false"
-            },
             "colorMode": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","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/button?tab=designer).\n *\n * @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.\n */\n@Component({\n  tag: 'br-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Button {\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   * Se definido como verdadeiro, o botão receberá foco automaticamente ao ser renderizado.\n   */\n  @Prop({ reflect: true }) autofocus: boolean = false\n\n  /**\n   * Define se o botão usará um esquema de cores escuro.\n   */\n  @Prop({ reflect: true }) colorMode: 'dark'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'middle' | 'small'\n\n  /**\n   * Desativa o botão, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.\n   */\n  @Prop({ reflect: true }) emphasis: 'primary' | 'secondary' | 'tertiary'\n\n  /**\n   * Indica se o botão está no estado ativo.\n   * Se definido como verdadeiro, o botão será exibido como ativo.\n   */\n  @Prop({ reflect: true }) isActive: boolean = false\n\n  /**\n   * Aplica o estado de \"progresso\" ao botão.\n   * O botão exibirá um indicador de carregamento ou progresso.\n   */\n  @Prop({ reflect: true }) isLoading: boolean = false\n\n  /**\n   * Define o formato do botão.\n   * Valores possíveis:\n   * - 'circle': Botão com formato circular.\n   * - 'block': Botão com formato ovalado ocupando toda a largura disponível.\n   * - 'pill': Botão com formato ovalado, com bordas arredondadas.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'block' | 'pill'\n\n  /**\n   * Define o tipo de botão, especificando seu comportamento padrão.\n   * Valores possíveis:\n   * - 'button': Um botão padrão.\n   * - 'reset': Um botão para redefinir o formulário.\n   * - 'submit': Um botão para enviar o formulário.\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit'\n\n  /**\n   * Define o valor inicial do botão em um formulário.\n   */\n  @Prop({ reflect: true }) value: string\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    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 handleClick() {\n    if (this.type === 'submit') {\n      const submitEvent = new SubmitEvent('submit', {\n        submitter: this.elementInternals.form,\n        composed: true,\n        cancelable: true,\n        bubbles: true,\n      })\n      this.elementInternals.form.dispatchEvent(submitEvent)\n    }\n\n    if (this.type === 'reset') {\n      this.elementInternals.form.reset()\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-button': true,\n      primary: this.emphasis === 'primary',\n      secondary: this.emphasis === 'secondary',\n      large: this.density === 'large',\n      small: this.density === 'small',\n      block: this.shape === 'block',\n      circle: this.shape === 'circle',\n      active: this.isActive,\n      loading: this.isLoading,\n      'dark-mode': this.colorMode === 'dark',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <button\n          class={this.getCssClassMap()}\n          type={this.type}\n          disabled={this.disabled}\n          autofocus={this.autofocus}\n          value={this.value}\n          onClick={() => this.handleClick()}\n          {...this.inheritedAttributes}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","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/button?tab=designer).\n *\n * @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.\n */\n@Component({\n  tag: 'br-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Button {\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: HTMLBrButtonElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define se o botão usará um esquema de cores escuro.\n   */\n  @Prop({ reflect: true }) colorMode: 'dark'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'middle' | 'small'\n\n  /**\n   * Desativa o botão, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.\n   */\n  @Prop({ reflect: true }) emphasis: 'primary' | 'secondary' | 'tertiary'\n\n  /**\n   * Indica se o botão está no estado ativo.\n   * Se definido como verdadeiro, o botão será exibido como ativo.\n   */\n  @Prop({ reflect: true }) isActive: boolean = false\n\n  /**\n   * Aplica o estado de \"progresso\" ao botão.\n   * O botão exibirá um indicador de carregamento ou progresso.\n   */\n  @Prop({ reflect: true }) isLoading: boolean = false\n\n  /**\n   * Define o formato do botão.\n   * Valores possíveis:\n   * - 'circle': Botão com formato circular.\n   * - 'block': Botão com formato ovalado ocupando toda a largura disponível.\n   * - 'pill': Botão com formato ovalado, com bordas arredondadas.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'block' | 'pill'\n\n  /**\n   * Define o tipo de botão, especificando seu comportamento padrão.\n   * Valores possíveis:\n   * - 'button': Um botão padrão.\n   * - 'reset': Um botão para redefinir o formulário.\n   * - 'submit': Um botão para enviar o formulário.\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit'\n\n  /**\n   * Define o valor inicial do botão em um formulário.\n   */\n  @Prop({ reflect: true }) value: string\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    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 readonly handleClick = () => {\n    if (this.type === 'submit') {\n      const submitEvent = new SubmitEvent('submit', {\n        submitter: this.elementInternals.form,\n        composed: true,\n        cancelable: true,\n        bubbles: true,\n      })\n      this.elementInternals.form.dispatchEvent(submitEvent)\n    }\n\n    if (this.type === 'reset') {\n      this.elementInternals.form.reset()\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-button': true,\n      primary: this.emphasis === 'primary',\n      secondary: this.emphasis === 'secondary',\n      large: this.density === 'large',\n      small: this.density === 'small',\n      block: this.shape === 'block',\n      circle: this.shape === 'circle',\n      active: this.isActive,\n      loading: this.isLoading,\n      'dark-mode': this.colorMode === 'dark',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <button\n          class={this.getCssClassMap()}\n          type={this.type}\n          disabled={this.disabled}\n          value={this.value}\n          onClick={this.handleClick}\n          {...this.inheritedAttributes}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/checkbox/checkbox.css

@@ -256,6 +256,11 @@ img {
   max-width: 100%;
   vertical-align: middle;
 }
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
 
 label,
 .label {
@@ -349,6 +354,50 @@ code,
   pointer-events: none;
 }
 
+[data-toggle=dropdown] + * {
+  position: absolute;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown [data-toggle=dropdown] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
 .br-checkbox {
   --checkbox-padding: var(--spacing-scale-base);
   --checkbox-size: 24px;

package/dist/collection/components/checkbox/checkbox.js

@@ -8,6 +8,10 @@ import { inheritAriaAttributes } from "../../utils/inherited-attributes";
 export class Checkbox {
     constructor() {
         this.inheritedAttributes = {};
+        this.handleCheckedChange = (event) => {
+            this.checked = event.target.checked;
+            this.brDidCheckedChange.emit(this.checked);
+        };
         this.indeterminate = false;
         this.checked = false;
         this.customId = undefined;
@@ -73,10 +77,6 @@ export class Checkbox {
             'hidden-label': this.hasHiddenLabel,
         };
     }
-    handleCheckedChange(event) {
-        this.checked = event.target.checked;
-        this.brDidCheckedChange.emit(this.checked);
-    }
     /**
      * Inverte o valor da prop `checked`
      */
@@ -85,10 +85,11 @@ export class Checkbox {
         this.brDidCheckedChange.emit(this.checked);
     }
     getComputedId() {
-        return this.customId ? this.customId : this.name;
+        var _a;
+        return ((_a = this.customId) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.customId : this.name;
     }
     render() {
-        return (h(Host, { key: 'e6e1388728dc96f8c2b0c9eb82cfbb93ba1b9fae' }, h("div", { key: 'de796c8ce064de218d99b3080bc6911301575d66', class: this.getCssClassMap() }, h("input", Object.assign({ key: 'de9fee1d23ee555b4f12e99c2f1a4c4469abefcc', type: "checkbox", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, value: this.value, onChange: (event) => this.handleCheckedChange(event) }, this.inheritedAttributes)), h("label", { key: '03a8dcc927dbb3137f0417590aa18043b76d85a3', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
+        return (h(Host, { key: '989f9ad72c7025dba00a4d0c80f17738a6d982a5' }, h("div", { key: '2ece1308be7f1a62012eeac105ff9c8980bf385e', class: this.getCssClassMap() }, h("input", Object.assign({ key: 'ffb9b3270cea17f967fb51b47ddfec9440ac8c63', type: "checkbox", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, value: this.value, onChange: this.handleCheckedChange }, this.inheritedAttributes)), h("label", { key: '7c51970050a06d2abc28b5a17389c87b0c8c76cc', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
     }
     static get is() { return "br-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -107,7 +108,7 @@ export class Checkbox {
         return {
             "indeterminate": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -178,7 +179,7 @@ export class Checkbox {
             },
             "hasHiddenLabel": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",