@govbr-ds/webcomponents 2.0.0-next.63 → 2.0.0-next.65

package/dist/collection/components/step/step-item/step-item.js

@@ -2,16 +2,14 @@
  * Construído por SERPRO
  * © https://serpro.gov.br/ - MIT License.
  */
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * ## Design System
  *
  * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/step?tab=designer).
  *
- * @slot label-area - Slot para conteúdo customizado dentro do botão do item do step.
+ * @slot content-area - Slot para conteúdo customizado dentro do botão do item do step.
  *
- * @part item-container - Parte para o contêiner externo do item do step, usada para estilizar posicionamento e espaçamento via ::part().
- * @part item-content - Parte para o contêiner interno com indicador visual e label, usada para estilizar conteúdo via ::part().
  * @part label - Parte para o contêiner do texto da etapa, usada para estilizar tipografia e cor via ::part().
  *
  */
@@ -26,7 +24,7 @@ export class StepItem {
          */
         this.active = false;
         /**
-         *  Propriedade que define se o item Step está com estado desativado..
+         *  Propriedade que define se o item Step está com estado desativado.
          */
         this.disabled = false;
         /**
@@ -88,23 +86,7 @@ export class StepItem {
         }
     }
     componentDidRender() {
-        const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot;
-        if (button !== null) {
-            button.lastElementChild.setAttribute('role', 'option');
-            button.lastElementChild.setAttribute('aria-selected', `${this.active}`);
-            button.lastElementChild.setAttribute('aria-label', this.ariaLabelContent);
-        }
-    }
-    /**
-     * 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
-     */
-    watchItemIsActive(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot;
-            if (button !== null) {
-                button.lastElementChild.setAttribute('aria-selected', `${this.active}`);
-            }
-        }
+        this.brDidRender.emit();
     }
     /**
      *
@@ -148,68 +130,22 @@ export class StepItem {
     async setContent(value) {
         this.content = value;
     }
-    getStepContainerClassMap() {
-        return {
-            'step-item-container-horizontal': this.stepLayout === 'horizontal',
-            'step-item-container-vertical': this.stepLayout === 'vertical',
-            last: this.stepItemPositionStatus == 'last',
-            'label-top': this.labelPosition === 'top',
-            'label-left': this.labelPosition === 'left',
-            'label-right': this.labelPosition === 'right',
-            'label-bottom': this.labelPosition === 'bottom' && this.label !== '',
-            controller: this.mode === 'controller',
-            'disabled-div': true,
-        };
-    }
-    getStepItemContentClassMap() {
-        return {
-            'step-item-content': true,
-            'label-bottom': this.labelPosition === 'bottom',
-            'label-top': this.labelPosition === 'top',
-            'label-left': this.labelPosition === 'left',
-            'label-right': this.labelPosition === 'right',
-            timeline: this.showTimeLine === true,
-            middle: this.stepItemPositionStatus === 'middle',
-            first: this.stepItemPositionStatus === 'first',
-            controller: this.mode === 'controller',
-        };
-    }
-    getStepItemIndicatorAreaClassMap() {
+    getAlertClass() {
         return {
-            'step-item-indicator-area': true,
-        };
-    }
-    getStepItemLabelAreaClassMap() {
-        return {
-            'step-item-label-area': true,
-            vertical: this.stepLayout === 'vertical',
-            horizontal: this.stepLayout === 'horizontal',
-            'label-bottom': this.labelPosition === 'bottom',
-            'label-top': this.labelPosition === 'top',
-            'label-left': this.labelPosition === 'left',
-            'label-right': this.labelPosition === 'right',
-            'no-label': this.label === '',
-        };
-    }
-    getHighlightClass() {
-        return {
-            icon: true,
-            success: this.highlight === 'success',
-            info: this.highlight === 'info',
-            warning: this.highlight === 'warning',
-            danger: this.highlight === 'danger',
+            'step-alert': true,
             'no-content': this.contentType === 'no-content',
         };
     }
-    getStepItemIndicatorClass() {
-        return {
-            'step-button': true,
-            controller: this.mode === 'controller',
-            'disabled-host': this.disabled,
-        };
-    }
     render() {
-        return (h(Host, { key: '8546dc7acb162616936f37f5772dd3cd500ad698' }, h("div", { key: '2829829b630f4018da7f66c7b3aa4db4e5e3c07b', id: "item-container", part: "item-container", class: this.getStepContainerClassMap() }, h("div", { key: '908c84c73ed82a939c8f46bc7b5ee7860bc82768', id: "item-content", part: "item-content", class: this.getStepItemContentClassMap() }, h("div", { key: '558a4600ed2a3f3619ff81146a09b9aa2ae4d8e9', id: "indicator-area", "data-active": this.active, class: this.getStepItemIndicatorAreaClassMap() }, this.mode === 'step' && this.highlight && (h("div", { key: '3ef69f80e466a54ffef7f6eff00a14f2c6eb1d12', class: this.getHighlightClass() }, h("br-icon", { key: '1aea5e120b4a87cf49214bcbcc46b1004495c121', "icon-name": this.IconsName[this.highlight], class: `${this.highlight === 'warning' && 'warning-color'}` }))), this.mode === 'step' && (h("br-button", { key: 'c7a78e47a040b8047bd81d8c8886d0313d99acf5', 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: '91b72c1350974d82c5ab3f42102e7961ae6b35a3', "icon-name": this.brIconName, class: 'content-type-br-icon' })), this.contentType === 'slotted' && h("slot", { key: '92aaa27f59dcf25f21af491fe59119bce80ceb79', name: 'content-area' }))), this.mode === 'controller' && (h("button", { key: '524ccbedacdc2406d4dc4a8acec7756daea2aa12', "data-active": this.active, class: 'mode-controller', "aria-label": `Controlador do passo ${this.content || 'sem número'}` }))), h("div", { key: 'be587eb3b9c92e1ba8b25f2c7a3ac00a525104aa', id: "label-area", part: "label", class: this.getStepItemLabelAreaClassMap() }, h("span", { key: '0cfd5dc7c8627a34b7182f667d699628aacc984c' }, " ", this.label, " "))))));
+        return (h(Host, { key: '84b527bcbbb99fd2d8f685a5946f5a07824ee2ee', "data-label": this.labelPosition, "data-type": this.contentType === 'no-content' ? 'void' : undefined, class: {
+                [this.stepLayout]: true,
+                'mode-controller': this.mode === 'controller',
+                'disabled-host': this.disabled,
+                timeline: this.showTimeLine,
+            } }, h("button", { key: 'caf10476226b34f80ba43065221121726a08248d', class: {
+                'step-progress-btn': true,
+                active: this.active,
+            }, type: "button", role: "option", "aria-selected": this.active ? 'true' : 'false', "aria-label": this.ariaLabelContent, disabled: this.disabled, "step-num": this.contentType === 'default' ? this.content : undefined, "data-alert": this.highlight || undefined }, this.label && (h("span", { key: '862af1fe04d2b70e0394e7a241c70898ab910a61', class: "step-info", part: "label" }, this.label)), this.contentType === 'br-icon' && (h("span", { key: 'e297e4b1bb60d6a26378bf1dbe24130f5c730bc6', class: "step-icon" }, h("br-icon", { key: '53eefe357f67593db3697678fde6dca46a55ecf4', "icon-name": this.brIconName, "aria-hidden": "true" }))), this.contentType === 'slotted' && (h("span", { key: '806836e460e1fe13018bde8a144b4189317cc5c9', class: "step-icon" }, h("slot", { key: '42e98348b1fe1219adc0efd806ea73bcab2b27c3', name: "content-area" }))), this.mode === 'step' && this.highlight && (h("div", { key: 'ff04b74b3f1103e7d9ca0e2e1e3342259260772a', class: this.getAlertClass() }, h("br-icon", { key: '782ac60e134b5d364f7f4f2464f109a3ed39cc32', "icon-name": this.IconsName[this.highlight], class: this.highlight === 'warning' ? 'warning-color' : '' }))))));
     }
     static get is() { return "br-step-item"; }
     static get encapsulation() { return "shadow"; }
@@ -297,7 +233,7 @@ export class StepItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Propriedade que define se o item Step est\u00E1 com estado desativado.."
+                    "text": "Propriedade que define se o item Step est\u00E1 com estado desativado."
                 },
                 "getter": false,
                 "setter": false,
@@ -527,12 +463,6 @@ export class StepItem {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "active",
-                "methodName": "watchItemIsActive"
-            }];
-    }
     static get attachInternalsMemberName() { return "elementInternals"; }
 }
 //# sourceMappingURL=step-item.js.map

package/dist/collection/components/step/step-item/step-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"step-item.js","sourceRoot":"","sources":["../../../../../../../packages/webcomponents/src/components/step/step-item/step-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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 * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/step?tab=designer).\n *\n * @slot label-area - Slot para conteúdo customizado dentro do botão do item do step.\n *\n * @part item-container - Parte para o contêiner externo do item do step, usada para estilizar posicionamento e espaçamento via ::part().\n * @part item-content - Parte para o contêiner interno com indicador visual e label, usada para estilizar conteúdo via ::part().\n * @part label - Parte para o contêiner do texto da etapa, usada para estilizar tipografia e cor via ::part().\n *\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\" part=\"item-container\" class={this.getStepContainerClassMap()}>\n          <div id=\"item-content\" part=\"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\" part=\"label\" class={this.getStepItemLabelAreaClassMap()}>\n              <span> {this.label} </span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"step-item.js","sourceRoot":"","sources":["../../../../../../../packages/webcomponents/src/components/step/step-item/step-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core'\n\nimport { CssClassMap } from '../../../utils/interfaces'\n\n/**\n * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/step?tab=designer).\n *\n * @slot content-area - Slot para conteúdo customizado dentro do botão do item do step.\n *\n * @part label - Parte para o contêiner do texto da etapa, usada para estilizar tipografia e cor via ::part().\n *\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  /**\n   *  Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon\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    this.brDidRender.emit()\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 getAlertClass(): CssClassMap {\n    return {\n      'step-alert': true,\n      'no-content': this.contentType === 'no-content',\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        data-label={this.labelPosition}\n        data-type={this.contentType === 'no-content' ? 'void' : undefined}\n        class={{\n          [this.stepLayout]: true,\n          'mode-controller': this.mode === 'controller',\n          'disabled-host': this.disabled,\n          timeline: this.showTimeLine,\n        }}\n      >\n        <button\n          class={{\n            'step-progress-btn': true,\n            active: this.active,\n          }}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-label={this.ariaLabelContent}\n          disabled={this.disabled}\n          step-num={this.contentType === 'default' ? this.content : undefined}\n          data-alert={this.highlight || undefined}\n        >\n          {this.label && (\n            <span class=\"step-info\" part=\"label\">\n              {this.label}\n            </span>\n          )}\n\n          {/* Ícone de conteúdo (quando contentType é br-icon) */}\n          {this.contentType === 'br-icon' && (\n            <span class=\"step-icon\">\n              <br-icon icon-name={this.brIconName} aria-hidden=\"true\"></br-icon>\n            </span>\n          )}\n\n          {/* Slot para conteúdo customizado */}\n          {this.contentType === 'slotted' && (\n            <span class=\"step-icon\">\n              <slot name=\"content-area\"></slot>\n            </span>\n          )}\n\n          {/* Ícone de alerta/highlight */}\n          {this.mode === 'step' && this.highlight && (\n            <div class={this.getAlertClass()}>\n              <br-icon\n                icon-name={this.IconsName[this.highlight]}\n                class={this.highlight === 'warning' ? 'warning-color' : ''}\n              ></br-icon>\n            </div>\n          )}\n        </button>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/step/step.css

@@ -1 +1 @@
-*,*::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))}}.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}.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}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}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-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}
+*,*::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))}}.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}.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,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}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}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-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)}.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,*[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 .step-progress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.br-step.vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.br-step.vertical .step-progress{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.br-step .step-progress-btn{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:rgba(0,0,0,0);border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:var(--step-size);padding:0;position:relative}.br-step[data-label=left] .step-progress-btn{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}.br-step[data-label=right] .step-progress-btn{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.br-step.vertical .step-progress-btn{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.br-step.vertical[data-label=left] .step-progress-btn{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}.br-step.vertical[data-label=right] .step-progress-btn{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.br-step .step-progress-btn::before{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--background);border:var(--step-line) solid var(--interactive);border-radius:50%;color:var(--interactive);content:attr(step-num);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-medium);height:var(--step-size);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:0;margin:auto;position:absolute;right:0;width:var(--step-size);z-index:2}.br-step .step-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--interactive);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:var(--step-size);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;width:var(--step-size);z-index:4}.br-step .step-alert{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;color:var(--color-dark);display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--font-size-scale-up-04);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;width:var(--font-size-scale-up-04);z-index:4}.br-step .step-alert::after{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:"Font Awesome 5 Free";font-size:var(--font-size-scale-up-01);font-weight:900}.br-step[data-label=bottom] .step-progress-btn::before{top:0}.br-step[data-label=bottom] .step-icon{top:0}.br-step[data-label=bottom] .step-alert{-webkit-transform:translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * -0.75));transform:translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * -0.75))}.br-step[data-label=top] .step-progress-btn::before{bottom:0}.br-step[data-label=top] .step-icon{bottom:0}.br-step[data-label=top] .step-alert{-webkit-transform:translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * 0.25));transform:translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * 0.25))}.br-step[data-label=left] .step-progress-btn::before{left:auto;right:0}.br-step[data-label=left] .step-alert{-webkit-transform:translate(calc(var(--step-size) * 0.4), calc(var(--step-size) * -0.25));transform:translate(calc(var(--step-size) * 0.4), calc(var(--step-size) * -0.25))}.br-step[data-label=right] .step-progress-btn::before{left:0;right:auto}.br-step[data-label=right] .step-alert{-webkit-transform:translate(calc(var(--step-size) * 0.65), calc(var(--step-size) * -0.25));transform:translate(calc(var(--step-size) * 0.65), calc(var(--step-size) * -0.25))}.br-step.vertical .step-progress-btn::before{bottom:0;left:auto;right:auto;top:0}.br-step.vertical[data-label=left] .step-progress-btn::before{right:0}.br-step.vertical[data-label=right] .step-progress-btn::before{left:0}.br-step .step-progress-btn::after{background-color:var(--interactive);content:"";display:block;height:var(--step-line);left:0;position:absolute;right:0;z-index:1}.br-step .step-progress-btn:first-child::after{left:50%}.br-step .step-progress-btn:last-child::after{right:50%}.br-step[data-label=bottom] .step-progress-btn::after{top:calc(var(--step-size)*.5)}.br-step[data-label=top] .step-progress-btn::after{bottom:calc(var(--step-size)*.5)}.br-step[data-label=left] .step-progress-btn::after{left:0}.br-step[data-label=left] .step-progress-btn:first-child::after{left:100%}.br-step[data-label=left] .step-progress-btn:last-child::after{right:0}.br-step[data-label=right] .step-progress-btn::after{right:0}.br-step[data-label=right] .step-progress-btn:first-child::after{left:0}.br-step[data-label=right] .step-progress-btn:last-child::after{right:100%}.br-step.vertical .step-progress-btn::after{bottom:0;height:auto;left:auto;right:auto;top:0;width:var(--step-line)}.br-step.vertical .step-progress-btn:first-child::after{left:auto;top:50%}.br-step.vertical .step-progress-btn:last-child::after{bottom:50%;right:auto}.br-step.vertical[data-label=left] .step-progress-btn::after{right:calc(var(--step-size)*.5)}.br-step.vertical[data-label=right] .step-progress-btn::after{left:calc(var(--step-size)*.5)}.br-step .step-info{color:var(--interactive);display:inline-block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium)}.br-step[data-label=bottom] .step-info{margin-top:var(--step-size);padding-top:var(--spacing-scale-2x)}.br-step[data-label=top] .step-info{margin-bottom:var(--step-size);padding-bottom:var(--spacing-scale-2x)}.br-step[data-label=left] .step-info{display:none}@media(min-width: 576px){.br-step[data-label=left] .step-info{background-color:var(--background);display:inline-block;margin-right:var(--step-size);padding:var(--spacing-scale-2x);position:relative;z-index:3}}.br-step[data-label=right] .step-info{display:none}@media(min-width: 576px){.br-step[data-label=right] .step-info{background-color:var(--background);display:inline-block;margin-left:var(--step-size);padding:var(--spacing-scale-2x);position:relative;z-index:3}}.br-step.vertical[data-label=left] .step-info{display:inline-block;margin-left:0;margin-right:var(--step-size);padding:var(--spacing-scale-2x)}.br-step.vertical[data-label=right] .step-info{display:inline-block;margin-left:var(--step-size);margin-right:0;padding:var(--spacing-scale-2x)}.br-step[data-type=void] .step-progress-btn::before{content:"";height:var(--step-empty);width:var(--step-empty)}.br-step[data-type=void] .step-info{height:0;overflow:hidden;position:absolute;width:0}.br-step[data-type=simple]{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.br-step[data-type=simple] .step-progress{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.br-step[data-type=simple] .step-progress-btn{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;width:24px}.br-step[data-type=simple] .step-progress-btn::before{background-color:var(--gray-20);border-color:var(--gray-20);content:"";height:var(--step-simple-size);width:var(--step-simple-size)}.br-step[data-type=simple] .step-progress-btn::after{content:none}.br-step[data-type=simple] .step-info{height:0;overflow:hidden;position:absolute;width:0}.br-step[data-type=text]{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.br-step[data-type=text] .step-progress{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.br-step[data-type=text] .step-progress-btn{height:0;min-height:var(--font-size-scale-base);overflow:hidden;position:absolute;width:0}.br-step[data-type=text] .step-progress-btn::before{background-color:rgba(0,0,0,0);border:0;color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);width:auto}.br-step[data-type=text] .step-progress-btn::after{content:none}.br-step[data-type=text] .step-info{height:0;overflow:hidden;position:absolute;width:0}.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] .step-progress-btn{min-width:200px}.br-step[scroll].vertical{overflow-x:hidden;overflow-y:auto}.br-step[scroll].vertical .step-progress-btn{min-height:100px;min-width:auto}.br-step .step-progress-btn[data-alert=success]{color:var(--success)}.br-step .step-progress-btn[data-alert=success] .step-info{color:var(--success)}.br-step .step-progress-btn[data-alert=success] .step-alert{background-color:var(--success)}.br-step .step-progress-btn[data-alert=success] .step-alert::after{content:var(--step-alert-success-icon)}.br-step .step-progress-btn[data-alert=info]{color:var(--info)}.br-step .step-progress-btn[data-alert=info] .step-info{color:var(--info)}.br-step .step-progress-btn[data-alert=info] .step-alert{background-color:var(--info)}.br-step .step-progress-btn[data-alert=info] .step-alert::after{content:var(--step-alert-info-icon)}.br-step .step-progress-btn[data-alert=warning]{color:var(--color-light)}.br-step .step-progress-btn[data-alert=warning] .step-info{color:var(--color)}.br-step .step-progress-btn[data-alert=warning] .step-alert{background-color:var(--warning)}.br-step .step-progress-btn[data-alert=warning] .step-alert::after{content:var(--step-alert-warning-icon);color:var(--color-light)}.br-step .step-progress-btn[data-alert=danger]{color:var(--danger)}.br-step .step-progress-btn[data-alert=danger] .step-info{color:var(--danger)}.br-step .step-progress-btn[data-alert=danger] .step-alert{background-color:var(--danger)}.br-step .step-progress-btn[data-alert=danger] .step-alert::after{content:var(--step-alert-danger-icon)}.br-step .step-progress-btn.active::before,.br-step .step-progress-btn[active]::before{background-color:var(--active);border-color:var(--active);color:var(--background)}.br-step .step-progress-btn.active .step-icon,.br-step .step-progress-btn[active] .step-icon{color:var(--background)}.br-step .step-progress-btn:focus{outline:none}.br-step .step-progress-btn.focus-visible::before,.br-step .step-progress-btn:focus-visible::before{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width);z-index:4}.br-step .step-progress-btn:hover:not(:disabled)::before{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)))}.br-step .step-progress-btn:disabled{opacity:1}.br-step .step-progress-btn:disabled::before{border-color:rgba(var(--interactive-rgb), var(--disabled))}.br-step .step-progress-btn:disabled .step-icon{color:rgba(var(--interactive-rgb), var(--disabled))}.br-step[data-type=void] .step-progress-btn.active .step-alert,.br-step[data-type=void] .step-progress-btn[active] .step-alert{border:var(--step-empty-border) solid var(--active);height:calc(var(--font-size-scale-up-04) + var(--step-empty-border));width:calc(var(--font-size-scale-up-04) + var(--step-empty-border))}.br-step[data-type=void] .step-progress-btn[data-alert].focus-visible::before,.br-step[data-type=void] .step-progress-btn[data-alert]:focus-visible::before{outline:none}.br-step[data-type=void] .step-progress-btn[data-alert].focus-visible .step-alert,.br-step[data-type=void] .step-progress-btn[data-alert]:focus-visible .step-alert{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width);z-index:4}.br-step[data-type=text] .step-progress-btn{cursor:default}.br-step[data-type=text] .step-progress-btn.active,.br-step[data-type=text] .step-progress-btn[active]{height:auto;position:static;width:auto}.br-step[data-type=text] .step-progress-btn.active::before,.br-step[data-type=text] .step-progress-btn[active]::before{background-color:rgba(0,0,0,0);border:0;color:var(--color);position:static}.br-step[data-type=text] .step-progress-btn:focus::before,.br-step[data-type=text] .step-progress-btn.focus-visible::before,.br-step[data-type=text] .step-progress-btn:focus-visible::before{outline:none}.br-step[data-type=text] .step-progress-btn:hover::before{background-image:none}.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)}.br-step.inverted .step-progress-btn[data-alert=success],.br-step.dark-mode .step-progress-btn[data-alert=success]{color:var(--success-alternative)}.br-step.inverted .step-progress-btn[data-alert=success] .step-info,.br-step.dark-mode .step-progress-btn[data-alert=success] .step-info{color:var(--success-alternative)}.br-step.inverted .step-progress-btn[data-alert=success] .step-alert::after,.br-step.dark-mode .step-progress-btn[data-alert=success] .step-alert::after{content:var(--step-alert-success-icon)}.br-step.inverted .step-progress-btn[data-alert=info],.br-step.dark-mode .step-progress-btn[data-alert=info]{color:var(--info-alternative)}.br-step.inverted .step-progress-btn[data-alert=info] .step-info,.br-step.dark-mode .step-progress-btn[data-alert=info] .step-info{color:var(--info-alternative)}.br-step.inverted .step-progress-btn[data-alert=info] .step-alert::after,.br-step.dark-mode .step-progress-btn[data-alert=info] .step-alert::after{content:var(--step-alert-info-icon)}.br-step.inverted .step-progress-btn[data-alert=warning] .step-alert::after,.br-step.dark-mode .step-progress-btn[data-alert=warning] .step-alert::after{content:var(--step-alert-warning-icon)}.br-step.inverted .step-progress-btn[data-alert=danger],.br-step.dark-mode .step-progress-btn[data-alert=danger]{color:var(--danger-alternative)}.br-step.inverted .step-progress-btn[data-alert=danger] .step-info,.br-step.dark-mode .step-progress-btn[data-alert=danger] .step-info{color:var(--danger-alternative)}.br-step.inverted .step-progress-btn[data-alert=danger] .step-alert::after,.br-step.dark-mode .step-progress-btn[data-alert=danger] .step-alert::after{content:var(--step-alert-danger-icon)}.br-step.inverted .step-progress-btn.active,.br-step.inverted .step-progress-btn[active],.br-step.dark-mode .step-progress-btn.active,.br-step.dark-mode .step-progress-btn[active]{color:var(--color-dark)}.br-step.inverted .step-progress-btn.active::before,.br-step.inverted .step-progress-btn[active]::before,.br-step.dark-mode .step-progress-btn.active::before,.br-step.dark-mode .step-progress-btn[active]::before{background-color:var(--background-light);border-color:var(--background-light);color:var(--active)}.br-step.inverted .step-progress-btn.active .step-icon,.br-step.inverted .step-progress-btn[active] .step-icon,.br-step.dark-mode .step-progress-btn.active .step-icon,.br-step.dark-mode .step-progress-btn[active] .step-icon{color:var(--active)}.br-step.inverted[data-type=void] .step-progress-btn.active .step-alert,.br-step.inverted[data-type=void] .step-progress-btn[active] .step-alert,.br-step.dark-mode[data-type=void] .step-progress-btn.active .step-alert,.br-step.dark-mode[data-type=void] .step-progress-btn[active] .step-alert{border-color:var(--color-dark)}.br-step.inverted[data-type=text] .step-progress-btn::before,.br-step.dark-mode[data-type=text] .step-progress-btn::before{background-color:rgba(0,0,0,0);color:var(--color)}:host .br-step{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}:host .br-step.vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}:host .br-step.horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}::slotted([disabled]){opacity:1 !important}

