@govbr-ds/webcomponents 2.0.0-next.57 → 2.0.0-next.58

package/dist/collection/utils/breakpoint-observer.js

@@ -0,0 +1,193 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+/**
+ * Constantes que definem os nomes dos breakpoints.
+ */
+export const BREAKPOINTS = {
+    X_SMALL: 'x-small',
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+    X_LARGE: 'x-large',
+};
+/**
+ * Configurações dos breakpoints, mapeando nome para suas definições.
+ * É privada ao módulo.
+ */
+const BREAKPOINT_SETTINGS = {
+    [BREAKPOINTS.X_SMALL]: {
+        name: BREAKPOINTS.X_SMALL,
+        query: '(max-width: 575px)',
+        minWidth: 0,
+        maxWidth: 575,
+    },
+    [BREAKPOINTS.SMALL]: {
+        name: BREAKPOINTS.SMALL,
+        query: '(min-width: 576px) and (max-width: 991px)',
+        minWidth: 576,
+        maxWidth: 991,
+    },
+    [BREAKPOINTS.MEDIUM]: {
+        name: BREAKPOINTS.MEDIUM,
+        query: '(min-width: 992px) and (max-width: 1279px)',
+        minWidth: 992,
+        maxWidth: 1279,
+    },
+    [BREAKPOINTS.LARGE]: {
+        name: BREAKPOINTS.LARGE,
+        query: '(min-width: 1280px) and (max-width: 1599px)',
+        minWidth: 1280,
+        maxWidth: 1599,
+    },
+    [BREAKPOINTS.X_LARGE]: {
+        name: BREAKPOINTS.X_LARGE,
+        query: '(min-width: 1600px)',
+        minWidth: 1600,
+    },
+};
+/**
+ * Classe que observa mudanças nos breakpoints baseados em media queries.
+ */
+export class BreakpointObserver {
+    /**
+     * Cria uma nova instância do observador e inicia a observação dos breakpoints.
+     */
+    constructor() {
+        this.currentBreakpoint = null;
+        this.mediaQueries = [];
+        this.listeners = new Set();
+        /**
+         * Função chamada quando ocorre mudança em algum media query.
+         * Atualiza o breakpoint atual e notifica os listeners se houver mudança.
+         */
+        this.handleChange = () => {
+            for (const { config, mql } of this.mediaQueries) {
+                if (mql.matches && this.currentBreakpoint !== config.name) {
+                    this.currentBreakpoint = config.name;
+                    this.notifyListeners();
+                    break;
+                }
+            }
+        };
+        this.init();
+    }
+    /**
+     * Inicializa os MediaQueryLists para cada breakpoint, adicionando listeners.
+     */
+    init() {
+        for (const breakpointName of Object.values(BREAKPOINTS)) {
+            const config = BREAKPOINT_SETTINGS[breakpointName];
+            const mql = window.matchMedia(config.query);
+            this.mediaQueries.push({ config, mql });
+            if (mql.matches) {
+                this.currentBreakpoint = config.name;
+            }
+            mql.addEventListener('change', this.handleChange);
+        }
+    }
+    /**
+     * Notifica todos os callbacks inscritos sobre a mudança do breakpoint atual.
+     */
+    notifyListeners() {
+        if (this.currentBreakpoint === null)
+            return;
+        for (const listener of this.listeners) {
+            listener(this.currentBreakpoint);
+        }
+    }
+    /**
+     * Retorna o breakpoint atual detectado.
+     * @returns {Breakpoint | null} Breakpoint atual ou null se não definido
+     */
+    getCurrentBreakpoint() {
+        return this.currentBreakpoint;
+    }
+    /**
+     * Retorna as configurações completas de um breakpoint específico.
+     * @param {Breakpoint} breakpoint - Breakpoint para consulta
+     * @returns {BreakpointSettings | undefined} Configurações do breakpoint, ou undefined se não encontrado
+     */
+    getBreakpointSettings(breakpoint) {
+        return BREAKPOINT_SETTINGS[breakpoint];
+    }
+    /**
+     * Retorna a query CSS associada a um breakpoint.
+     * @param {Breakpoint} breakpoint - Breakpoint para consulta
+     * @returns {string | undefined} Query CSS, ou undefined se não encontrado
+     */
+    getBreakpointQuery(breakpoint) {
+        var _a;
+        return (_a = BREAKPOINT_SETTINGS[breakpoint]) === null || _a === void 0 ? void 0 : _a.query;
+    }
+    /**
+     * Retorna uma lista com todos os breakpoints disponíveis.
+     * @returns {Breakpoint[]} Array com todos os breakpoints
+     */
+    getAllBreakpoints() {
+        return Object.values(BREAKPOINTS);
+    }
+    /**
+     * Retorna uma lista de breakpoints filtrada segundo o tipo e breakpoint base.
+     * Tipos aceitos:
+     * - 'above': todos acima do breakpoint informado
+     * - 'below': todos abaixo do breakpoint informado
+     * - 'from': breakpoint informado e todos acima
+     * - 'until': breakpoint informado e todos abaixo
+     * - 'only': somente o breakpoint informado
+     * @param {'above' | 'below' | 'from' | 'until' | 'only'} type - Tipo de filtro
+     * @param {Breakpoint} breakpoint - Breakpoint base para filtro
+     * @returns {Breakpoint[]} Lista filtrada de breakpoints
+     */
+    static getBreakpoints(type, breakpoint) {
+        const breakpointOrder = Object.values(BREAKPOINTS);
+        const index = breakpointOrder.indexOf(breakpoint);
+        if (index === -1)
+            return [];
+        switch (type) {
+            case 'above':
+                return breakpointOrder.slice(index + 1);
+            case 'below':
+                return breakpointOrder.slice(0, index);
+            case 'from':
+                return breakpointOrder.slice(index);
+            case 'until':
+                return breakpointOrder.slice(0, index + 1);
+            case 'only':
+                return [breakpoint];
+            default:
+                return [];
+        }
+    }
+    /**
+     * Adiciona um listener para receber notificações quando o breakpoint mudar.
+     * O callback é chamado imediatamente com o breakpoint atual (se houver).
+     * @param {(breakpoint: Breakpoint) => void} callback - Função para receber notificações
+     */
+    subscribe(callback) {
+        this.listeners.add(callback);
+        if (this.currentBreakpoint !== null) {
+            callback(this.currentBreakpoint);
+        }
+    }
+    /**
+     * Remove um listener previamente registrado.
+     * @param {(breakpoint: Breakpoint) => void} callback - Função a ser removida
+     */
+    unsubscribe(callback) {
+        this.listeners.delete(callback);
+    }
+    /**
+     * Remove todos os listeners e para a observação dos media queries.
+     */
+    destroy() {
+        for (const { mql } of this.mediaQueries) {
+            mql.removeEventListener('change', this.handleChange);
+        }
+        this.listeners.clear();
+        this.mediaQueries = [];
+        this.currentBreakpoint = null;
+    }
+}
+//# sourceMappingURL=breakpoint-observer.js.map

