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

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do input.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n  /**\n   * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n   * - 'color': Seletor de cor\n   * - 'email': Campo para e-mail\n   * - 'hidden': Campo oculto\n   * - 'password': Campo para senha\n   * - 'range': Controle deslizante\n   * - 'search': Campo de pesquisa\n   * - 'number': Campo para números\n   * - 'tel': Campo para números de telefone\n   * - 'text': Campo de texto padrão\n   * - 'url': Campo para URLs\n   */\n  @Prop({ reflect: true }) type:\n    | 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'file'\n    | 'url' = 'text'\n\n  /**\n   * Controla o comportamento de preenchimento automático do navegador para o input.\n   */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o input, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se verdadeiro, o input terá destaque visual.\n   */\n  @Prop({ reflect: true }) isHighlight: boolean = false\n\n  /**\n   * Define o estado do input\n   * Os possíveis valores são:\n   * - 'info': Mensagem informativa.\n   * - 'warning': Mensagem de aviso.\n   * - 'danger': Mensagem de erro ou alerta.\n   * - 'success': Mensagem de sucesso.\n   * O valor padrão é 'info'.\n   */\n  @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success'\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Nome do input, utilizado para identificação em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /**\n   * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n   */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /**\n   * Valor inicial exibido no input.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /**\n   * Texto adicional que fornece ajuda ou informações sobre o input.\n   */\n  @Prop({ reflect: true }) helpText: string\n\n  @State() isPasswordVisible: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  componentWillLoad() {\n    this.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.hasActionSlot,\n      small: this.density === 'small',\n      large: this.density === 'large',\n      medium: this.density === 'medium',\n      'input-inline': this.isInline,\n      'input-highlight': this.isHighlight,\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      info: this.state === 'info',\n      warning: this.state === 'warning',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange!: EventEmitter<string>\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  private readonly renderLabel = () => {\n    if (this.label?.length > 0) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label class=\"text-nowrap\" htmlFor={this.customId}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.customId}>{this.label}</label>\n      }\n    }\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private readonly renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.customId}\n        autocomplete={this.autocomplete}\n        disabled={this.disabled}\n        onInput={this.handleInput}\n        placeholder={this.placeholder}\n        readonly={this.readonly}\n        required={this.required}\n        title={this.el.title}\n        type={this.type}\n        value={this.value}\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly renderHelpText = () => {\n    return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  private readonly renderIconPassword = () => {\n    const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';\n    return <br-icon icon-name={iconName}></br-icon>;\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    this.isPasswordVisible = !this.isPasswordVisible\n    input.type = this.isPasswordVisible ? 'text' : 'password'\n  }\n\n  private renderIconSlot() {\n    if (this.hasSlotContent('icon')) {\n      return (\n        <div class=\"input-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n      )\n    }\n  }\n\n  private renderButton() {\n    if (this.type === 'password') {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          onClick={this.togglePasswordVisibility}\n        >\n          {this.renderIconPassword()}\n        </br-button>\n      )\n    } else if (this.hasSlotContent('action')) {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          // onClick={this.onIconAction}\n        >\n          <slot name=\"action\"></slot>\n        </br-button>\n      )\n    }\n    return null\n  }\n\n  private readonly renderInlineInputContent = () => {\n    if (this.hasIconSlot) {\n      return (\n        <div class=\"input-content\">\n          {this.renderInputWithIcon()}\n        </div>\n      );\n    } else {\n      return (\n        <div class=\"input-content\">\n          {this.renderInputWithoutIcon()}\n        </div>\n      );\n    }\n  };\n\n  private readonly renderInputContent = () => {\n    return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n  }\n\n  private readonly renderInputWithIcon = () => {\n    return (\n      <div class=\"input-group\">\n        {this.renderIconSlot()}\n        {this.renderInput()}\n        {this.renderButton()}\n        {this.renderHelpText()}\n      </div>\n    );\n  };\n\n  private readonly renderInputWithoutIcon = () => {\n    return [\n      this.renderInput(),\n      this.renderButton(),\n      this.renderHelpText()\n    ]\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.isInline ? (\n            this.renderInlineInputContent()\n          ) : (\n            this.renderInputContent()\n        )}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do input.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n  /**\n   * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n   * - 'color': Seletor de cor\n   * - 'email': Campo para e-mail\n   * - 'hidden': Campo oculto\n   * - 'password': Campo para senha\n   * - 'range': Controle deslizante\n   * - 'search': Campo de pesquisa\n   * - 'number': Campo para números\n   * - 'tel': Campo para números de telefone\n   * - 'text': Campo de texto padrão\n   * - 'url': Campo para URLs\n   */\n  @Prop({ reflect: true }) type:\n    | 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'file'\n    | 'url' = 'text'\n\n  /**\n   * Controla o comportamento de preenchimento automático do navegador para o input.\n   */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o input, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se verdadeiro, o input terá destaque visual.\n   */\n  @Prop({ reflect: true }) isHighlight: boolean = false\n\n  /**\n   * Define o estado do input\n   * Os possíveis valores são:\n   * - 'info': Mensagem informativa.\n   * - 'warning': Mensagem de aviso.\n   * - 'danger': Mensagem de erro ou alerta.\n   * - 'success': Mensagem de sucesso.\n   * O valor padrão é 'info'.\n   */\n  @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success'\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Nome do input, utilizado para identificação em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /**\n   * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n   */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /**\n   * Valor inicial exibido no input.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /**\n   * Texto adicional que fornece ajuda ou informações sobre o input.\n   */\n  @Prop({ reflect: true }) helpText: string\n\n  /**\n   * Controla a correção automática do texto.\n   */\n  @Prop({ reflect: true }) autocorrect: 'off' | 'on' = 'off'\n\n  /**\n   * Define o valor mínimo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) min: number\n\n  /**\n   * Define o valor máximo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) max: number\n\n  /**\n   * Define o comprimento mínimo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) minlength: number\n\n  /**\n   * Define o comprimento máximo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) maxlength: number\n\n  /**\n   * Se verdadeiro, permite a seleção de múltiplos arquivos.\n   */\n  @Prop({ reflect: true }) multiple: boolean = false\n\n  /**\n   * Define o padrão de entrada para validação.\n   */\n  @Prop({ reflect: true }) pattern: string\n\n  /**\n   * Define o valor do passo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) step: number\n\n  @State() isPasswordVisible: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  componentWillLoad() {\n    this.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.hasActionSlot,\n      small: this.density === 'small',\n      large: this.density === 'large',\n      medium: this.density === 'medium',\n      'input-inline': this.isInline,\n      'input-highlight': this.isHighlight,\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      info: this.state === 'info',\n      warning: this.state === 'warning',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange!: EventEmitter<string>\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  private readonly renderLabel = () => {\n    if (this.label?.length > 0) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label class=\"text-nowrap\" htmlFor={this.customId}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.customId}>{this.label}</label>\n      }\n    }\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private readonly renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.customId}\n        autocomplete={this.autocomplete}\n        disabled={this.disabled}\n        autoCorrect={this.autocorrect}\n        min={this.min}\n        max={this.max}\n        minLength={this.minlength}\n        maxLength={this.maxlength}\n        multiple={this.multiple}\n        name={this.name}\n        pattern={this.pattern}\n        step={this.step}\n        onInput={this.handleInput}\n        placeholder={this.placeholder}\n        readonly={this.readonly}\n        required={this.required}\n        title={this.el.title}\n        type={this.type}\n        value={this.value}\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly renderHelpText = () => {\n    return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  private readonly renderIconPassword = () => {\n    const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye'\n    return <br-icon icon-name={iconName}></br-icon>\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    this.isPasswordVisible = !this.isPasswordVisible\n    input.type = this.isPasswordVisible ? 'text' : 'password'\n  }\n\n  private renderIconSlot() {\n    if (this.hasSlotContent('icon')) {\n      return (\n        <div class=\"input-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n      )\n    }\n  }\n\n  private renderButton() {\n    if (this.type === 'password') {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          onClick={this.togglePasswordVisibility}\n        >\n          {this.renderIconPassword()}\n        </br-button>\n      )\n    } else if (this.hasSlotContent('action')) {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          // onClick={this.onIconAction}\n        >\n          <slot name=\"action\"></slot>\n        </br-button>\n      )\n    }\n    return null\n  }\n\n  private readonly renderInlineInputContent = () => {\n    if (this.hasIconSlot) {\n      return <div class=\"input-content\">{this.renderInputWithIcon()}</div>\n    } else {\n      return <div class=\"input-content\">{this.renderInputWithoutIcon()}</div>\n    }\n  }\n\n  private readonly renderInputContent = () => {\n    return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n  }\n\n  private readonly renderInputWithIcon = () => {\n    return (\n      <div class=\"input-group\">\n        {this.renderIconSlot()}\n        {this.renderInput()}\n        {this.renderButton()}\n        {this.renderHelpText()}\n      </div>\n    )\n  }\n\n  private readonly renderInputWithoutIcon = () => {\n    return [this.renderInput(), this.renderButton(), this.renderHelpText()]\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.isInline ? this.renderInlineInputContent() : this.renderInputContent()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/tag/tag.css

@@ -0,0 +1,643 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: var(--font-line-height-medium);
+  -webkit-text-size-adjust: 100%;
+     -moz-text-size-adjust: 100%;
+          text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  background-color: transparent;
+}
+
+
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+img {
+  border-style: none;
+}
+
+button,
+input,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: var(--font-line-height-medium);
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button {
+  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] {
+  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;
+}
+
+[hidden] {
+  display: none;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+.col,
+[class*=col-] {
+  padding-left: calc(var(--grid-gutter) * 0.5);
+  padding-right: calc(var(--grid-gutter) * 0.5);
+  width: 100%;
+}
+
+.col {
+  flex: 1 0 0%;
+  min-width: 8.3333333333%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.container {
+  --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: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--grid-gutter) * -0.5);
+  margin-right: calc(var(--grid-gutter) * -0.5);
+}
+
+@media (min-width: 576px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
+  .row {
+    --grid-gutter: var(--grid-tablet-gutter);
+  }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    --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 {
+    --grid-margin: var(--grid-desktop-margin);
+  }
+  .row {
+    --grid-gutter: var(--grid-desktop-gutter);
+  }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
+  }
+}
+@media (min-width: 1600px) {
+  .container {
+    --grid-margin: var(--grid-tv-margin);
+  }
+  .row {
+    --grid-gutter: var(--grid-tv-gutter);
+  }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
+  }
+}
+
+.mt-1 {
+  margin-top: var(--spacing-scale-half) !important;
+}
+
+.mr-1 {
+  margin-right: var(--spacing-scale-half) !important;
+}
+
+.mr-2 {
+  margin-right: var(--spacing-scale-base) !important;
+}
+
+.mr-n2 {
+  margin-right: calc(var(--spacing-scale-base) * -1) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--spacing-scale-2x) !important;
+}
+
+.mr-auto {
+  margin-right: 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;
+}
+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);
+  color: var(--interactive);
+  text-decoration: none;
+}
+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: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
+}
+a:not(:disabled):active {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
+}
+
+button {
+  cursor: pointer;
+}
+
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
+
+label,
+.label {
+  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);
+}
+
+::-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;
+}
+
+::placeholder,
+.placeholder {
+  color: var(--color-light);
+  font-size: var(--font-size-scale-base);
+  font-style: italic;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-medium);
+  margin-bottom: var(--spacing-scale-half);
+  margin-top: var(--spacing-scale-half);
+  opacity: 1;
+}
+
+input,
+textarea,
+.input {
+  color: var(--color-light);
+  font-size: var(--font-size-scale-up-01);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-low);
+  margin-bottom: var(--spacing-scale-half);
+}
+
+.text-pure-0 {
+  color: var(--pure-0) !important;
+}
+
+.text-primary-default {
+  color: var(--color-primary-default) !important;
+}
+
+.bg-support-01 {
+  --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);
+  background: var(--color-support-01) !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-base {
+  font-size: var(--font-size-scale-base) !important;
+}
+
+.highlight {
+  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] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
+.br-tag {
+  --tag-size: var(--tag-medium);
+  --tag-small: var(--spacing-scale-2xh);
+  --tag-medium: var(--spacing-scale-3xh);
+  --tag-large: var(--spacing-scale-4xh);
+  align-items: center;
+  background: var(--background-dark);
+  border-radius: var(--surface-rounder-sm);
+  color: var(--color-dark);
+  display: inline-flex;
+  font-size: var(--font-size-scale-base);
+  font-weight: var(--font-weight-medium);
+  justify-content: center;
+  margin: 0;
+  min-height: var(--tag-size);
+  padding: 0 var(--spacing-scale-baseh);
+  align-items: center;
+  background: var(--background-dark);
+  border-radius: var(--surface-rounder-sm);
+  color: var(--color-dark);
+  display: inline-flex;
+  font-size: var(--font-size-scale-base);
+  font-weight: var(--font-weight-medium);
+  justify-content: center;
+  margin: 0;
+  min-height: var(--tag-size);
+  padding: 0 var(--spacing-scale-baseh);
+}
+.br-tag + .br-tag {
+  margin-left: var(--spacing-scale-half);
+}
+.br-tag.interaction {
+  --tag-small: var(--spacing-scale-4x);
+  --tag-medium: var(--spacing-scale-5x);
+  --tag-large: var(--spacing-scale-5xh);
+  font-size: var(--font-size-scale-up-01);
+}
+.br-tag.interaction {
+  background: var(--interactive);
+}
+.br-tag.interaction .br-button {
+  --button-size: var(--spacing-scale-3xh);
+  --focus: var(--focus-color-dark);
+  --hover: var(--hover-dark);
+  --interactive-rgb: var(--color-dark-rgb);
+  background-color: var(--interactive-light);
+  border-radius: 50%;
+  color: var(--color-dark);
+  margin-left: var(--spacing-scale-baseh);
+  padding: 0;
+  width: var(--button-size);
+}
+.br-tag.interaction:hover .br-button {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
+}
+.br-tag.interaction:active .br-button {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
+}
+.br-tag.disabled input {
+  cursor: not-allowed;
+}
+.br-tag.status {
+  --tag-small: var(--spacing-scale-baseh);
+  --tag-medium: var(--spacing-scale-2x);
+  --tag-large: var(--spacing-scale-3x);
+  border: 1px solid var(--background-light);
+  border-radius: 50%;
+  min-width: var(--tag-size);
+  padding: 0;
+}
+.br-tag.count {
+  --tag-small: var(--spacing-scale-2xh);
+  --tag-medium: var(--spacing-scale-3x);
+  --tag-large: var(--spacing-scale-3xh);
+  border: 1px solid var(--background-light);
+  border-radius: 100em;
+  min-width: var(--tag-size);
+  padding-left: var(--spacing-scale-base);
+  padding-right: var(--spacing-scale-base);
+}
+.br-tag.icon {
+  --tag-small: var(--spacing-scale-3xh);
+  --tag-medium: var(--spacing-scale-4x);
+  --tag-large: var(--spacing-scale-5xh);
+  border-radius: 50%;
+  min-width: var(--tag-size);
+  padding: 0;
+}
+.br-tag.small {
+  --tag-size: var(--tag-small);
+}
+.br-tag.medium {
+  --tag-size: var(--tag-medium);
+}
+.br-tag.large {
+  --tag-size: var(--tag-large);
+}
+.br-tag.interaction {
+  --tag-small: var(--spacing-scale-4x);
+  --tag-medium: var(--spacing-scale-5x);
+  --tag-large: var(--spacing-scale-5xh);
+  font-size: var(--font-size-scale-up-01);
+}
+.br-tag.interaction {
+  background: var(--interactive);
+}
+.br-tag.interaction .br-button {
+  --button-size: var(--spacing-scale-3xh);
+  --focus: var(--focus-color-dark);
+  --hover: var(--hover-dark);
+  --interactive-rgb: var(--color-dark-rgb);
+  background-color: var(--interactive-light);
+  border-radius: 50%;
+  color: var(--color-dark);
+  margin-left: var(--spacing-scale-baseh);
+  padding: 0;
+  width: var(--button-size);
+}
+.br-tag.interaction:hover .br-button {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
+}
+.br-tag.interaction:active .br-button {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
+}
+.br-tag.disabled input {
+  cursor: not-allowed;
+}
+.br-tag.interaction {
+  --tag-small: var(--spacing-scale-4x);
+  --tag-medium: var(--spacing-scale-5x);
+  --tag-large: var(--spacing-scale-5xh);
+  font-size: var(--font-size-scale-up-01);
+}
+.br-tag.interaction {
+  background: var(--interactive);
+}
+.br-tag.interaction .br-button {
+  --button-size: var(--spacing-scale-3xh);
+  --focus: var(--focus-color-dark);
+  --hover: var(--hover-dark);
+  --interactive-rgb: var(--color-dark-rgb);
+  background-color: var(--interactive-light);
+  border-radius: 50%;
+  color: var(--color-dark);
+  margin-left: var(--spacing-scale-baseh);
+  padding: 0;
+  width: var(--button-size);
+}
+.br-tag.interaction:hover .br-button {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
+}
+.br-tag.interaction:active .br-button {
+  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
+}
+.br-tag.disabled input {
+  cursor: not-allowed;
+}
+.br-tag + .br-tag {
+  margin-left: var(--spacing-scale-half);
+}
+.br-tag.small {
+  --tag-size: var(--tag-small);
+}
+.br-tag.medium {
+  --tag-size: var(--tag-medium);
+}
+.br-tag.large {
+  --tag-size: var(--tag-large);
+}
+.br-tag.is-highlight, .br-tag.highlight, .br-tag[highlight] {
+  background-color: #268744;
+}
+ .br-tag.success, .br-tag[success] {
+  background-color: var(--success);
+}
+ .br-tag.danger, .br-tag[danger] {
+  background-color: var(--danger);
+}
+ .br-tag.warning, .br-tag[warning] {
+  background-color: var(--warning);
+}
+ .br-tag.info, .br-tag[info] {
+  background-color: var(--info);
+}
+
+:host {
+  display: block;
+}
+:host .tag-position {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+:host .tag-spacing-status {
+  margin-left: var(--spacing-scale-half) !important;
+}