package/dist/collection/components/step/step.js

@@ -165,13 +165,12 @@ export class Step {
     setStepItemsMode(mode) {
         const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'));
         slotItems.forEach((elements) => {
+            elements.setMode(mode);
             if (mode === 'controller') {
-                elements.setMode(this.mode);
                 elements.setContentType('no-content');
                 if (this.layout !== 'horizontal') {
                     this.layout = 'horizontal';
                 }
-                elements.handleShowTimeLine(false, this.layout);
                 elements.removeAttribute('label');
             }
         });
@@ -239,11 +238,8 @@ export class Step {
     getCssClassMap() {
         return {
             'br-step': true,
-            'step-container': true,
             horizontal: this.layout === 'horizontal',
             vertical: this.layout === 'vertical',
-            'label-left': this.labelPosition === 'left',
-            'label-right': this.labelPosition === 'right',
         };
     }
     getAreaLabel() {
@@ -261,7 +257,7 @@ export class Step {
         return ariaLabel;
     }
     render() {
-        return (h(Host, { key: '521113b80ff8714f4e6b8e89a224dcf458f25ee9' }, this.stepItems.length > 0 && (h("div", { key: 'aa7b29d4f5984284d5b5eac036983ce99956c0be', part: "container", role: "listbox", tabIndex: 0, "aria-orientation": this.layout, "aria-label": this.getAreaLabel(), class: this.getCssClassMap() }, h("slot", { key: '0f04a149b67f1883a995072fbedcc4d979b040cd' })))));
+        return (h(Host, { key: '804d7d93973866f42ad3bf0b0efa4d3f855af005' }, this.stepItems.length > 0 && (h("div", { key: 'fef93c5589c4306266e27a1f5d5ce337d0b3c462', part: "container", role: "listbox", tabIndex: 0, "aria-orientation": this.layout, "aria-label": this.getAreaLabel(), class: this.getCssClassMap(), "data-label": this.labelPosition }, h("div", { key: '447cd8c4755bcd9e2eaf6b1e8e2433450501ae0c', class: "step-progress" }, h("slot", { key: 'd32d4425d5c789e01a63c542651f6b32414c264d' }))))));
     }
     static get is() { return "br-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/step/step.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAA;AAItB;;;;;;;;;GASG;AAOH,MAAM,OAAO,IAAI;IANjB;QAeE;;WAEG;QACsB,WAAM,GAA8B,YAAY,CAAA;QACzE;;;WAGG;QACsB,gBAAW,GAAW,GAAG,CAAA;QAClD;;;WAGG;QACsB,kBAAa,GAAyC,QAAQ,CAAA;QACvF;;;WAGG;QACsB,gBAAW,GAAqD,SAAS,CAAA;QAClG;;;WAGG;QACsB,SAAI,GAA0B,MAAM,CAAA;QAE7D;;;WAGG;QACsB,oBAAe,GAA2B,WAAW,CAAA;QAErE,eAAU,GAAW,CAAC,CAAA;QACtB,cAAS,GAAc,EAAE,CAAA;QAmDlC,kEAAkE;QAC1D,oBAAe,GAAG,KAAK,CAAA;QA6LvB,sBAAiB,GAAG;YAC1B,IAAI,EAAE,cAAc;YACpB,UAAU,EAAE,gBAAgB;YAC5B,OAAO,EAAE,+BAA+B;YACxC,SAAS,EAAE,yCAAyC;YACpD,OAAO,EAAE,mCAAmC;YAC5C,YAAY,EAAE,qDAAqD;YACnE,MAAM,EAAE,oBAAoB;YAC5B,SAAS,EAAE,wBAAwB;YACnC,QAAQ,EAAE,sBAAsB;YAChC,UAAU,EAAE,wBAAwB;SACrC,CAAA;KAkCF;IAvRC,gBAAgB;QACd,IAAI,CAAC,yBAAyB,EAAE,CAAA;QAChC,IAAI,CAAC,uBAAuB,EAAE,CAAA;QAC9B,IAAI,CAAC,0BAA0B,EAAE,CAAA;QACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAChC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QACD,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,EAAE,CAAC;YACtC,IAAI,CAAC,0BAA0B,EAAE,CAAA;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAChE,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAA;QAClG,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAC1C,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;IACxB,CAAC;IAkBD,qBAAqB,CAAC,QAAgB,EAAE,QAAgB,EAAE,SAAiB;QACzE,IAAI,SAAS,KAAK,YAAY,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACxD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;gBAC3B,qBAAqB,CAAC,GAAG,EAAE;oBACzB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;oBAC5B,IAAI,CAAC,0BAA0B,CAAC,QAAQ,CAAC,CAAA;gBAC3C,CAAC,CAAC,CAAA;YACJ,CAAC;YACD,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;YAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAA;QACzD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,0BAA0B,CAAC,kBAA0B;QAC3D,MAAM,UAAU,GAAG,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAA;QAEjE,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;QAC9D,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAChE,CAAC;IAED;;;OAGG;IAGH,WAAW,CAAC,KAAK;QACf,MAAM,aAAa,GAAG,KAAK,CAAC,MAAiB,CAAA;QAC7C,IAAI,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,gBAAgB,KAAK,aAAa,CAAC,CAAA;YAClG,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAA;YAC1B,OAAM;QACR,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,aAAa,CAAC,CAAA;QAC7E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;IACxB,CAAC;IAEO,oBAAoB;QAC1B,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAA;QAC9C,MAAM,6BAA6B,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;QAC/E,MAAM,iCAAiC,GAAG,SAAS,CAAC,KAAK,CACvD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,6BAA6B,CAC9E,CAAA;QACD,MAAM,6BAA6B,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAAC,CAAA;QAC9G,IAAI,iCAAiC,IAAI,6BAA6B,EAAE,CAAC;YACvE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;YAC1B,OAAM;QACR,CAAC;QACD,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACnC,MAAM,IAAI,KAAK,CAAC,6EAA6E,CAAC,CAAA;QAChG,CAAC;QACD,IAAI,CAAC,iCAAiC,EAAE,CAAC;YACvC,MAAM,IAAI,KAAK,CAAC,6EAA6E,CAAC,CAAA;QAChG,CAAC;IACH,CAAC;IAEO,yBAAyB;QAC/B,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAA;QAC1E,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;gBACrC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;YAC/C,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,0BAA0B;QAChC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAA;QAC1E,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;YACpC,MAAM,gBAAgB,GAAG,KAAK,GAAG,CAAC,CAAA;YAClC,QAAQ,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAA;QAClD,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,KAAK,CAAC,uBAAuB;QACnC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAA;QAC1E,MAAM,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QACvF,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;YACpC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC,CAAA;YACtD,QAAQ,CAAC,YAAY,CAAC,cAAc,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,CAAA;QAC9D,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,gBAAgB,CAAC,IAA2B;QAClD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAA;QAC1E,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC7B,IAAI,IAAI,KAAK,YAAY,EAAE,CAAC;gBAC1B,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC3B,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;gBACrC,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE,CAAC;oBACjC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAA;gBAC5B,CAAC;gBACD,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC/C,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;YACnC,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,mBAAmB,CAAC,iBAA0C,EAAE,KAAK;QAC3E,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,OAAO,OAAO,CAAA;QAChB,CAAC;QACD,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACtD,OAAO,QAAQ,CAAA;QACjB,CAAC;QACD,OAAO,MAAM,CAAA;IACf,CAAC;IAEO,iBAAiB;QACvB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAA;QAC1E,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;YACpC,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;YAClE,QAAQ,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAA;YACnD,QAAQ,CAAC,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QAChD,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,0BAA0B;QAChC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAA;QAC1E,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;YACpC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;gBACd,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;YAC3C,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,iBAAiB;QACrB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAChD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAA;YACrC,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,EAAE,CAAC;gBACtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YAC7D,CAAC;QACH,CAAC;IACH,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,kBAAkB;QACtB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAA;QACvC,CAAC;IACH,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,cAAc,CAAC,gBAA2D;QAC9E,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAC7E,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,aAAa;QACjB,OAAO,IAAI,CAAC,UAAU,CAAA;IACxB,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,SAAS,EAAE,IAAI;YACf,gBAAgB,EAAE,IAAI;YACtB,UAAU,EAAE,IAAI,CAAC,MAAM,KAAK,YAAY;YACxC,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;YACpC,YAAY,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;YAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO;SAC9C,CAAA;IACH,CAAC;IAeO,YAAY;QAClB,IAAI,SAAS,GAAG,mBAAmB,CAAA;QACnC,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;YAC/B,SAAS;gBACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;oBACjC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;oBACxC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;oBAC5C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACvC,CAAC;aAAM,CAAC;YACN,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAChD,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,4DACE,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,sBACO,IAAI,CAAC,MAAM,gBACjB,IAAI,CAAC,YAAY,EAAE,EAC/B,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAE5B,8DAAa,CACT,CACP,CACI,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 { CssClassMap } from '../../utils/interfaces'\n\n/**\n * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/step?tab=designer).\n *\n * @slot default - Slot para os itens do step (br-step-item), aceitando apenas esse componente.\n *\n * @part container - Parte para o contêiner principal envolvendo todos os step-items, usada para estilizar layout geral via ::part().\n *\n */\n@Component({\n  tag: 'br-step',\n  styleUrl: 'step.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Step {\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: HTMLBrStepElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * propriedade responsável por definir a orientação do componente Step\n   */\n  @Prop({ reflect: true }) layout: 'horizontal' | 'vertical' = 'horizontal'\n  /**\n   *\n   * define o passo que começará destacado\n   */\n  @Prop({ reflect: true }) initialStep: string = '0'\n  /**\n   *\n   * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem\n   */\n  @Prop({ reflect: true }) labelPosition?: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n  /**\n   *\n   * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem\n   */\n  @Prop({ reflect: true }) contentType: 'default' | 'br-icon' | 'no-content' | 'slotted' = 'default'\n  /**\n   *\n   * Propriedade que define o tipo de comportamento que o componente Step deverá seguir\n   */\n  @Prop({ reflect: true }) mode: 'controller' | 'step' = 'step'\n\n  /**\n   *\n   * Propriedade que define o tipo de progressão de etapas que o step vai executar\n   */\n  @Prop({ reflect: true }) progressionType: 'linear' | 'nonlinear' = 'nonlinear'\n\n  @State() activeStep: number = 0\n  @State() stepItems: Element[] = []\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.setStepItemsLabelPosition()\n    this.setStepItemsContentType()\n    this.setStepItemsDefaultContent()\n    this.setStepItemsMode(this.mode)\n    if (this.mode === 'step') {\n      this.configureTimeLine()\n    }\n    if (this.progressionType === 'linear') {\n      this.configureLinearProgression()\n    }\n    if (this.activeStep <= this.stepItems.length - 1) {\n      this.stepItems[this.activeStep].setAttribute('active', 'true')\n    } else {\n      console.warn('br-step initial-step attribute has value more than number of step-items provided')\n    }\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a preparação de dados ou inicializações necessárias.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdwillLoad) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.activeStep = Number(this.initialStep)\n    this.getStepItemsElements()\n    this.brWillLoad.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n\n  /**\n   * Emite um evento quando o step ativo muda.\n   * O evento carrega o índice do novo step ativo (0-based).\n   */\n  @Event() brStepChange: EventEmitter<{ activeStep: number }>\n\n  /** Controla atualizações pendentes para evitar race conditions */\n  private updateScheduled = false\n\n  componentShouldUpdate(newValue: number, oldValue: number, stateName: string) {\n    if (stateName === 'activeStep' && oldValue !== newValue) {\n      if (!this.updateScheduled) {\n        this.updateScheduled = true\n        requestAnimationFrame(() => {\n          this.updateScheduled = false\n          this.updateStepItemsActiveState(oldValue)\n        })\n      }\n      this.brShouldUpdate.emit()\n      this.brStepChange.emit({ activeStep: this.activeStep })\n    }\n  }\n\n  /**\n   * Atualiza os atributos 'active' dos step-items de forma segura\n   * Chamado via requestAnimationFrame para garantir que o DOM é atualizado após batched state changes\n   */\n  private updateStepItemsActiveState(previousActiveStep: number) {\n    const outOfRange = previousActiveStep > this.stepItems.length - 1\n\n    if (!outOfRange) {\n      this.stepItems[previousActiveStep].removeAttribute('active')\n    }\n\n    this.stepItems[this.activeStep].setAttribute('active', 'true')\n  }\n\n  /**\n   * listener para ouvir o evento de click no componente step\n   * Através desse listener o componente define qual será o proximo passo do step que terá o estado ativo\n   */\n\n  @Listen('click', { capture: true })\n  handleClick(event) {\n    const targetElement = event.target as Element\n    if (targetElement.getAttribute('slot') !== null) {\n      const slotItem = this.stepItems.findIndex((element) => element.lastElementChild === targetElement)\n      this.activeStep = slotItem\n      return\n    }\n    const item = this.stepItems.findIndex((element) => element === targetElement)\n    this.activeStep = item\n  }\n\n  private getStepItemsElements() {\n    const slotItems = Array.from(this.el.children)\n    const firstChildrenContentTypeValue = slotItems[0].getAttribute('content-type')\n    const childrenHaveConsistentContentType = slotItems.every(\n      (item) => item.getAttribute('content-type') === firstChildrenContentTypeValue\n    )\n    const childrenHaveConsistentTagName = slotItems.every((item) => item.tagName.toLowerCase() === 'br-step-item')\n    if (childrenHaveConsistentContentType && childrenHaveConsistentTagName) {\n      this.stepItems = slotItems\n      return\n    }\n    if (!childrenHaveConsistentTagName) {\n      throw new Error('br-step component must have as child elements only br-step-items components')\n    }\n    if (!childrenHaveConsistentContentType) {\n      throw new Error('br-step must have all child elements with same content type attribute value')\n    }\n  }\n\n  private setStepItemsLabelPosition() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements) => {\n      if (this.labelPosition !== undefined) {\n        elements.setLabelPosition(this.labelPosition)\n      }\n    })\n  }\n\n  private setStepItemsDefaultContent() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      const indicatorContent = index + 1\n      elements.setContent(indicatorContent.toString())\n    })\n  }\n\n  private async setStepItemsContentType() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    await Promise.all(slotItems.map((element) => element.setContentType(this.contentType)))\n    slotItems.forEach((elements, index) => {\n      elements.setAttribute('aria-posinset', `${index + 1}`)\n      elements.setAttribute('aria-setsize', `${slotItems.length}`)\n    })\n  }\n\n  private setStepItemsMode(mode: 'controller' | 'step') {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements) => {\n      if (mode === 'controller') {\n        elements.setMode(this.mode)\n        elements.setContentType('no-content')\n        if (this.layout !== 'horizontal') {\n          this.layout = 'horizontal'\n        }\n        elements.handleShowTimeLine(false, this.layout)\n        elements.removeAttribute('label')\n      }\n    })\n  }\n\n  private getStepItemPosition(stepItemsElements: HTMLBrStepItemElement[], index) {\n    if (index === 0) {\n      return 'first'\n    }\n    if (index > 0 && index < stepItemsElements.length - 1) {\n      return 'middle'\n    }\n    return 'last'\n  }\n\n  private configureTimeLine() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      const elementPosition = this.getStepItemPosition(slotItems, index)\n      elements.setStepItemPositionStatus(elementPosition)\n      elements.handleShowTimeLine(true, this.layout)\n    })\n  }\n\n  private configureLinearProgression() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      if (index > 0) {\n        elements.setAttribute('disabled', 'true')\n      }\n    })\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep\n   */\n  @Method()\n  async ProceedToNextStep() {\n    if (this.activeStep + 1 < this.stepItems.length) {\n      this.activeStep = this.activeStep + 1\n      if (this.progressionType === 'linear') {\n        this.stepItems[this.activeStep].removeAttribute('disabled')\n      }\n    }\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep\n   */\n  @Method()\n  async BackToPreviousStep() {\n    if (this.activeStep - 1 >= 0) {\n      this.activeStep = this.activeStep - 1\n    }\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo.\n   */\n  @Method()\n  async StepValidation(validationStatus: 'success' | 'info' | 'danger' | 'warning') {\n    this.stepItems[this.activeStep].setAttribute('highlight', validationStatus)\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.\n   */\n  @Method()\n  async GetActiveStep() {\n    return this.activeStep\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-step': true,\n      'step-container': true,\n      horizontal: this.layout === 'horizontal',\n      vertical: this.layout === 'vertical',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n    }\n  }\n\n  private AriaObjectContent = {\n    step: 'Modo etapas ',\n    controller: 'Modo controle ',\n    default: 'passos com conteúdo numérico ',\n    'br-icon': 'passos com conteúdo que possuem icones ',\n    slotted: 'passos com conteúdo customizados ',\n    'no-content': 'passos que apresentam conteúdo por meio de tooltip ',\n    linear: 'progressão linear ',\n    nonlinear: 'progressão não linear ',\n    vertical: 'com layout vertical ',\n    horizontal: 'com layout horizontal ',\n  }\n\n  private getAreaLabel(): string {\n    let ariaLabel = ' Lista de Opções '\n    if (this.mode !== 'controller') {\n      ariaLabel +=\n        this.AriaObjectContent[this.mode] +\n        this.AriaObjectContent[this.contentType] +\n        this.AriaObjectContent[this.progressionType] +\n        this.AriaObjectContent[this.layout]\n    } else {\n      ariaLabel += this.AriaObjectContent[this.mode]\n    }\n    return ariaLabel\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.stepItems.length > 0 && (\n          <div\n            part=\"container\"\n            role=\"listbox\"\n            tabIndex={0}\n            aria-orientation={this.layout}\n            aria-label={this.getAreaLabel()}\n            class={this.getCssClassMap()}\n          >\n            <slot></slot>\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/step/step.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { CssClassMap } from '../../utils/interfaces'\n\n/**\n * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/step?tab=designer).\n *\n * @slot default - Slot para os itens do step (br-step-item), aceitando apenas esse componente.\n *\n * @part container - Parte para o contêiner principal envolvendo todos os step-items, usada para estilizar layout geral via ::part().\n *\n */\n@Component({\n  tag: 'br-step',\n  styleUrl: 'step.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Step {\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: HTMLBrStepElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * propriedade responsável por definir a orientação do componente Step\n   */\n  @Prop({ reflect: true }) layout: 'horizontal' | 'vertical' = 'horizontal'\n  /**\n   *\n   * define o passo que começará destacado\n   */\n  @Prop({ reflect: true }) initialStep: string = '0'\n  /**\n   *\n   * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem\n   */\n  @Prop({ reflect: true }) labelPosition?: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n  /**\n   *\n   * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem\n   */\n  @Prop({ reflect: true }) contentType: 'default' | 'br-icon' | 'no-content' | 'slotted' = 'default'\n  /**\n   *\n   * Propriedade que define o tipo de comportamento que o componente Step deverá seguir\n   */\n  @Prop({ reflect: true }) mode: 'controller' | 'step' = 'step'\n\n  /**\n   *\n   * Propriedade que define o tipo de progressão de etapas que o step vai executar\n   */\n  @Prop({ reflect: true }) progressionType: 'linear' | 'nonlinear' = 'nonlinear'\n\n  @State() activeStep: number = 0\n  @State() stepItems: Element[] = []\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.setStepItemsLabelPosition()\n    this.setStepItemsContentType()\n    this.setStepItemsDefaultContent()\n    this.setStepItemsMode(this.mode)\n    if (this.mode === 'step') {\n      this.configureTimeLine()\n    }\n    if (this.progressionType === 'linear') {\n      this.configureLinearProgression()\n    }\n    if (this.activeStep <= this.stepItems.length - 1) {\n      this.stepItems[this.activeStep].setAttribute('active', 'true')\n    } else {\n      console.warn('br-step initial-step attribute has value more than number of step-items provided')\n    }\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a preparação de dados ou inicializações necessárias.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdwillLoad) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.activeStep = Number(this.initialStep)\n    this.getStepItemsElements()\n    this.brWillLoad.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n\n  /**\n   * Emite um evento quando o step ativo muda.\n   * O evento carrega o índice do novo step ativo (0-based).\n   */\n  @Event() brStepChange: EventEmitter<{ activeStep: number }>\n\n  /** Controla atualizações pendentes para evitar race conditions */\n  private updateScheduled = false\n\n  componentShouldUpdate(newValue: number, oldValue: number, stateName: string) {\n    if (stateName === 'activeStep' && oldValue !== newValue) {\n      if (!this.updateScheduled) {\n        this.updateScheduled = true\n        requestAnimationFrame(() => {\n          this.updateScheduled = false\n          this.updateStepItemsActiveState(oldValue)\n        })\n      }\n      this.brShouldUpdate.emit()\n      this.brStepChange.emit({ activeStep: this.activeStep })\n    }\n  }\n\n  /**\n   * Atualiza os atributos 'active' dos step-items de forma segura\n   * Chamado via requestAnimationFrame para garantir que o DOM é atualizado após batched state changes\n   */\n  private updateStepItemsActiveState(previousActiveStep: number) {\n    const outOfRange = previousActiveStep > this.stepItems.length - 1\n\n    if (!outOfRange) {\n      this.stepItems[previousActiveStep].removeAttribute('active')\n    }\n\n    this.stepItems[this.activeStep].setAttribute('active', 'true')\n  }\n\n  /**\n   * listener para ouvir o evento de click no componente step\n   * Através desse listener o componente define qual será o proximo passo do step que terá o estado ativo\n   */\n\n  @Listen('click', { capture: true })\n  handleClick(event) {\n    const targetElement = event.target as Element\n    if (targetElement.getAttribute('slot') !== null) {\n      const slotItem = this.stepItems.findIndex((element) => element.lastElementChild === targetElement)\n      this.activeStep = slotItem\n      return\n    }\n    const item = this.stepItems.findIndex((element) => element === targetElement)\n    this.activeStep = item\n  }\n\n  private getStepItemsElements() {\n    const slotItems = Array.from(this.el.children)\n    const firstChildrenContentTypeValue = slotItems[0].getAttribute('content-type')\n    const childrenHaveConsistentContentType = slotItems.every(\n      (item) => item.getAttribute('content-type') === firstChildrenContentTypeValue\n    )\n    const childrenHaveConsistentTagName = slotItems.every((item) => item.tagName.toLowerCase() === 'br-step-item')\n    if (childrenHaveConsistentContentType && childrenHaveConsistentTagName) {\n      this.stepItems = slotItems\n      return\n    }\n    if (!childrenHaveConsistentTagName) {\n      throw new Error('br-step component must have as child elements only br-step-items components')\n    }\n    if (!childrenHaveConsistentContentType) {\n      throw new Error('br-step must have all child elements with same content type attribute value')\n    }\n  }\n\n  private setStepItemsLabelPosition() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements) => {\n      if (this.labelPosition !== undefined) {\n        elements.setLabelPosition(this.labelPosition)\n      }\n    })\n  }\n\n  private setStepItemsDefaultContent() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      const indicatorContent = index + 1\n      elements.setContent(indicatorContent.toString())\n    })\n  }\n\n  private async setStepItemsContentType() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    await Promise.all(slotItems.map((element) => element.setContentType(this.contentType)))\n    slotItems.forEach((elements, index) => {\n      elements.setAttribute('aria-posinset', `${index + 1}`)\n      elements.setAttribute('aria-setsize', `${slotItems.length}`)\n    })\n  }\n\n  private setStepItemsMode(mode: 'controller' | 'step') {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements) => {\n      elements.setMode(mode)\n\n      if (mode === 'controller') {\n        elements.setContentType('no-content')\n        if (this.layout !== 'horizontal') {\n          this.layout = 'horizontal'\n        }\n        elements.removeAttribute('label')\n      }\n    })\n  }\n\n  private getStepItemPosition(stepItemsElements: HTMLBrStepItemElement[], index) {\n    if (index === 0) {\n      return 'first'\n    }\n    if (index > 0 && index < stepItemsElements.length - 1) {\n      return 'middle'\n    }\n    return 'last'\n  }\n\n  private configureTimeLine() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      const elementPosition = this.getStepItemPosition(slotItems, index)\n      elements.setStepItemPositionStatus(elementPosition)\n      elements.handleShowTimeLine(true, this.layout)\n    })\n  }\n\n  private configureLinearProgression() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      if (index > 0) {\n        elements.setAttribute('disabled', 'true')\n      }\n    })\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep\n   */\n  @Method()\n  async ProceedToNextStep() {\n    if (this.activeStep + 1 < this.stepItems.length) {\n      this.activeStep = this.activeStep + 1\n      if (this.progressionType === 'linear') {\n        this.stepItems[this.activeStep].removeAttribute('disabled')\n      }\n    }\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep\n   */\n  @Method()\n  async BackToPreviousStep() {\n    if (this.activeStep - 1 >= 0) {\n      this.activeStep = this.activeStep - 1\n    }\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo.\n   */\n  @Method()\n  async StepValidation(validationStatus: 'success' | 'info' | 'danger' | 'warning') {\n    this.stepItems[this.activeStep].setAttribute('highlight', validationStatus)\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.\n   */\n  @Method()\n  async GetActiveStep() {\n    return this.activeStep\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-step': true,\n      horizontal: this.layout === 'horizontal',\n      vertical: this.layout === 'vertical',\n    }\n  }\n\n  private AriaObjectContent = {\n    step: 'Modo etapas ',\n    controller: 'Modo controle ',\n    default: 'passos com conteúdo numérico ',\n    'br-icon': 'passos com conteúdo que possuem icones ',\n    slotted: 'passos com conteúdo customizados ',\n    'no-content': 'passos que apresentam conteúdo por meio de tooltip ',\n    linear: 'progressão linear ',\n    nonlinear: 'progressão não linear ',\n    vertical: 'com layout vertical ',\n    horizontal: 'com layout horizontal ',\n  }\n\n  private getAreaLabel(): string {\n    let ariaLabel = ' Lista de Opções '\n    if (this.mode !== 'controller') {\n      ariaLabel +=\n        this.AriaObjectContent[this.mode] +\n        this.AriaObjectContent[this.contentType] +\n        this.AriaObjectContent[this.progressionType] +\n        this.AriaObjectContent[this.layout]\n    } else {\n      ariaLabel += this.AriaObjectContent[this.mode]\n    }\n    return ariaLabel\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.stepItems.length > 0 && (\n          <div\n            part=\"container\"\n            role=\"listbox\"\n            tabIndex={0}\n            aria-orientation={this.layout}\n            aria-label={this.getAreaLabel()}\n            class={this.getCssClassMap()}\n            data-label={this.labelPosition}\n          >\n            <div class=\"step-progress\">\n              <slot></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}

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

@@ -1 +1 @@
-*,*::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))}}.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}.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}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}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-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-switch{--switch-height: var(--switch-height-medium);--switch-width: var(--switch-width-medium);--switch-toggle-size: var(--switch-toggle-medium);--switch-icon-size: var(--switch-icon-medium);--switch-height-small: 24px;--switch-height-medium: 30px;--switch-height-large: 36px;--switch-width-small: 40px;--switch-width-medium: 52px;--switch-width-large: 64px;--switch-toggle-small: 16px;--switch-toggle-medium: 22px;--switch-toggle-large: 28px;--switch-icon-small: var(--icon-size-xs);--switch-icon-medium: var(--icon-size-sm);--switch-icon-large: var(--icon-size-base);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--switch-height)}.br-switch input{opacity:0;position:absolute}.br-switch input+label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-scale-base);margin-bottom:0;position:relative}.br-switch input+label::before{background:var(--background-light);border:1px solid var(--border-color);border-radius:100em;content:"";height:var(--switch-height);position:absolute;width:var(--switch-width)}.br-switch input+label::after{background-color:var(--off);border-radius:50%;content:"";height:var(--switch-toggle-size);position:absolute;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;width:var(--switch-toggle-size)}.br-switch input:checked+label::after{background-color:var(--on)}.br-switch input+label{padding-right:calc(var(--spacing-scale-2x) + var(--switch-width))}.br-switch input+label:empty{padding-right:var(--switch-width)}.br-switch input+label::before{right:0}.br-switch input+label::after{right:calc(4px + var(--switch-toggle-size))}.br-switch input:checked+label::after{right:4px}.br-switch.right input+label{padding-left:calc(var(--spacing-scale-2x) + var(--switch-width));padding-right:0}.br-switch.right input+label::before{left:0}.br-switch.right input+label::after{left:4px}.br-switch.right input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.top{min-height:calc(var(--switch-height)*2)}.br-switch.top input+label{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-right:0}.br-switch.top input+label::before{bottom:0;left:0}.br-switch.top input+label::after{bottom:4px;left:4px}.br-switch.top input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.small{--switch-height: var(--switch-height-small);--switch-width: var(--switch-width-small);--switch-toggle-size: var(--switch-toggle-small);--switch-icon-size: var(--switch-icon-small)}.br-switch.medium{--switch-height: var(--switch-height-medium);--switch-width: var(--switch-width-medium);--switch-toggle-size: var(--switch-toggle-medium);--switch-icon-size: var(--switch-icon-medium)}.br-switch.large{--switch-height: var(--switch-height-large);--switch-width: var(--switch-width-large);--switch-toggle-size: var(--switch-toggle-large);--switch-icon-size: var(--switch-icon-large)}.br-switch input~.switch-data{-ms-flex-item-align:center;align-self:center;color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);margin-left:8px}.br-switch input~.switch-data::before{content:attr(data-disabled)}.br-switch input:checked~.switch-data{color:var(--color)}.br-switch input:checked~.switch-data::before{content:attr(data-enabled)}.br-switch.icon input+label::after{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-dark);content:"";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:"Font Awesome 5 Free",sans-serif;font-size:var(--switch-icon-size);font-weight:var(--font-weight-black);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.br-switch.icon input:checked+label::after{content:""}.br-switch input:focus-visible+label::before{border-color:var(--focus) !important;-webkit-box-shadow:0 0 0 var(--surface-width-md) var(--focus);box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-switch input:hover:not([disabled]):checked+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--on-rgb), var(--hover))), to(rgba(var(--on-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--on-rgb), var(--hover)), rgba(var(--on-rgb), var(--hover)))}.br-switch input:hover:not([disabled]):not(:checked)+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--off-rgb), var(--hover))), to(rgba(var(--off-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--off-rgb), var(--hover)), rgba(var(--off-rgb), var(--hover)))}.br-switch input:active:not([disabled]):checked+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--on-rgb), var(--pressed))), to(rgba(var(--on-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--on-rgb), var(--pressed)), rgba(var(--on-rgb), var(--pressed)))}.br-switch input:active:not([disabled]):not(:checked)+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--off-rgb), var(--pressed))), to(rgba(var(--off-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--off-rgb), var(--pressed)), rgba(var(--off-rgb), var(--pressed)))}.br-switch.inverted,.br-switch.inverted label,.br-switch.dark-mode,.br-switch.dark-mode label{color:var(--color-dark)}:host{display:inline-block}:host([disabled]) .br-switch,:host([disabled]) .br-switch label,:host([disabled]) .br-switch input{cursor:not-allowed}
+*,*::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))}}.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}.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,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}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}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-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)}.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,*[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-switch{--switch-height: var(--switch-height-medium);--switch-width: var(--switch-width-medium);--switch-toggle-size: var(--switch-toggle-medium);--switch-icon-size: var(--switch-icon-medium);--switch-height-small: 24px;--switch-height-medium: 30px;--switch-height-large: 36px;--switch-width-small: 40px;--switch-width-medium: 52px;--switch-width-large: 64px;--switch-toggle-small: 16px;--switch-toggle-medium: 22px;--switch-toggle-large: 28px;--switch-icon-small: var(--icon-size-xs);--switch-icon-medium: var(--icon-size-sm);--switch-icon-large: var(--icon-size-base);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--switch-height)}.br-switch input{opacity:0;position:absolute}.br-switch input+label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-scale-base);margin-bottom:0;position:relative}.br-switch input+label::before{background:var(--background-light);border:1px solid var(--border-color);border-radius:100em;content:"";height:var(--switch-height);position:absolute;width:var(--switch-width)}.br-switch input+label::after{background-color:var(--off);border-radius:50%;content:"";height:var(--switch-toggle-size);position:absolute;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;width:var(--switch-toggle-size)}.br-switch input:checked+label::after{background-color:var(--on)}.br-switch input+label{padding-right:calc(var(--spacing-scale-2x) + var(--switch-width))}.br-switch input+label:empty{padding-right:var(--switch-width)}.br-switch input+label::before{right:0}.br-switch input+label::after{right:calc(4px + var(--switch-toggle-size))}.br-switch input:checked+label::after{right:4px}.br-switch.right input+label{padding-left:calc(var(--spacing-scale-2x) + var(--switch-width));padding-right:0}.br-switch.right input+label::before{left:0}.br-switch.right input+label::after{left:4px}.br-switch.right input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.top{min-height:calc(var(--switch-height)*2)}.br-switch.top input+label{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-right:0}.br-switch.top input+label::before{bottom:0;left:0}.br-switch.top input+label::after{bottom:4px;left:4px}.br-switch.top input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.small{--switch-height: var(--switch-height-small);--switch-width: var(--switch-width-small);--switch-toggle-size: var(--switch-toggle-small);--switch-icon-size: var(--switch-icon-small)}.br-switch.medium{--switch-height: var(--switch-height-medium);--switch-width: var(--switch-width-medium);--switch-toggle-size: var(--switch-toggle-medium);--switch-icon-size: var(--switch-icon-medium)}.br-switch.large{--switch-height: var(--switch-height-large);--switch-width: var(--switch-width-large);--switch-toggle-size: var(--switch-toggle-large);--switch-icon-size: var(--switch-icon-large)}.br-switch input~.switch-data{-ms-flex-item-align:center;align-self:center;color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);margin-left:8px}.br-switch input~.switch-data::before{content:attr(data-disabled)}.br-switch input:checked~.switch-data{color:var(--color)}.br-switch input:checked~.switch-data::before{content:attr(data-enabled)}.br-switch.icon input+label::after{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-dark);content:"";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:"Font Awesome 5 Free",sans-serif;font-size:var(--switch-icon-size);font-weight:var(--font-weight-black);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.br-switch.icon input:checked+label::after{content:""}.br-switch input:focus-visible+label::before,.br-switch input.focus-visible+label::before{border-color:var(--focus) !important;-webkit-box-shadow:0 0 0 var(--surface-width-md) var(--focus);box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-switch input:hover:not([disabled]):checked+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--on-rgb), var(--hover))), to(rgba(var(--on-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--on-rgb), var(--hover)), rgba(var(--on-rgb), var(--hover)))}.br-switch input:hover:not([disabled]):not(:checked)+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--off-rgb), var(--hover))), to(rgba(var(--off-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--off-rgb), var(--hover)), rgba(var(--off-rgb), var(--hover)))}.br-switch input:active:not([disabled]):checked+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--on-rgb), var(--pressed))), to(rgba(var(--on-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--on-rgb), var(--pressed)), rgba(var(--on-rgb), var(--pressed)))}.br-switch input:active:not([disabled]):not(:checked)+label::before{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--off-rgb), var(--pressed))), to(rgba(var(--off-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--off-rgb), var(--pressed)), rgba(var(--off-rgb), var(--pressed)))}.br-switch.inverted,.br-switch.inverted label,.br-switch.dark-mode,.br-switch.dark-mode label{color:var(--color-dark)}:host{display:inline-block}:host([disabled]) .br-switch,:host([disabled]) .br-switch label,:host([disabled]) .br-switch input{cursor:not-allowed}

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