package/dist/collection/utils/breakpoint-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint-observer.js","sourceRoot":"","sources":["../../../../../packages/webcomponents/src/utils/breakpoint-observer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Constantes que definem os nomes dos breakpoints.\n */\nexport const BREAKPOINTS = {\n  X_SMALL: 'x-small',\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n  X_LARGE: 'x-large',\n} as const\n\n/**\n * Tipo que representa os valores possíveis de breakpoint.\n */\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS]\n\n/**\n * Configurações específicas de um breakpoint.\n */\ntype BreakpointSettings = {\n  name: Breakpoint\n  query: string\n  minWidth: number\n  maxWidth?: number\n}\n\n/**\n * Configurações dos breakpoints, mapeando nome para suas definições.\n * É privada ao módulo.\n */\nconst BREAKPOINT_SETTINGS: Record<Breakpoint, BreakpointSettings> = {\n  [BREAKPOINTS.X_SMALL]: {\n    name: BREAKPOINTS.X_SMALL,\n    query: '(max-width: 575px)',\n    minWidth: 0,\n    maxWidth: 575,\n  },\n  [BREAKPOINTS.SMALL]: {\n    name: BREAKPOINTS.SMALL,\n    query: '(min-width: 576px) and (max-width: 991px)',\n    minWidth: 576,\n    maxWidth: 991,\n  },\n  [BREAKPOINTS.MEDIUM]: {\n    name: BREAKPOINTS.MEDIUM,\n    query: '(min-width: 992px) and (max-width: 1279px)',\n    minWidth: 992,\n    maxWidth: 1279,\n  },\n  [BREAKPOINTS.LARGE]: {\n    name: BREAKPOINTS.LARGE,\n    query: '(min-width: 1280px) and (max-width: 1599px)',\n    minWidth: 1280,\n    maxWidth: 1599,\n  },\n  [BREAKPOINTS.X_LARGE]: {\n    name: BREAKPOINTS.X_LARGE,\n    query: '(min-width: 1600px)',\n    minWidth: 1600,\n  },\n}\n\n/**\n * Classe que observa mudanças nos breakpoints baseados em media queries.\n */\nexport class BreakpointObserver {\n  private currentBreakpoint: Breakpoint | null = null\n  private mediaQueries: { config: BreakpointSettings; mql: MediaQueryList }[] = []\n  private listeners: Set<(breakpoint: Breakpoint) => void> = new Set()\n\n  /**\n   * Cria uma nova instância do observador e inicia a observação dos breakpoints.\n   */\n  constructor() {\n    this.init()\n  }\n\n  /**\n   * Inicializa os MediaQueryLists para cada breakpoint, adicionando listeners.\n   */\n  private init() {\n    for (const breakpointName of Object.values(BREAKPOINTS)) {\n      const config = BREAKPOINT_SETTINGS[breakpointName]\n      const mql = window.matchMedia(config.query)\n      this.mediaQueries.push({ config, mql })\n\n      if (mql.matches) {\n        this.currentBreakpoint = config.name\n      }\n\n      mql.addEventListener('change', this.handleChange)\n    }\n  }\n\n  /**\n   * Função chamada quando ocorre mudança em algum media query.\n   * Atualiza o breakpoint atual e notifica os listeners se houver mudança.\n   */\n  private handleChange = () => {\n    for (const { config, mql } of this.mediaQueries) {\n      if (mql.matches && this.currentBreakpoint !== config.name) {\n        this.currentBreakpoint = config.name\n        this.notifyListeners()\n        break\n      }\n    }\n  }\n\n  /**\n   * Notifica todos os callbacks inscritos sobre a mudança do breakpoint atual.\n   */\n  private notifyListeners() {\n    if (this.currentBreakpoint === null) return\n\n    for (const listener of this.listeners) {\n      listener(this.currentBreakpoint)\n    }\n  }\n\n  /**\n   * Retorna o breakpoint atual detectado.\n   * @returns {Breakpoint | null} Breakpoint atual ou null se não definido\n   */\n  getCurrentBreakpoint(): Breakpoint | null {\n    return this.currentBreakpoint\n  }\n\n  /**\n   * Retorna as configurações completas de um breakpoint específico.\n   * @param {Breakpoint} breakpoint - Breakpoint para consulta\n   * @returns {BreakpointSettings | undefined} Configurações do breakpoint, ou undefined se não encontrado\n   */\n  getBreakpointSettings(breakpoint: Breakpoint): BreakpointSettings | undefined {\n    return BREAKPOINT_SETTINGS[breakpoint]\n  }\n\n  /**\n   * Retorna a query CSS associada a um breakpoint.\n   * @param {Breakpoint} breakpoint - Breakpoint para consulta\n   * @returns {string | undefined} Query CSS, ou undefined se não encontrado\n   */\n  getBreakpointQuery(breakpoint: Breakpoint): string | undefined {\n    return BREAKPOINT_SETTINGS[breakpoint]?.query\n  }\n\n  /**\n   * Retorna uma lista com todos os breakpoints disponíveis.\n   * @returns {Breakpoint[]} Array com todos os breakpoints\n   */\n  getAllBreakpoints(): Breakpoint[] {\n    return Object.values(BREAKPOINTS)\n  }\n\n  /**\n   * Retorna uma lista de breakpoints filtrada segundo o tipo e breakpoint base.\n   * Tipos aceitos:\n   * - 'above': todos acima do breakpoint informado\n   * - 'below': todos abaixo do breakpoint informado\n   * - 'from': breakpoint informado e todos acima\n   * - 'until': breakpoint informado e todos abaixo\n   * - 'only': somente o breakpoint informado\n   * @param {'above' | 'below' | 'from' | 'until' | 'only'} type - Tipo de filtro\n   * @param {Breakpoint} breakpoint - Breakpoint base para filtro\n   * @returns {Breakpoint[]} Lista filtrada de breakpoints\n   */\n  static getBreakpoints(type: 'above' | 'below' | 'from' | 'until' | 'only', breakpoint: Breakpoint): Breakpoint[] {\n    const breakpointOrder = Object.values(BREAKPOINTS)\n    const index = breakpointOrder.indexOf(breakpoint)\n\n    if (index === -1) return []\n\n    switch (type) {\n      case 'above':\n        return breakpointOrder.slice(index + 1)\n      case 'below':\n        return breakpointOrder.slice(0, index)\n      case 'from':\n        return breakpointOrder.slice(index)\n      case 'until':\n        return breakpointOrder.slice(0, index + 1)\n      case 'only':\n        return [breakpoint]\n      default:\n        return []\n    }\n  }\n\n  /**\n   * Adiciona um listener para receber notificações quando o breakpoint mudar.\n   * O callback é chamado imediatamente com o breakpoint atual (se houver).\n   * @param {(breakpoint: Breakpoint) => void} callback - Função para receber notificações\n   */\n  subscribe(callback: (breakpoint: Breakpoint) => void): void {\n    this.listeners.add(callback)\n    if (this.currentBreakpoint !== null) {\n      callback(this.currentBreakpoint)\n    }\n  }\n\n  /**\n   * Remove um listener previamente registrado.\n   * @param {(breakpoint: Breakpoint) => void} callback - Função a ser removida\n   */\n  unsubscribe(callback: (breakpoint: Breakpoint) => void): void {\n    this.listeners.delete(callback)\n  }\n\n  /**\n   * Remove todos os listeners e para a observação dos media queries.\n   */\n  destroy(): void {\n    for (const { mql } of this.mediaQueries) {\n      mql.removeEventListener('change', this.handleChange)\n    }\n\n    this.listeners.clear()\n    this.mediaQueries = []\n    this.currentBreakpoint = null\n  }\n}\n"]}

