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

package/dist/esm/br-skiplink-item.entry.js

@@ -0,0 +1,191 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-DULshOxW.js';
+import { _ as __awaiter } from './tslib.es6-DIPMDb5E.js';
+import { H as Helpers } from './helpers-BRKK5nMe.js';
+
+const skipLinkItemCss = () => `*,*::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)}:host{display:contents}:host br-item{-webkit-box-shadow:var(--skiplink-shadow);box-shadow:var(--skiplink-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--skiplink-min-width);position:absolute;top:-100vh;-webkit-transition:top var(--skiplink-duration) var(--skiplink-timing-function);transition:top var(--skiplink-duration) var(--skiplink-timing-function);white-space:nowrap;width:auto}:host br-item:focus-within{top:0}:host(.compound-mode) br-item{-webkit-box-shadow:none;box-shadow:none;min-width:0;position:relative;top:0}`;
+
+const SkipLinkItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.brSkiplinkItemClick = createEvent(this, "brSkiplinkItemClick", 7);
+        this.brSkiplinkItemFocus = createEvent(this, "brSkiplinkItemFocus", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.elementInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.elementInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.elementInternals;
+        }
+        /**
+         * ID personalizado.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = Helpers.generateUniqueId();
+        /**
+         * Controla a visibilidade da tag numérica.
+         * Quando `true`, a tag numérica não será exibida, mesmo que `keyNumber` esteja definido.
+         * O atalho de teclado continua funcionando, apenas a indicação visual é ocultada.
+         */
+        this.hideTag = false;
+        /**
+         * Estado interno que armazena o índice do item (1, 2, 3...).
+         * Definido automaticamente pelo componente pai.
+         */
+        this.itemIndex = null;
+        /**
+         * Estado interno que armazena o total de itens.
+         * Definido automaticamente pelo componente pai.
+         */
+        this.itemTotal = null;
+        /**
+         * MutationObserver para monitorar mudanças nos atributos de contagem.
+         * Observa quando o componente pai define data-item-index e data-item-total.
+         */
+        this.mutationObserver = null;
+    }
+    /**
+     * Move o foco para este item.
+     */
+    itemFocus() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const brItemElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('br-item');
+            if (brItemElement !== null) {
+                yield new Promise((resolve) => requestAnimationFrame(resolve));
+                const brItemShadowRoot = brItemElement.shadowRoot;
+                if (brItemShadowRoot !== null) {
+                    const focusableElement = brItemShadowRoot.querySelector('a, button');
+                    if (focusableElement !== null) {
+                        focusableElement.focus();
+                        this.brSkiplinkItemFocus.emit({ itemId: this.customId });
+                        return;
+                    }
+                }
+                brItemElement.focus();
+                this.brSkiplinkItemFocus.emit({ itemId: this.customId });
+            }
+        });
+    }
+    /**
+     * Navega para o target definido.
+     * Move o foco para o elemento alvo e ajusta a rolagem da página se necessário.
+     */
+    navigateToTarget() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const targetElement = document.querySelector(this.target);
+                if (targetElement !== null) {
+                    targetElement.setAttribute('tabindex', '-1');
+                    targetElement.focus();
+                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    this.brSkiplinkItemClick.emit({
+                        itemId: this.customId,
+                        target: this.target,
+                    });
+                }
+                else {
+                    console.warn(`Skip Link: Target element "${this.target}" not found`);
+                }
+            }
+            catch (error) {
+                console.error('Skip Link: Error navigating to target', error);
+            }
+        });
+    }
+    /**
+     * Listener para cliques no item.
+     */
+    handleClick(_event) {
+        this.navigateToTarget();
+    }
+    /**
+     * Listener para teclas Enter, Space e atalho Alt+[keyNumber].
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            const skipLink = this.el.closest('br-skip-link');
+            if (skipLink !== null && typeof skipLink.hide === 'function') {
+                event.preventDefault();
+                skipLink.hide();
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.navigateToTarget();
+            return;
+        }
+        // atalho Alt+[keyNumber]
+        if (event.altKey && this.keyNumber && event.key === this.keyNumber.toString()) {
+            event.preventDefault();
+            this.navigateToTarget();
+            return;
+        }
+    }
+    /**
+     * Listener para foco no item.
+     */
+    handleFocus() {
+        this.brSkiplinkItemFocus.emit({ itemId: this.customId });
+    }
+    componentWillLoad() {
+        this.updateItemCount();
+    }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' &&
+                    (mutation.attributeName === 'data-item-index' || mutation.attributeName === 'data-item-total')) {
+                    this.updateItemCount();
+                }
+            });
+        });
+        this.mutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: ['data-item-index', 'data-item-total'],
+        });
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver !== null && this.mutationObserver !== undefined) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+    }
+    /**
+     * Atualiza a contagem de itens lendo os atributos definidos pelo componente pai.
+     */
+    updateItemCount() {
+        const indexAttr = this.el.getAttribute('data-item-index');
+        const totalAttr = this.el.getAttribute('data-item-total');
+        if (indexAttr !== null && totalAttr !== null) {
+            this.itemIndex = parseInt(indexAttr, 10);
+            this.itemTotal = parseInt(totalAttr, 10);
+        }
+        else {
+            this.itemIndex = null;
+            this.itemTotal = null;
+        }
+    }
+    /**
+     * Retorna a string de contagem no formato (X/Y) se disponível.
+     */
+    getItemCountText() {
+        if (this.itemIndex !== null && this.itemTotal !== null) {
+            return ` (${this.itemIndex}/${this.itemTotal})`;
+        }
+        return null;
+    }
+    render() {
+        const itemCountText = this.getItemCountText();
+        return (h(Host, { key: 'ca32169dd3540c531c0977f3d5561abbeffdd81b' }, h("br-item", { key: 'c0b963992d5f85e2acae63573c11972acfccd25e', href: this.target, id: this.customId, density: "large", "aria-keyshortcuts": this.keyNumber !== undefined ? `Alt+${this.keyNumber}` : undefined }, h("slot", { key: 'd2aee7a1363d1e7d3e44073590427eefbefd2ca8' }), itemCountText && h("span", { key: 'b6fa1f92e1f78559fdb5a8ebd6ce3014d0a47c68', "aria-hidden": "true" }, itemCountText), this.keyNumber && !this.hideTag && (h("slot", { key: 'c55ea6d0567260be96df1f44ee95254458aed1a0', name: "tag", slot: "end" }, h("br-tag", { key: '52e02db89b514c608d53efc1b70be0186b3b200d', class: "ml-1 text", color: "bg-interactive" }, this.keyNumber))))));
+    }
+    get el() { return getElement(this); }
+};
+SkipLinkItem.style = skipLinkItemCss();
+
+export { SkipLinkItem as br_skiplink_item };
+//# sourceMappingURL=br-skiplink-item.entry.js.map