@@ -96,7 +96,7 @@ export class Switch {
     }
     render() {
         const hasVisibleText = this.hasVisibleText();
-        return (h(Host, { key: '6c27394be8ef648deb0d0e9f5be021605d82265d' }, h("div", { key: '3799181bbd095b3e506475bb6ce9c95f75534863', class: this.getCssClassMap() }, h("input", Object.assign({ key: 'cc9ab93302f47d59a926a4cc2f3a3953590d8007', id: this.customId, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, role: "switch", "aria-checked": this.checked ? 'true' : 'false', onChange: this.handleCheckedChange, onClick: this.handleClick }, (!hasVisibleText ? { 'aria-label': this.getAccessibilityLabel() } : {}))), h("label", { key: '5779a0c2ccb3719b409cbc1df59a9da7b73fc555', htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label || ''), this.labelOn && this.labelOff && (h("div", { key: 'e428d6cfc6085043f61d9874805b90aa60f43cda', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff, "aria-hidden": "true" })))));
+        return (h(Host, { key: '7123eaff9442dac3b7cee5ed3b903f28c1a6627e' }, h("div", { key: '953ab9e7dc8d6abc9cb243400dd8d12170fb89ac', class: this.getCssClassMap() }, h("input", Object.assign({ key: 'b594af2f963bc749fec6de2bed41d4649e6cee88', id: this.customId, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, role: "switch", "aria-checked": this.checked ? 'true' : 'false', onChange: this.handleCheckedChange, onClick: this.handleClick }, (!hasVisibleText ? { 'aria-label': this.getAccessibilityLabel() } : {}))), h("label", { key: '09240437b92040bdc688058007953eed3e03ecb6', htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label || ''), this.labelOn && this.labelOff && (h("div", { key: '01a53aaf98721f448f06f086623ec338572a0c95', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff, "aria-hidden": "true" })))));
     }
     static get is() { return "br-switch"; }
     static get encapsulation() { return "shadow"; }