package/dist/components/br-avatar.js

@@ -2,13 +2,13 @@
  * Construído por SERPRO
  * © https://serpro.gov.br/ - MIT License.
  */
-import { p as t, H as a, h as e, c as r } from "./p-DSkSDmzD.js";
+import { p as t, t as a, H as e, h as r, c as i } from "./p-Dl8sbmQD.js";
 
-import { d as i } from "./p-Ck56essO.js";
+import { d as o } from "./p-DPI-6oom.js";
 
-const o = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}.d-flex{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important}}.justify-content-start{-webkit-box-pack:start !important;-ms-flex-pack:start !important;justify-content:flex-start !important}.justify-content-end{-webkit-box-pack:end !important;-ms-flex-pack:end !important;justify-content:flex-end !important}.justify-content-center{-webkit-box-pack:center !important;-ms-flex-pack:center !important;justify-content:center !important}.align-items-center{-webkit-box-align:center !important;-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.col-2{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container,.container-lg{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container,.container-lg{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base)*-1) !important}.ml-2{margin-left:var(--spacing-scale-base) !important}.m-3{margin:var(--spacing-scale-2x) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-medium{font-weight:500 !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}.ease{-webkit-animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1);animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{-webkit-animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);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)}*[data-toggle=collapse]:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-avatar{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small);--avatar-small:40px;--avatar-medium:100px;--avatar-large:160px;--avatar-icon-small:var(--icon-size-2x);--avatar-icon-medium:var(--icon-size-5x);--avatar-icon-large:var(--icon-size-8x);--avatar-text-small:var(--font-size-scale-up-03);--avatar-text-medium:var(--font-size-scale-up-07);--avatar-text-large:var(--font-size-scale-up-11);-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:rgba(0,0,0,0);border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);font-weight:var(--font-weight-bold);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:var(--avatar-size);vertical-align:middle}.br-avatar .content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .content img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}.br-avatar.small,.br-avatar[small]{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small)}.br-avatar.is-medium,.br-avatar.medium,.br-avatar[medium]{--avatar-size:var(--avatar-medium);--avatar-icon-size:var(--avatar-icon-medium);--avatar-text-size:var(--avatar-text-medium)}.br-avatar.large,.br-avatar[large]{--avatar-size:var(--avatar-large);--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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .image img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}:host{display:inline-block}:host .br-avatar .content.text-pure-0{background-color:var(--avatar-text-background-color)}:host([density=small]) .avatar-icon{margin-top:.7em}:host([density=medium]) .avatar-icon{margin-top:.95em}:host([density=large]) .avatar-icon{margin-top:.65em}";
+const avatarCss = () => `*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}main{display:block}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}.d-flex{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important}}.justify-content-start{-webkit-box-pack:start !important;-ms-flex-pack:start !important;justify-content:flex-start !important}.justify-content-end{-webkit-box-pack:end !important;-ms-flex-pack:end !important;justify-content:flex-end !important}.justify-content-center{-webkit-box-pack:center !important;-ms-flex-pack:center !important;justify-content:center !important}.align-items-center{-webkit-box-align:center !important;-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.col-2{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{-ms-flex-preferred-size:33.3333333333%;flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base)*-1) !important}.ml-2{margin-left:var(--spacing-scale-base) !important}.m-3{margin:var(--spacing-scale-2x) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-interactive{--background:var(--interactive);background:var(--interactive) !important}.text-primary-default{color:var(--color-primary-default) !important}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-medium{font-weight:500 !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}.ease{-webkit-animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1);animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{-webkit-animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fab{--icon-size:var(--icon-size-base);display:inline-block;font-size:var(--icon-size);text-align:center;width:calc(var(--icon-size) + 8px)}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);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)}*[data-toggle=collapse]:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-avatar{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small);--avatar-small:40px;--avatar-medium:100px;--avatar-large:160px;--avatar-icon-small:var(--icon-size-2x);--avatar-icon-medium:var(--icon-size-5x);--avatar-icon-large:var(--icon-size-8x);--avatar-text-small:var(--font-size-scale-up-03);--avatar-text-medium:var(--font-size-scale-up-07);--avatar-text-large:var(--font-size-scale-up-11);-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:rgba(0,0,0,0);border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);font-weight:var(--font-weight-bold);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:var(--avatar-size);vertical-align:middle}.br-avatar .content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .content img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}.br-avatar .content .fab{--icon-size:var(--avatar-icon-size);margin-top:.25em}.br-avatar.small,.br-avatar[small]{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small)}.br-avatar.is-medium,.br-avatar.medium,.br-avatar[medium]{--avatar-size:var(--avatar-medium);--avatar-icon-size:var(--avatar-icon-medium);--avatar-text-size:var(--avatar-text-medium)}.br-avatar.large,.br-avatar[large]{--avatar-size:var(--avatar-large);--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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .image img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}.br-avatar .image .fab{--icon-size:var(--avatar-icon-size);margin-top:.25em}:host{display:inline-block}:host .br-avatar .content.text-pure-0{background-color:var(--avatar-text-background-color)}:host([density=small]) .avatar-icon{margin-top:.7em}:host([density=medium]) .avatar-icon{margin-top:.95em}:host([density=large]) .avatar-icon{margin-top:.65em}`;
 