package/dist/esm/br-skiplink-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"br-skiplink-item.entry.js","sources":["../../packages/webcomponents/src/components/skip-link/skip-link-item/skip-link-item.scss?tag=br-skiplink-item&encapsulation=shadow","../../packages/webcomponents/src/components/skip-link/skip-link-item/skip-link-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  br-item {\n    box-shadow: var(--skiplink-shadow);\n    display: inline-flex;\n    min-width: var(--skiplink-min-width);\n    position: absolute;\n    top: -100vh;\n    transition: top var(--skiplink-duration) var(--skiplink-timing-function);\n    white-space: nowrap;\n    width: auto;\n\n    &:focus-within {\n      top: 0;\n    }\n  }\n}\n\n:host(.compound-mode) {\n  br-item {\n    box-shadow: none;\n    min-width: 0;\n    position: relative;\n    top: 0;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core'\n\nimport Helpers from '../../../utils/helpers'\n\n/**\n * Item individual do componente Skip Link.\n * Representa um link de navegação rápida para uma seção específica da página.\n * Permite navegação por atalhos de teclado usando Alt+[keyNumber].\n *\n * @slot default - Conteúdo do item (texto do link).\n * @slot tag - Slot opcional para personalizar a tag numérica que exibe o atalho de teclado. Por padrão, a tag é criada automaticamente com o valor de `key-number`.\n *\n * @example\n * ```html\n * <br-skiplink-item target=\"#main-content\" key-number=\"1\">\n *   Ir para o conteúdo principal\n * </br-skiplink-item>\n * ```\n *\n */\n@Component({\n  tag: 'br-skiplink-item',\n  styleUrl: 'skip-link-item.scss',\n  shadow: true,\n})\nexport class SkipLinkItem {\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: HTMLBrSkiplinkItemElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * ID do elemento de destino ou seletor CSS.\n   * Este é o elemento para o qual o usuário será levado ao ativar este item.\n   */\n  @Prop({ reflect: true }) readonly target!: string\n\n  /**\n   * Número da tecla para acesso rápido.\n   * Permite que o usuário ative este item pressionando Alt+[keyNumber].\n   * Aceita valores de 1 a 9.\n   * Esta propriedade implementa uma alternativa ao accessKey nativa,\n   * fornecendo um atalho de teclado consistente e acessível.\n   */\n  @Prop({ reflect: true }) readonly keyNumber?: number\n\n  /**\n   * ID personalizado.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = Helpers.generateUniqueId()\n\n  /**\n   * Controla a visibilidade da tag numérica.\n   * Quando `true`, a tag numérica não será exibida, mesmo que `keyNumber` esteja definido.\n   * O atalho de teclado continua funcionando, apenas a indicação visual é ocultada.\n   */\n  @Prop({ reflect: true }) readonly hideTag: boolean = false\n\n  /**\n   * Estado interno que armazena o índice do item (1, 2, 3...).\n   * Definido automaticamente pelo componente pai.\n   */\n  @State() private itemIndex: number | null = null\n\n  /**\n   * Estado interno que armazena o total de itens.\n   * Definido automaticamente pelo componente pai.\n   */\n  @State() private itemTotal: number | null = null\n\n  /**\n   * MutationObserver para monitorar mudanças nos atributos de contagem.\n   * Observa quando o componente pai define data-item-index e data-item-total.\n   */\n  private mutationObserver: MutationObserver | null = null\n\n  /**\n   * Evento emitido quando o item é clicado/ativado.\n   * O evento contém informações sobre o item e o target.\n   */\n  @Event() brSkiplinkItemClick: EventEmitter<{ itemId: string; target: string }>\n\n  /**\n   * Evento emitido quando o item recebe foco.\n   */\n  @Event() brSkiplinkItemFocus: EventEmitter<{ itemId: string }>\n\n  /**\n   * Move o foco para este item.\n   */\n  @Method()\n  async itemFocus(): Promise<void> {\n    const brItemElement = this.el.shadowRoot?.querySelector('br-item') as HTMLElement | null\n\n    if (brItemElement !== null) {\n      await new Promise((resolve) => requestAnimationFrame(resolve))\n\n      const brItemShadowRoot = brItemElement.shadowRoot\n      if (brItemShadowRoot !== null) {\n        const focusableElement = brItemShadowRoot.querySelector('a, button') as HTMLElement | null\n        if (focusableElement !== null) {\n          focusableElement.focus()\n          this.brSkiplinkItemFocus.emit({ itemId: this.customId })\n          return\n        }\n      }\n\n      brItemElement.focus()\n      this.brSkiplinkItemFocus.emit({ itemId: this.customId })\n    }\n  }\n\n  /**\n   * Navega para o target definido.\n   * Move o foco para o elemento alvo e ajusta a rolagem da página se necessário.\n   */\n  @Method()\n  async navigateToTarget(): Promise<void> {\n    try {\n      const targetElement = document.querySelector(this.target) as HTMLElement | null\n\n      if (targetElement !== null) {\n        targetElement.setAttribute('tabindex', '-1')\n        targetElement.focus()\n\n        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' })\n\n        this.brSkiplinkItemClick.emit({\n          itemId: this.customId,\n          target: this.target,\n        })\n      } else {\n        console.warn(`Skip Link: Target element \"${this.target}\" not found`)\n      }\n    } catch (error) {\n      console.error('Skip Link: Error navigating to target', error)\n    }\n  }\n\n  /**\n   * Listener para cliques no item.\n   */\n  @Listen('click')\n  handleClick(_event: MouseEvent) {\n    this.navigateToTarget()\n  }\n\n  /**\n   * Listener para teclas Enter, Space e atalho Alt+[keyNumber].\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      const skipLink = this.el.closest('br-skip-link') as HTMLBrSkipLinkElement\n      if (skipLink !== null && typeof skipLink.hide === 'function') {\n        event.preventDefault()\n        skipLink.hide()\n      }\n      return\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      this.navigateToTarget()\n      return\n    }\n\n    // atalho Alt+[keyNumber]\n    if (event.altKey && this.keyNumber && event.key === this.keyNumber.toString()) {\n      event.preventDefault()\n      this.navigateToTarget()\n      return\n    }\n  }\n\n  /**\n   * Listener para foco no item.\n   */\n  @Listen('focus')\n  handleFocus() {\n    this.brSkiplinkItemFocus.emit({ itemId: this.customId })\n  }\n\n  componentWillLoad() {\n    this.updateItemCount()\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          (mutation.attributeName === 'data-item-index' || mutation.attributeName === 'data-item-total')\n        ) {\n          this.updateItemCount()\n        }\n      })\n    })\n\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      attributeFilter: ['data-item-index', 'data-item-total'],\n    })\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver !== null && this.mutationObserver !== undefined) {\n      this.mutationObserver.disconnect()\n      this.mutationObserver = null\n    }\n  }\n\n  /**\n   * Atualiza a contagem de itens lendo os atributos definidos pelo componente pai.\n   */\n  private updateItemCount() {\n    const indexAttr = this.el.getAttribute('data-item-index')\n    const totalAttr = this.el.getAttribute('data-item-total')\n\n    if (indexAttr !== null && totalAttr !== null) {\n      this.itemIndex = parseInt(indexAttr, 10)\n      this.itemTotal = parseInt(totalAttr, 10)\n    } else {\n      this.itemIndex = null\n      this.itemTotal = null\n    }\n  }\n\n  /**\n   * Retorna a string de contagem no formato (X/Y) se disponível.\n   */\n  private getItemCountText(): string | null {\n    if (this.itemIndex !== null && this.itemTotal !== null) {\n      return ` (${this.itemIndex}/${this.itemTotal})`\n    }\n    return null\n  }\n\n  render() {\n    const itemCountText = this.getItemCountText()\n\n    return (\n      <Host>\n        <br-item\n          href={this.target}\n          id={this.customId}\n          density=\"large\"\n          aria-keyshortcuts={this.keyNumber !== undefined ? `Alt+${this.keyNumber}` : undefined}\n        >\n          <slot></slot>\n          {itemCountText && <span aria-hidden=\"true\">{itemCountText}</span>}\n          {this.keyNumber && !this.hideTag && (\n            <slot name=\"tag\" slot=\"end\">\n              <br-tag class=\"ml-1 text\" color=\"bg-interactive\">\n                {this.keyNumber}\n              </br-tag>\n            </slot>\n          )}\n        </br-item>\n      </Host>\n    )\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/br-step-item.entry.js

@@ -2,10 +2,10 @@
  * Construído por SERPRO
  * © https://serpro.gov.br/ - MIT License.
  */
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-ByGJPTh2.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-DULshOxW.js';
 import { _ as __awaiter } from './tslib.es6-DIPMDb5E.js';
 
-const stepItemCss = "*,*::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)}:host{display:-webkit-box;display:-ms-flexbox;display:flex}.disabled-host{pointer-events:none}.step-button{position:relative;z-index:2}.mode-controller{border:1px solid var(--gray-20);width:14px;height:14px;cursor:pointer;border-radius:50%;background-color:var(--gray-20)}.mode-controller:focus-visible{outline:var(--focus-width) var(--focus-style) var(--focus) var(--focus-offset)}.mode-controller:hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgb(var(--interactive-rgb), var(--hover))), to(rgb(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgb(var(--interactive-rgb), var(--hover)), rgb(var(--interactive-rgb), var(--hover)))}[data-active].mode-controller{border:1px solid var(--gray-20);background-color:var(--active)}.step-item-container-horizontal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.step-item-container-horizontal.label-top::after{content:\"\";left:0;bottom:50%}.step-item-container-horizontal.label-bottom::after{content:\"\";left:0;bottom:86%}.step-item-container-horizontal.label-left::after{bottom:68%;width:70%;left:26%}.step-item-container-horizontal.label-right::after{bottom:68%;width:58%;left:42%}.step-item-container-vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}.step-item-container-vertical::after{content:\"\";position:relative;height:100%;background-color:var(--interactive);display:block;-webkit-transform:translate(50%, 20px);transform:translate(50%, 20px);z-index:-1;width:2px;right:50%}.step-item-container-vertical.label-bottom::after{top:50%;height:70%}.step-item-container-vertical.label-top::after{top:50%;height:70%}.step-item-container-vertical.label-left::after{right:16%;top:12%}.step-item-container-vertical.label-right::after{top:12%;right:86%}.step-item-content{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:auto;min-height:100px;min-width:80px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.step-item-content.label-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.step-item-content.label-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.step-item-content.label-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.step-item-content.label-right{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.controller{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:0 5px;min-height:unset;min-width:unset}.step-item-container-vertical .step-item-content.label-right,.step-item-container-vertical .step-item-content.label-left{background-color:rgba(0,0,0,0)}.step-item-indicator-area{display:inline-block;position:relative;z-index:1}.step-item-indicator-area .icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:4;border-radius:50%;-webkit-transform:translate(25px, -5px);transform:translate(25px, -5px);color:#fff;font-size:16px;font-weight:900;width:29px;height:29px}.step-item-indicator-area .icon.no-content{-webkit-transform:translate(0, 0);transform:translate(0, 0);width:41px;height:41px}[data-active].step-item-indicator-area .icon.no-content{-webkit-transform:translate(5px, 5px);transform:translate(5px, 5px);width:30px;height:30px}.success{background-color:var(--success)}.info{background-color:var(--info)}.danger{background-color:var(--danger)}.warning{background-color:var(--warning)}.step-item-label-area{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex}.step-item-label-area.label-left{padding:0 14px}.step-item-label-area.label-right{padding:0 14px}.step-item-label-area>span{font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);color:var(--interactive)}.vertical.step-item-label-area.label-top{padding-top:14px}.vertical.step-item-label-area.label-bottom{padding-bottom:14px}.horizontal.step-item-label-area.label-top{padding-bottom:14px}.horizontal.step-item-label-area.label-bottom{padding-top:14px}.step-item-container-vertical .step-item-content.label-right.last .step-item-indicator-area::after,.step-item-container-vertical .step-item-content.label-left.last .step-item-indicator-area::after,.step-item-container-horizontal .step-item-content.label-bottom.last .step-item-indicator-area::after{display:none}.step-item-container-vertical .step-item-content.label-top .step-item-label-area,.step-item-container-vertical .step-item-content.label-bottom .step-item-label-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.step-item-container-horizontal::after{content:\"\";position:relative;height:2px;background-color:var(--interactive);display:block;-webkit-transform:translate(50%, 20px);transform:translate(50%, 20px);z-index:-1;width:100%;left:0;bottom:75%}.step-item-container-horizontal.last::after,.step-item-container-horizontal.controller::after,.step-item-container-vertical.last::after{content:\"\";height:0;display:none}.step-item-container-horizontal .step-item-content.label-left.timeline.last::after{content:\"\";position:absolute;width:160px;height:2px;background-color:var(--interactive);display:inline-block;right:calc(100% - 80px);bottom:50%;z-index:-1}.content-type-br-icon{color:var(--interactive);font-size:16px;font-weight:900}[data-active] .content-type-br-icon{color:var(--interactive);color:#fff}.button-controller{width:15px;height:15px}@media (width <= 1440px){.step-item-container-horizontal.label-left::after{width:50%;left:48%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:58%;left:48%}}@media (width <= 1024px){.step-item-container-horizontal.label-left::after{width:34%;left:58%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 768px){.step-item-container-horizontal.label-left::after{width:22%;left:76%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 425px){.step-item-container-horizontal.label-left::after{width:20%;left:80%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 375px){.step-item-container-horizontal.label-left::after{width:18%;left:82%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 320px){.step-item-container-horizontal.label-left::after{width:16%;left:85%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}";
+const stepItemCss = () => `*,*::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)}:host{display:-webkit-box;display:-ms-flexbox;display:flex}.disabled-host{pointer-events:none}.step-button{position:relative;z-index:2}.mode-controller{border:1px solid var(--gray-20);width:14px;height:14px;cursor:pointer;border-radius:50%;background-color:var(--gray-20)}.mode-controller:focus-visible{outline:var(--focus-width) var(--focus-style) var(--focus) var(--focus-offset)}.mode-controller:hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgb(var(--interactive-rgb), var(--hover))), to(rgb(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgb(var(--interactive-rgb), var(--hover)), rgb(var(--interactive-rgb), var(--hover)))}[data-active].mode-controller{border:1px solid var(--gray-20);background-color:var(--active)}.step-item-container-horizontal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.step-item-container-horizontal.label-top::after{content:"";left:0;bottom:50%}.step-item-container-horizontal.label-bottom::after{content:"";left:0;bottom:86%}.step-item-container-horizontal.label-left::after{bottom:68%;width:70%;left:26%}.step-item-container-horizontal.label-right::after{bottom:68%;width:58%;left:42%}.step-item-container-vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}.step-item-container-vertical::after{content:"";position:relative;height:100%;background-color:var(--interactive);display:block;-webkit-transform:translate(50%, 20px);transform:translate(50%, 20px);z-index:-1;width:2px;right:50%}.step-item-container-vertical.label-bottom::after{top:50%;height:70%}.step-item-container-vertical.label-top::after{top:50%;height:70%}.step-item-container-vertical.label-left::after{right:16%;top:12%}.step-item-container-vertical.label-right::after{top:12%;right:86%}.step-item-content{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:auto;min-height:100px;min-width:80px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.step-item-content.label-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.step-item-content.label-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.step-item-content.label-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.step-item-content.label-right{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.controller{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:0 5px;min-height:unset;min-width:unset}.step-item-container-vertical .step-item-content.label-right,.step-item-container-vertical .step-item-content.label-left{background-color:rgba(0,0,0,0)}.step-item-indicator-area{display:inline-block;position:relative;z-index:1}.step-item-indicator-area .icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:4;border-radius:50%;-webkit-transform:translate(25px, -5px);transform:translate(25px, -5px);color:#fff;font-size:16px;font-weight:900;width:29px;height:29px}.step-item-indicator-area .icon.no-content{-webkit-transform:translate(0, 0);transform:translate(0, 0);width:41px;height:41px}[data-active].step-item-indicator-area .icon.no-content{-webkit-transform:translate(5px, 5px);transform:translate(5px, 5px);width:30px;height:30px}.success{background-color:var(--success)}.info{background-color:var(--info)}.danger{background-color:var(--danger)}.warning{background-color:var(--warning)}.step-item-label-area{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex}.step-item-label-area.label-left{padding:0 14px}.step-item-label-area.label-right{padding:0 14px}.step-item-label-area>span{font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);color:var(--interactive)}.vertical.step-item-label-area.label-top{padding-top:14px}.vertical.step-item-label-area.label-bottom{padding-bottom:14px}.horizontal.step-item-label-area.label-top{padding-bottom:14px}.horizontal.step-item-label-area.label-bottom{padding-top:14px}.step-item-container-vertical .step-item-content.label-right.last .step-item-indicator-area::after,.step-item-container-vertical .step-item-content.label-left.last .step-item-indicator-area::after,.step-item-container-horizontal .step-item-content.label-bottom.last .step-item-indicator-area::after{display:none}.step-item-container-vertical .step-item-content.label-top .step-item-label-area,.step-item-container-vertical .step-item-content.label-bottom .step-item-label-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.step-item-container-horizontal::after{content:"";position:relative;height:2px;background-color:var(--interactive);display:block;-webkit-transform:translate(50%, 20px);transform:translate(50%, 20px);z-index:-1;width:100%;left:0;bottom:75%}.step-item-container-horizontal.last::after,.step-item-container-horizontal.controller::after,.step-item-container-vertical.last::after{content:"";height:0;display:none}.step-item-container-horizontal .step-item-content.label-left.timeline.last::after{content:"";position:absolute;width:160px;height:2px;background-color:var(--interactive);display:inline-block;right:calc(100% - 80px);bottom:50%;z-index:-1}.content-type-br-icon{color:var(--interactive);font-size:16px;font-weight:900}[data-active] .content-type-br-icon{color:var(--interactive);color:#fff}.button-controller{width:15px;height:15px}@media (width <= 1440px){.step-item-container-horizontal.label-left::after{width:50%;left:48%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:58%;left:48%}}@media (width <= 1024px){.step-item-container-horizontal.label-left::after{width:34%;left:58%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 768px){.step-item-container-horizontal.label-left::after{width:22%;left:76%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 425px){.step-item-container-horizontal.label-left::after{width:20%;left:80%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 375px){.step-item-container-horizontal.label-left::after{width:18%;left:82%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}@media (width <= 320px){.step-item-container-horizontal.label-left::after{width:16%;left:85%;bottom:68%}.step-item-container-horizontal.label-right::after{bottom:68%;width:36%;left:72%}.step-item-container-vertical.label-top::after{top:50%;height:50%}}`;
 
 const StepItem = class {
     constructor(hostRef) {
@@ -223,7 +223,7 @@ const StepItem = class {
         };
     }
     render() {
-        return (h(Host, { key: 'b6692a3dd5351b8b42a7f53502a9ede7d2c13412' }, h("div", { key: 'b3d04f08e1715d76d138b1d5cb44ec3310e2b6c9', id: "item-container", class: this.getStepContainerClassMap() }, h("div", { key: '5c9c91ec4e696c1504efa9ded3aeb3b6eb1db8e3', id: "item-content", class: this.getStepItemContentClassMap() }, h("div", { key: '83701f854e87d42a5df28c226bf30b18efc02f9b', id: "indicator-area", "data-active": this.active, class: this.getStepItemIndicatorAreaClassMap() }, this.mode === 'step' && this.highlight && (h("div", { key: 'd2167e2a9f348cf247afe0dd315481a64f2c7b54', class: this.getHighlightClass() }, h("br-icon", { key: '0d34e77e304e0b617537e0802d57fe9d6c93c723', "icon-name": this.IconsName[this.highlight], class: `${this.highlight === 'warning' && 'warning-color'}` }))), this.mode === 'step' && (h("br-button", { key: '829d0a2330db1488a7fb355073b29bc6cfd0a01e', shape: "circle", emphasis: "secondary", isActive: this.active, "aria-label": `Passo ${this.content || 'sem número'}`, class: this.getStepItemIndicatorClass() }, this.contentType === 'no-content' && '', this.contentType === 'default' && this.content, this.contentType === 'br-icon' && (h("br-icon", { key: '0c1923d399651f29d49f9ae89d95c4d4e1450e06', "icon-name": this.brIconName, class: 'content-type-br-icon' })), this.contentType === 'slotted' && h("slot", { key: 'd95a6017fbe3c552c00b62bc1fb2f62cceef6c0a', name: 'content-area' }))), this.mode === 'controller' && (h("button", { key: '460b9585e2410f7fcf55fd428e3eecb57303a8c0', "data-active": this.active, class: 'mode-controller', "aria-label": `Controlador do passo ${this.content || 'sem número'}` }))), h("div", { key: '434009898a252fe07d999d2596597e2c7f3ef072', id: "label-area", class: this.getStepItemLabelAreaClassMap() }, h("span", { key: '7ea6b4644f36b4a4d360402d8aa1d454179e08c6' }, " ", this.label, " "))))));
+        return (h(Host, { key: 'd39cb9323a09f5cfbe5c3fc366c8e0ab8f8f4816' }, h("div", { key: 'cfa514c04833f73694baec1cce4227a378ce699f', id: "item-container", class: this.getStepContainerClassMap() }, h("div", { key: '1df414ecf3ad777633c4a2570ceaf46604c019b6', id: "item-content", class: this.getStepItemContentClassMap() }, h("div", { key: 'b340cba5753919d7909f01e2838a79f66a422426', id: "indicator-area", "data-active": this.active, class: this.getStepItemIndicatorAreaClassMap() }, this.mode === 'step' && this.highlight && (h("div", { key: 'ec5ce798884f088ddc0283d21e7531f7fb12a2b9', class: this.getHighlightClass() }, h("br-icon", { key: '10b4a7e8efdf14eddaedb1fc486c0afb2e6d241a', "icon-name": this.IconsName[this.highlight], class: `${this.highlight === 'warning' && 'warning-color'}` }))), this.mode === 'step' && (h("br-button", { key: '283e8ec19d004df6940e139a491d24caf06eb283', shape: "circle", emphasis: "secondary", isActive: this.active, "aria-label": `Passo ${this.content || 'sem número'}`, class: this.getStepItemIndicatorClass() }, this.contentType === 'no-content' && '', this.contentType === 'default' && this.content, this.contentType === 'br-icon' && (h("br-icon", { key: 'b11268d6fa30488d27472dc23d4d56b793801d95', "icon-name": this.brIconName, class: 'content-type-br-icon' })), this.contentType === 'slotted' && h("slot", { key: 'dc080638871287d2e0f0ddd62b945c886da7f9cc', name: 'content-area' }))), this.mode === 'controller' && (h("button", { key: '7a143ec4ad9631d531ebfff79c84fce4d1572320', "data-active": this.active, class: 'mode-controller', "aria-label": `Controlador do passo ${this.content || 'sem número'}` }))), h("div", { key: 'b6f783994cd12fd49909d945fe22d03332b61ce4', id: "label-area", class: this.getStepItemLabelAreaClassMap() }, h("span", { key: '9a68c8c359e77436613b83f04a1c2668968d1e55' }, " ", this.label, " "))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -231,7 +231,7 @@ const StepItem = class {
         "active": ["watchItemIsActive"]
     }; }
 };
-StepItem.style = stepItemCss;
+StepItem.style = stepItemCss();
 
 export { StepItem as br_step_item };
 //# sourceMappingURL=br-step-item.entry.js.map

package/dist/esm/br-step-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"br-step-item.entry.js","sources":["../../packages/webcomponents/src/components/step/step-item/step-item.scss?tag=br-step-item&encapsulation=shadow","../../packages/webcomponents/src/components/step/step-item/step-item.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n.disabled-host {\n  pointer-events: none;\n}\n\n.step-button {\n  position: relative;\n  z-index: 2;\n}\n\n.mode-controller {\n  border: 1px solid var(--gray-20);\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n  border-radius: 50%;\n  background-color: var(--gray-20);\n\n  &:focus-visible {\n    outline: var(--focus-width) var(--focus-style) var(--focus) var(--focus-offset);\n  }\n\n  &:hover {\n    background-image: linear-gradient(\n      rgb(var(--interactive-rgb), var(--hover)),\n      rgb(var(--interactive-rgb), var(--hover))\n    );\n  }\n}\n\n[data-active].mode-controller {\n  border: 1px solid var(--gray-20);\n  background-color: var(--active);\n}\n\n.step-item-container-horizontal {\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n\n  &.label-top::after {\n    content: \"\";\n    left: 0;\n    bottom: 50%;\n  }\n\n  &.label-bottom::after {\n    content: \"\";\n    left: 0;\n    bottom: 86%;\n  }\n\n  &.label-left::after {\n    bottom: 68%;\n    width: 70%;\n    left: 26%;\n  }\n\n  &.label-right::after {\n    bottom: 68%;\n    width: 58%;\n    left: 42%;\n  }\n}\n\n.step-item-container-vertical {\n  display: flex;\n  flex-direction: row;\n  max-width: max-content;\n\n  &::after {\n    content: \"\";\n    position: relative;\n    height: 100%;\n    background-color: var(--interactive);\n    display: block;\n    transform: translate(50%, 20px);\n    z-index: -1;\n    width: 2px;\n    right: 50%;\n  }\n\n  &.label-bottom::after {\n    top: 50%;\n    height: 70%;\n  }\n\n  &.label-top::after {\n    top: 50%;\n    height: 70%;\n  }\n\n  &.label-left::after {\n    right: 16%;\n    top: 12%;\n  }\n\n  &.label-right::after {\n    top: 12%;\n    right: 86%;\n  }\n}\n\n.step-item-content {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  margin: auto;\n  min-height: 100px;\n  min-width: 80px;\n  justify-content: center;\n\n  &.label-top {\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n\n  &.label-bottom {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  &.label-left {\n    flex-direction: row-reverse;\n    align-items: center;\n    background-color: #fff;\n  }\n\n  &.label-right {\n    flex-direction: row;\n    align-items: center;\n    background-color: #fff;\n  }\n}\n\n.controller {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  margin: 0 5px;\n  min-height: unset;\n  min-width: unset;\n}\n\n.step-item-container-vertical .step-item-content.label-right,\n.step-item-container-vertical .step-item-content.label-left {\n  background-color: transparent;\n}\n\n.step-item-indicator-area {\n  display: inline-block;\n  position: relative;\n  z-index: 1;\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    z-index: 4;\n    border-radius: 50%;\n    transform: translate(25px, -5px);\n    color: white;\n    font-size: 16px;\n    font-weight: 900;\n    width: 29px;\n    height: 29px;\n  }\n\n  .icon.no-content {\n    transform: translate(0, 0);\n    width: 41px;\n    height: 41px;\n  }\n}\n\n[data-active].step-item-indicator-area .icon.no-content {\n  transform: translate(5px, 5px);\n  width: 30px;\n  height: 30px;\n}\n\n.success {\n  background-color: var(--success);\n}\n\n.info {\n  background-color: var(--info);\n}\n\n.danger {\n  background-color: var(--danger);\n}\n\n.warning {\n  background-color: var(--warning);\n}\n\n.step-item-label-area {\n  padding: 0;\n  display: flex;\n\n  &.label-left {\n    padding: 0 14px;\n  }\n\n  &.label-right {\n    padding: 0 14px;\n  }\n}\n\n.step-item-label-area > span {\n  font-size: var(--font-size-scale-up-01);\n  font-weight: var(--font-weight-medium);\n  color: var(--interactive);\n}\n\n.vertical.step-item-label-area {\n  &.label-top {\n    padding-top: 14px;\n  }\n\n  &.label-bottom {\n    padding-bottom: 14px;\n  }\n}\n\n.horizontal.step-item-label-area {\n  &.label-top {\n    padding-bottom: 14px;\n  }\n\n  &.label-bottom {\n    padding-top: 14px;\n  }\n}\n\n.step-item-container-vertical .step-item-content.label-right.last .step-item-indicator-area::after,\n.step-item-container-vertical .step-item-content.label-left.last .step-item-indicator-area::after,\n.step-item-container-horizontal .step-item-content.label-bottom.last .step-item-indicator-area::after {\n  display: none;\n}\n\n.step-item-container-vertical .step-item-content.label-top .step-item-label-area,\n.step-item-container-vertical .step-item-content.label-bottom .step-item-label-area {\n  flex-direction: column;\n  align-items: center;\n}\n\n.step-item-container-horizontal::after {\n  content: \"\";\n  position: relative;\n  height: 2px;\n  background-color: var(--interactive);\n  display: block;\n  transform: translate(50%, 20px);\n  z-index: -1;\n  width: 100%;\n  left: 0;\n  bottom: 75%;\n}\n\n.step-item-container-horizontal.last::after,\n.step-item-container-horizontal.controller::after,\n.step-item-container-vertical.last::after {\n  content: \"\";\n  height: 0;\n  display: none;\n}\n\n.step-item-container-horizontal .step-item-content.label-left.timeline.last::after {\n  content: \"\";\n  position: absolute;\n  width: 160px;\n  height: 2px;\n  background-color: var(--interactive);\n  display: inline-block;\n  right: calc(100% - 80px);\n  bottom: 50%;\n  z-index: -1;\n}\n\n.content-type-br-icon {\n  color: var(--interactive);\n  font-size: 16px;\n  font-weight: 900;\n}\n\n[data-active] .content-type-br-icon {\n  color: var(--interactive);\n  color: #fff;\n}\n\n.button-controller {\n  width: 15px;\n  height: 15px;\n}\n\n/* Desktops grandes (até 1440px) */\n@media (width <= 1440px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 50%;\n    left: 48%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 58%;\n    left: 48%;\n  }\n}\n\n/* Laptops (até 1024px) */\n@media (width <= 1024px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 34%;\n    left: 58%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Tablets (até 768px) */\n@media (width <= 768px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 22%;\n    left: 76%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Celulares grandes (até 425px) */\n@media (width <= 425px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 20%;\n    left: 80%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Celulares médios (até 375px) */\n@media (width <= 375px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 18%;\n    left: 82%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Celulares pequenos (até 320px) */\n@media (width <= 320px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 16%;\n    left: 85%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} 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/step?tab=designer).\n *\n * @slot label-area - insere o conteúdo customizado dentro do botão que compõe o componente.\n */\n@Component({\n  tag: 'br-step-item',\n  styleUrl: 'step-item.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class StepItem {\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: HTMLBrStepItemElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   *  Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.\n   */\n  @Prop({ reflect: true }) label: string = ''\n\n  /**\n   *  Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: \"success\", \"info\", \"danger\" e \"warning\".\n   */\n  @Prop({ reflect: true }) highlight?: 'success' | 'info' | 'danger' | 'warning'\n\n  /**\n   *  Propriedade que define se o item Step está com estado ativo.\n   */\n  @Prop({ reflect: true }) active: boolean = false\n\n  /**\n   *  Propriedade que define se o item Step está com estado desativado..\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   *  Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.\n   */\n  @Prop({ reflect: true }) brIconName?: string = ''\n  /**\n   *  Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon\n   */\n\n  @Prop({ reflect: true }) brIconAria: string = ''\n\n  @State() showTimeLine: boolean = false\n  @State() stepItemPositionStatus: 'first' | 'middle' | 'last' = 'first'\n  @State() stepLayout: 'horizontal' | 'vertical' = 'horizontal'\n  @State() labelPosition: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n  @State() contentType: 'default' | 'br-icon' | 'no-content' | 'slotted' = 'default'\n  @State() mode: 'controller' | 'step' = 'step'\n  @State() content: string = ''\n  @State() ariaLabelContent: string = ''\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 antes que o componente seja renderizado ou atualizado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    let accessibilityContent = ''\n    let activeItem = ''\n    if (this.contentType === 'slotted') {\n      const slotedContent = this.el.lastElementChild\n      accessibilityContent =\n        this.label !== ''\n          ? `passo ${this.content} ${slotedContent.textContent} ${this.label} ${this.highLightAriaLabel[this.highlight]}`\n          : `passo ${this.content} ${slotedContent.textContent} ${this.highLightAriaLabel[this.highlight]}`\n      this.ariaLabelContent = accessibilityContent\n      return\n    }\n    if (this.contentType === 'br-icon') {\n      accessibilityContent =\n        `passo  ${this.content} ` + this.brIconAria + this.label + this.highLightAriaLabel[this.highlight]\n      activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent\n      this.ariaLabelContent = activeItem\n      return\n    } else {\n      accessibilityContent =\n        this.label !== ''\n          ? `passo ${this.content} ${this.label} ${this.highLightAriaLabel[this.highlight]}`\n          : `passo ${this.content} ${this.highLightAriaLabel[this.highlight]}`\n      activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent\n      this.ariaLabelContent = activeItem\n    }\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 antes que o componente seja renderizado ou atualizado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot\n    if (button !== null) {\n      button.lastElementChild.setAttribute('role', 'option')\n      button.lastElementChild.setAttribute('aria-selected', `${this.active}`)\n      button.lastElementChild.setAttribute('aria-label', this.ariaLabelContent)\n    }\n  }\n\n  /**\n   * Watch que observa o valor da propriedade active, e ao alterar seu valor este método altera o valor do campo de acessibilidade aria-selected\n   */\n  @Watch('active')\n  watchItemIsActive(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot\n      if (button !== null) {\n        button.lastElementChild.setAttribute('aria-selected', `${this.active}`)\n      }\n    }\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente\n   */\n  @Method()\n  async setStepItemPositionStatus(value: 'first' | 'middle' | 'last') {\n    this.stepItemPositionStatus = value\n  }\n\n  /**\n   * Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.\n   */\n  @Method()\n  async handleShowTimeLine(value: boolean, layout) {\n    this.showTimeLine = value\n    this.stepLayout = layout\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado\n   */\n  @Method()\n  async setLabelPosition(value: 'top' | 'right' | 'bottom' | 'left') {\n    this.labelPosition = value\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem\n   */\n  @Method()\n  async setContentType(value: 'default' | 'br-icon' | 'no-content' | 'slotted') {\n    this.contentType = value\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.\n   */\n  @Method()\n  async setMode(value: 'controller' | 'step') {\n    this.mode = value\n  }\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem\n   */\n  @Method()\n  async setContent(value: string) {\n    this.content = value\n  }\n\n  private getStepContainerClassMap(): CssClassMap {\n    return {\n      'step-item-container-horizontal': this.stepLayout === 'horizontal',\n      'step-item-container-vertical': this.stepLayout === 'vertical',\n      last: this.stepItemPositionStatus == 'last',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      'label-bottom': this.labelPosition === 'bottom' && this.label !== '',\n      controller: this.mode === 'controller',\n      'disabled-div': true,\n    }\n  }\n\n  private getStepItemContentClassMap(): CssClassMap {\n    return {\n      'step-item-content': true,\n      'label-bottom': this.labelPosition === 'bottom',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      timeline: this.showTimeLine === true,\n      middle: this.stepItemPositionStatus === 'middle',\n      first: this.stepItemPositionStatus === 'first',\n      controller: this.mode === 'controller',\n    }\n  }\n\n  private getStepItemIndicatorAreaClassMap(): CssClassMap {\n    return {\n      'step-item-indicator-area': true,\n    }\n  }\n\n  private getStepItemLabelAreaClassMap(): CssClassMap {\n    return {\n      'step-item-label-area': true,\n      vertical: this.stepLayout === 'vertical',\n      horizontal: this.stepLayout === 'horizontal',\n      'label-bottom': this.labelPosition === 'bottom',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      'no-label': this.label === '',\n    }\n  }\n\n  private getHighlightClass(): CssClassMap {\n    return {\n      icon: true,\n      success: this.highlight === 'success',\n      info: this.highlight === 'info',\n      warning: this.highlight === 'warning',\n      danger: this.highlight === 'danger',\n      'no-content': this.contentType === 'no-content',\n    }\n  }\n\n  private getStepItemIndicatorClass(): CssClassMap {\n    return {\n      'step-button': true,\n      controller: this.mode === 'controller',\n      'disabled-host': this.disabled,\n    }\n  }\n\n  private highLightAriaLabel = {\n    success: 'passo completo',\n    info: 'passo com item informativo',\n    warning: 'passo com alerta',\n    danger: 'passo com erro',\n    undefined: '',\n  }\n\n  private IconsName = {\n    success: 'fa-check',\n    info: 'fa-info-circle',\n    warning: 'fa-exclamation-triangle',\n    danger: 'fa-times',\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"item-container\" class={this.getStepContainerClassMap()}>\n          <div id=\"item-content\" class={this.getStepItemContentClassMap()}>\n            <div id=\"indicator-area\" data-active={this.active} class={this.getStepItemIndicatorAreaClassMap()}>\n              {this.mode === 'step' && this.highlight && (\n                <div class={this.getHighlightClass()}>\n                  <br-icon\n                    icon-name={this.IconsName[this.highlight]}\n                    class={`${this.highlight === 'warning' && 'warning-color'}`}\n                  ></br-icon>\n                </div>\n              )}\n\n              {this.mode === 'step' && (\n                <br-button\n                  shape=\"circle\"\n                  emphasis=\"secondary\"\n                  isActive={this.active}\n                  aria-label={`Passo ${this.content || 'sem número'}`}\n                  class={this.getStepItemIndicatorClass()}\n                >\n                  {this.contentType === 'no-content' && ''}\n                  {this.contentType === 'default' && this.content}\n                  {this.contentType === 'br-icon' && (\n                    <br-icon icon-name={this.brIconName} class={'content-type-br-icon'}></br-icon>\n                  )}\n                  {this.contentType === 'slotted' && <slot name={'content-area'}></slot>}\n                </br-button>\n              )}\n\n              {this.mode === 'controller' && (\n                <button\n                  data-active={this.active}\n                  class={'mode-controller'}\n                  aria-label={`Controlador do passo ${this.content || 'sem número'}`}\n                ></button>\n              )}\n            </div>\n            <div id=\"label-area\" class={this.getStepItemLabelAreaClassMap()}>\n              <span> {this.label} </span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"br-step-item.entry.js","sources":["../../packages/webcomponents/src/components/step/step-item/step-item.scss?tag=br-step-item&encapsulation=shadow","../../packages/webcomponents/src/components/step/step-item/step-item.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n.disabled-host {\n  pointer-events: none;\n}\n\n.step-button {\n  position: relative;\n  z-index: 2;\n}\n\n.mode-controller {\n  border: 1px solid var(--gray-20);\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n  border-radius: 50%;\n  background-color: var(--gray-20);\n\n  &:focus-visible {\n    outline: var(--focus-width) var(--focus-style) var(--focus) var(--focus-offset);\n  }\n\n  &:hover {\n    background-image: linear-gradient(\n      rgb(var(--interactive-rgb), var(--hover)),\n      rgb(var(--interactive-rgb), var(--hover))\n    );\n  }\n}\n\n[data-active].mode-controller {\n  border: 1px solid var(--gray-20);\n  background-color: var(--active);\n}\n\n.step-item-container-horizontal {\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n\n  &.label-top::after {\n    content: \"\";\n    left: 0;\n    bottom: 50%;\n  }\n\n  &.label-bottom::after {\n    content: \"\";\n    left: 0;\n    bottom: 86%;\n  }\n\n  &.label-left::after {\n    bottom: 68%;\n    width: 70%;\n    left: 26%;\n  }\n\n  &.label-right::after {\n    bottom: 68%;\n    width: 58%;\n    left: 42%;\n  }\n}\n\n.step-item-container-vertical {\n  display: flex;\n  flex-direction: row;\n  max-width: max-content;\n\n  &::after {\n    content: \"\";\n    position: relative;\n    height: 100%;\n    background-color: var(--interactive);\n    display: block;\n    transform: translate(50%, 20px);\n    z-index: -1;\n    width: 2px;\n    right: 50%;\n  }\n\n  &.label-bottom::after {\n    top: 50%;\n    height: 70%;\n  }\n\n  &.label-top::after {\n    top: 50%;\n    height: 70%;\n  }\n\n  &.label-left::after {\n    right: 16%;\n    top: 12%;\n  }\n\n  &.label-right::after {\n    top: 12%;\n    right: 86%;\n  }\n}\n\n.step-item-content {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  margin: auto;\n  min-height: 100px;\n  min-width: 80px;\n  justify-content: center;\n\n  &.label-top {\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n\n  &.label-bottom {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  &.label-left {\n    flex-direction: row-reverse;\n    align-items: center;\n    background-color: #fff;\n  }\n\n  &.label-right {\n    flex-direction: row;\n    align-items: center;\n    background-color: #fff;\n  }\n}\n\n.controller {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  margin: 0 5px;\n  min-height: unset;\n  min-width: unset;\n}\n\n.step-item-container-vertical .step-item-content.label-right,\n.step-item-container-vertical .step-item-content.label-left {\n  background-color: transparent;\n}\n\n.step-item-indicator-area {\n  display: inline-block;\n  position: relative;\n  z-index: 1;\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    z-index: 4;\n    border-radius: 50%;\n    transform: translate(25px, -5px);\n    color: white;\n    font-size: 16px;\n    font-weight: 900;\n    width: 29px;\n    height: 29px;\n  }\n\n  .icon.no-content {\n    transform: translate(0, 0);\n    width: 41px;\n    height: 41px;\n  }\n}\n\n[data-active].step-item-indicator-area .icon.no-content {\n  transform: translate(5px, 5px);\n  width: 30px;\n  height: 30px;\n}\n\n.success {\n  background-color: var(--success);\n}\n\n.info {\n  background-color: var(--info);\n}\n\n.danger {\n  background-color: var(--danger);\n}\n\n.warning {\n  background-color: var(--warning);\n}\n\n.step-item-label-area {\n  padding: 0;\n  display: flex;\n\n  &.label-left {\n    padding: 0 14px;\n  }\n\n  &.label-right {\n    padding: 0 14px;\n  }\n}\n\n.step-item-label-area > span {\n  font-size: var(--font-size-scale-up-01);\n  font-weight: var(--font-weight-medium);\n  color: var(--interactive);\n}\n\n.vertical.step-item-label-area {\n  &.label-top {\n    padding-top: 14px;\n  }\n\n  &.label-bottom {\n    padding-bottom: 14px;\n  }\n}\n\n.horizontal.step-item-label-area {\n  &.label-top {\n    padding-bottom: 14px;\n  }\n\n  &.label-bottom {\n    padding-top: 14px;\n  }\n}\n\n.step-item-container-vertical .step-item-content.label-right.last .step-item-indicator-area::after,\n.step-item-container-vertical .step-item-content.label-left.last .step-item-indicator-area::after,\n.step-item-container-horizontal .step-item-content.label-bottom.last .step-item-indicator-area::after {\n  display: none;\n}\n\n.step-item-container-vertical .step-item-content.label-top .step-item-label-area,\n.step-item-container-vertical .step-item-content.label-bottom .step-item-label-area {\n  flex-direction: column;\n  align-items: center;\n}\n\n.step-item-container-horizontal::after {\n  content: \"\";\n  position: relative;\n  height: 2px;\n  background-color: var(--interactive);\n  display: block;\n  transform: translate(50%, 20px);\n  z-index: -1;\n  width: 100%;\n  left: 0;\n  bottom: 75%;\n}\n\n.step-item-container-horizontal.last::after,\n.step-item-container-horizontal.controller::after,\n.step-item-container-vertical.last::after {\n  content: \"\";\n  height: 0;\n  display: none;\n}\n\n.step-item-container-horizontal .step-item-content.label-left.timeline.last::after {\n  content: \"\";\n  position: absolute;\n  width: 160px;\n  height: 2px;\n  background-color: var(--interactive);\n  display: inline-block;\n  right: calc(100% - 80px);\n  bottom: 50%;\n  z-index: -1;\n}\n\n.content-type-br-icon {\n  color: var(--interactive);\n  font-size: 16px;\n  font-weight: 900;\n}\n\n[data-active] .content-type-br-icon {\n  color: var(--interactive);\n  color: #fff;\n}\n\n.button-controller {\n  width: 15px;\n  height: 15px;\n}\n\n/* Desktops grandes (até 1440px) */\n@media (width <= 1440px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 50%;\n    left: 48%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 58%;\n    left: 48%;\n  }\n}\n\n/* Laptops (até 1024px) */\n@media (width <= 1024px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 34%;\n    left: 58%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Tablets (até 768px) */\n@media (width <= 768px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 22%;\n    left: 76%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Celulares grandes (até 425px) */\n@media (width <= 425px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 20%;\n    left: 80%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Celulares médios (até 375px) */\n@media (width <= 375px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 18%;\n    left: 82%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n\n/* Celulares pequenos (até 320px) */\n@media (width <= 320px) {\n  .step-item-container-horizontal.label-left::after {\n    width: 16%;\n    left: 85%;\n    bottom: 68%;\n  }\n\n  .step-item-container-horizontal.label-right::after {\n    bottom: 68%;\n    width: 36%;\n    left: 72%;\n  }\n\n  .step-item-container-vertical.label-top::after {\n    top: 50%;\n    height: 50%;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} 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/step?tab=designer).\n *\n * @slot label-area - insere o conteúdo customizado dentro do botão que compõe o componente.\n */\n@Component({\n  tag: 'br-step-item',\n  styleUrl: 'step-item.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class StepItem {\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: HTMLBrStepItemElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   *  Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.\n   */\n  @Prop({ reflect: true }) label: string = ''\n\n  /**\n   *  Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: \"success\", \"info\", \"danger\" e \"warning\".\n   */\n  @Prop({ reflect: true }) highlight?: 'success' | 'info' | 'danger' | 'warning'\n\n  /**\n   *  Propriedade que define se o item Step está com estado ativo.\n   */\n  @Prop({ reflect: true }) active: boolean = false\n\n  /**\n   *  Propriedade que define se o item Step está com estado desativado..\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   *  Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.\n   */\n  @Prop({ reflect: true }) brIconName?: string = ''\n  /**\n   *  Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon\n   */\n\n  @Prop({ reflect: true }) brIconAria: string = ''\n\n  @State() showTimeLine: boolean = false\n  @State() stepItemPositionStatus: 'first' | 'middle' | 'last' = 'first'\n  @State() stepLayout: 'horizontal' | 'vertical' = 'horizontal'\n  @State() labelPosition: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n  @State() contentType: 'default' | 'br-icon' | 'no-content' | 'slotted' = 'default'\n  @State() mode: 'controller' | 'step' = 'step'\n  @State() content: string = ''\n  @State() ariaLabelContent: string = ''\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 antes que o componente seja renderizado ou atualizado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    let accessibilityContent = ''\n    let activeItem = ''\n    if (this.contentType === 'slotted') {\n      const slotedContent = this.el.lastElementChild\n      accessibilityContent =\n        this.label !== ''\n          ? `passo ${this.content} ${slotedContent.textContent} ${this.label} ${this.highLightAriaLabel[this.highlight]}`\n          : `passo ${this.content} ${slotedContent.textContent} ${this.highLightAriaLabel[this.highlight]}`\n      this.ariaLabelContent = accessibilityContent\n      return\n    }\n    if (this.contentType === 'br-icon') {\n      accessibilityContent =\n        `passo  ${this.content} ` + this.brIconAria + this.label + this.highLightAriaLabel[this.highlight]\n      activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent\n      this.ariaLabelContent = activeItem\n      return\n    } else {\n      accessibilityContent =\n        this.label !== ''\n          ? `passo ${this.content} ${this.label} ${this.highLightAriaLabel[this.highlight]}`\n          : `passo ${this.content} ${this.highLightAriaLabel[this.highlight]}`\n      activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent\n      this.ariaLabelContent = activeItem\n    }\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 antes que o componente seja renderizado ou atualizado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot\n    if (button !== null) {\n      button.lastElementChild.setAttribute('role', 'option')\n      button.lastElementChild.setAttribute('aria-selected', `${this.active}`)\n      button.lastElementChild.setAttribute('aria-label', this.ariaLabelContent)\n    }\n  }\n\n  /**\n   * Watch que observa o valor da propriedade active, e ao alterar seu valor este método altera o valor do campo de acessibilidade aria-selected\n   */\n  @Watch('active')\n  watchItemIsActive(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot\n      if (button !== null) {\n        button.lastElementChild.setAttribute('aria-selected', `${this.active}`)\n      }\n    }\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente\n   */\n  @Method()\n  async setStepItemPositionStatus(value: 'first' | 'middle' | 'last') {\n    this.stepItemPositionStatus = value\n  }\n\n  /**\n   * Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.\n   */\n  @Method()\n  async handleShowTimeLine(value: boolean, layout) {\n    this.showTimeLine = value\n    this.stepLayout = layout\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado\n   */\n  @Method()\n  async setLabelPosition(value: 'top' | 'right' | 'bottom' | 'left') {\n    this.labelPosition = value\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem\n   */\n  @Method()\n  async setContentType(value: 'default' | 'br-icon' | 'no-content' | 'slotted') {\n    this.contentType = value\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.\n   */\n  @Method()\n  async setMode(value: 'controller' | 'step') {\n    this.mode = value\n  }\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem\n   */\n  @Method()\n  async setContent(value: string) {\n    this.content = value\n  }\n\n  private getStepContainerClassMap(): CssClassMap {\n    return {\n      'step-item-container-horizontal': this.stepLayout === 'horizontal',\n      'step-item-container-vertical': this.stepLayout === 'vertical',\n      last: this.stepItemPositionStatus == 'last',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      'label-bottom': this.labelPosition === 'bottom' && this.label !== '',\n      controller: this.mode === 'controller',\n      'disabled-div': true,\n    }\n  }\n\n  private getStepItemContentClassMap(): CssClassMap {\n    return {\n      'step-item-content': true,\n      'label-bottom': this.labelPosition === 'bottom',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      timeline: this.showTimeLine === true,\n      middle: this.stepItemPositionStatus === 'middle',\n      first: this.stepItemPositionStatus === 'first',\n      controller: this.mode === 'controller',\n    }\n  }\n\n  private getStepItemIndicatorAreaClassMap(): CssClassMap {\n    return {\n      'step-item-indicator-area': true,\n    }\n  }\n\n  private getStepItemLabelAreaClassMap(): CssClassMap {\n    return {\n      'step-item-label-area': true,\n      vertical: this.stepLayout === 'vertical',\n      horizontal: this.stepLayout === 'horizontal',\n      'label-bottom': this.labelPosition === 'bottom',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      'no-label': this.label === '',\n    }\n  }\n\n  private getHighlightClass(): CssClassMap {\n    return {\n      icon: true,\n      success: this.highlight === 'success',\n      info: this.highlight === 'info',\n      warning: this.highlight === 'warning',\n      danger: this.highlight === 'danger',\n      'no-content': this.contentType === 'no-content',\n    }\n  }\n\n  private getStepItemIndicatorClass(): CssClassMap {\n    return {\n      'step-button': true,\n      controller: this.mode === 'controller',\n      'disabled-host': this.disabled,\n    }\n  }\n\n  private highLightAriaLabel = {\n    success: 'passo completo',\n    info: 'passo com item informativo',\n    warning: 'passo com alerta',\n    danger: 'passo com erro',\n    undefined: '',\n  }\n\n  private IconsName = {\n    success: 'fa-check',\n    info: 'fa-info-circle',\n    warning: 'fa-exclamation-triangle',\n    danger: 'fa-times',\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"item-container\" class={this.getStepContainerClassMap()}>\n          <div id=\"item-content\" class={this.getStepItemContentClassMap()}>\n            <div id=\"indicator-area\" data-active={this.active} class={this.getStepItemIndicatorAreaClassMap()}>\n              {this.mode === 'step' && this.highlight && (\n                <div class={this.getHighlightClass()}>\n                  <br-icon\n                    icon-name={this.IconsName[this.highlight]}\n                    class={`${this.highlight === 'warning' && 'warning-color'}`}\n                  ></br-icon>\n                </div>\n              )}\n\n              {this.mode === 'step' && (\n                <br-button\n                  shape=\"circle\"\n                  emphasis=\"secondary\"\n                  isActive={this.active}\n                  aria-label={`Passo ${this.content || 'sem número'}`}\n                  class={this.getStepItemIndicatorClass()}\n                >\n                  {this.contentType === 'no-content' && ''}\n                  {this.contentType === 'default' && this.content}\n                  {this.contentType === 'br-icon' && (\n                    <br-icon icon-name={this.brIconName} class={'content-type-br-icon'}></br-icon>\n                  )}\n                  {this.contentType === 'slotted' && <slot name={'content-area'}></slot>}\n                </br-button>\n              )}\n\n              {this.mode === 'controller' && (\n                <button\n                  data-active={this.active}\n                  class={'mode-controller'}\n                  aria-label={`Controlador do passo ${this.content || 'sem número'}`}\n                ></button>\n              )}\n            </div>\n            <div id=\"label-area\" class={this.getStepItemLabelAreaClassMap()}>\n              <span> {this.label} </span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/br-step.entry.js

@@ -2,10 +2,10 @@
  * Construído por SERPRO
  * © https://serpro.gov.br/ - MIT License.
  */
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-ByGJPTh2.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-DULshOxW.js';
 import { _ as __awaiter } from './tslib.es6-DIPMDb5E.js';
 
-const stepCss = "*,*::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-step{--step-empty:16px;--step-empty-border:4px;--step-line:1px;--step-size:var(--step-medium);--step-small:32px;--step-medium:40px;--step-large:48px;--step-simple-size:var(--step-simple-medium);--step-simple-medium:8px;--step-simple-large:12px;--step-alert-success-icon:\"\";--step-alert-warning-icon:\"\";--step-alert-info-icon:\"\";--step-alert-danger-icon:\"\";display:-webkit-box;display:-ms-flexbox;display:flex;padding:var(--spacing-scale-base)}.br-step.vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.br-step[scroll]{overflow-x:auto;overflow-y:hidden}.br-step[scroll]::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-step[scroll]::-webkit-scrollbar-track{background:var(--gray-10)}.br-step[scroll]::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-step[scroll]:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-step[scroll].vertical{overflow-x:hidden;overflow-y:auto}.br-step.inverted,.br-step.dark-mode{--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)}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}:host .step-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;overflow:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}:host .step-container:focus-visible{outline:var(--focus-width) var(--focus-style) var(--focus) var(--focus-offset)}:host .horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host .vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host .vertical.label-right{-webkit-box-align:start;-ms-flex-align:start;align-items:start;padding-left:20px}:host .vertical.label-left{-webkit-box-align:start;-ms-flex-align:start;align-items:start;padding-right:20px}::slotted([disabled]){opacity:1 !important}::slotted(.linha){width:100px;height:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--interactive)}::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}";
+const stepCss = () => `*,*::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-step{--step-empty:16px;--step-empty-border:4px;--step-line:1px;--step-size:var(--step-medium);--step-small:32px;--step-medium:40px;--step-large:48px;--step-simple-size:var(--step-simple-medium);--step-simple-medium:8px;--step-simple-large:12px;--step-alert-success-icon:"\f00c";--step-alert-warning-icon:"\f071";--step-alert-info-icon:"\f12a";--step-alert-danger-icon:"\f00d";display:-webkit-box;display:-ms-flexbox;display:flex;padding:var(--spacing-scale-base)}.br-step.vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.br-step[scroll]{overflow-x:auto;overflow-y:hidden}.br-step[scroll]::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-step[scroll]::-webkit-scrollbar-track{background:var(--gray-10)}.br-step[scroll]::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-step[scroll]:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-step[scroll].vertical{overflow-x:hidden;overflow-y:auto}.br-step.inverted,.br-step.dark-mode{--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)}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}:host .step-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;overflow:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}:host .step-container:focus-visible{outline:var(--focus-width) var(--focus-style) var(--focus) var(--focus-offset)}:host .horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host .vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host .vertical.label-right{-webkit-box-align:start;-ms-flex-align:start;align-items:start;padding-left:20px}:host .vertical.label-left{-webkit-box-align:start;-ms-flex-align:start;align-items:start;padding-right:20px}::slotted([disabled]){opacity:1 !important}::slotted(.linha){width:100px;height:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--interactive)}::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}`;
 
 const Step = class {
     constructor(hostRef) {
@@ -260,12 +260,12 @@ const Step = class {
         return ariaLabel;
     }
     render() {
-        return (h(Host, { key: '24e57cac41084005ba8e2402712e1cf6cc35cb4a' }, this.stepItems.length > 0 && (h("div", { key: 'b247b164e144ced341a69ed129af0921565fa5dc', role: "listbox", tabIndex: 0, "aria-orientation": this.layout, "aria-label": this.getAreaLabel(), class: this.getCssClassMap() }, h("slot", { key: '21e579ff328711ba61f34178400adb5f07df9a43' })))));
+        return (h(Host, { key: '461d239a10ac05d4b44299fbf737e27c2c0eb1e8' }, this.stepItems.length > 0 && (h("div", { key: '0da23ee0e0733bc56e000665e031b19502840c66', role: "listbox", tabIndex: 0, "aria-orientation": this.layout, "aria-label": this.getAreaLabel(), class: this.getCssClassMap() }, h("slot", { key: '2955c0316b3051d16dff3fe38f265f82ad7060c2' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
 };
-Step.style = stepCss;
+Step.style = stepCss();
 
 export { Step as br_step };
 //# sourceMappingURL=br-step.entry.js.map