-const n =  t(class t extends a {
+const n =  t(class t extends e {
   constructor(t) {
     super();
     if (t !== false) {
@@ -141,7 +141,7 @@ const n =  t(class t extends a {
      * Renderiza o avatar do tipo 'fotográfico/imagem'.
      * Exibe uma imagem carregada via URL.
      */  renderImageAvatar() {
-    return e("img", {
+    return r("img", {
       src: this.src,
       alt: this.alt,
       loading: "lazy",
@@ -152,7 +152,7 @@ const n =  t(class t extends a {
      * Renderiza o avatar do tipo 'icônico'.
      * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.
      */  renderIconAvatar() {
-    return e("br-icon", {
+    return r("br-icon", {
       "icon-name": "fa-solid:user",
       height: this.getIconSize(),
       width: this.getIconWidth(),
@@ -176,15 +176,15 @@ const n =  t(class t extends a {
     return this.renderIconAvatar();
   }
   render() {
-    return e(r, {
+    return r(i, {
       key: "107f017cc03806c1962503ed5f1a480d4145f56a"
-    }, e("span", {
+    }, r("span", {
       key: "5ae7354b17aa85004e78ecc64a8e5461df7b72b7",
       id: this.customId,
       class: this.getCssClassMap(),
       role: "img",
       "aria-label": this.getAriaLabel()
-    }, e("span", {
+    }, r("span", {
       key: "ad787136045790ccee184d4e5f8059b66d0c634a",
       class: this.getContentClasses()
     }, this.renderAvatar())));
@@ -198,7 +198,7 @@ const n =  t(class t extends a {
     };
   }
   static get style() {
-    return o;
+    return avatarCss();
   }
 }, [ 257, "br-avatar", {
   density: [ 1025 ],
@@ -224,14 +224,14 @@ function defineCustomElement$1() {
   t.forEach((t => {
     switch (t) {
      case "br-avatar":
-      if (!customElements.get(t)) {
-        customElements.define(t, n);
+      if (!customElements.get(a(t))) {
+        customElements.define(a(t), n);
       }
       break;
 
      case "br-icon":
-      if (!customElements.get(t)) {
-        i();
+      if (!customElements.get(a(t))) {
+        o();
       }
       break;
     }

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

@@ -1 +1 @@
-{"version":3,"names":["avatarCss","Avatar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","density","customId","avatarId","alt","isIconic","disabled","bgColor","hasError","handleImageError","console","error","src","handleDensityChange","newValue","includes","warn","el","setAttribute","componentWillLoad","setCustomBackgroundColor","componentDidUpdate","getCssClassMap","hasContent","value","trim","length","getContentClasses","text","style","setProperty","getAriaLabel","hostAriaLabel","getAttribute","getIconSize","tokenName","getComputedStyle","getPropertyValue","getIconWidth","baseSize","numericValue","parseInt","replace","renderTextAvatar","toUpperCase","renderImageAvatar","h","loading","onError","renderIconAvatar","height","width","class","renderAvatar","render","Host","key","id","role"],"sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n\n  .br-avatar .content.text-pure-0 {\n    background-color: var(--avatar-text-background-color);\n  }\n}\n\n:host([density=\"small\"]) .avatar-icon {\n  margin-top: 0.7em;\n}\n\n:host([density=\"medium\"]) .avatar-icon {\n  margin-top: 0.95em;\n}\n\n:host([density=\"large\"]) .avatar-icon {\n  margin-top: 0.65em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\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/avatar?tab=designer).\n *\n * @example\n * ```html\n * <br-avatar is-iconic></br-avatar>\n * ```\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({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\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() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\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() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Permite definir a cor de fundo do componente.\n   * Aceita os seguintes formatos de cor:\n   * - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc.\n   * - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc.\n   * - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc.\n   * - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc.\n   * - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc.\n   * - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc.\n   * Se não especificada, usa a cor padrão do tema.\n   */\n  @Prop({ reflect: true }) readonly bgColor: string = '#DBE8FB'\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.bgColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.bgColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} role=\"img\" aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["avatarCss","Avatar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","density","customId","avatarId","alt","isIconic","disabled","bgColor","hasError","handleImageError","console","error","src","handleDensityChange","newValue","includes","warn","el","setAttribute","componentWillLoad","setCustomBackgroundColor","componentDidUpdate","getCssClassMap","hasContent","value","trim","length","getContentClasses","text","style","setProperty","getAriaLabel","hostAriaLabel","getAttribute","getIconSize","tokenName","getComputedStyle","getPropertyValue","getIconWidth","baseSize","numericValue","parseInt","replace","renderTextAvatar","toUpperCase","renderImageAvatar","h","loading","onError","renderIconAvatar","height","width","class","renderAvatar","render","Host","key","id","role"],"sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n\n  .br-avatar .content.text-pure-0 {\n    background-color: var(--avatar-text-background-color);\n  }\n}\n\n:host([density=\"small\"]) .avatar-icon {\n  margin-top: 0.7em;\n}\n\n:host([density=\"medium\"]) .avatar-icon {\n  margin-top: 0.95em;\n}\n\n:host([density=\"large\"]) .avatar-icon {\n  margin-top: 0.65em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\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/avatar?tab=designer).\n *\n * @example\n * ```html\n * <br-avatar is-iconic></br-avatar>\n * ```\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({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\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() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\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() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Permite definir a cor de fundo do componente.\n   * Aceita os seguintes formatos de cor:\n   * - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc.\n   * - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc.\n   * - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc.\n   * - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc.\n   * - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc.\n   * - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc.\n   * Se não especificada, usa a cor padrão do tema.\n   */\n  @Prop({ reflect: true }) readonly bgColor: string = '#DBE8FB'\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.bgColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.bgColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} role=\"img\" aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"mappings":"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","ignoreList":[]}