@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/card/card.js

@@ -0,0 +1,225 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+import { hasNamedLightDomSlot } from "../../shared/utils/slot";
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/card?tab=designer).
+ *
+ * @category Layout
+ * @status stable
+ * @slot default - Slot para conteúdo livre do card, quando não usar a estrutura de slots nomeados.
+ * @slot media - Slot para conteúdo de mídia exibido antes do cabeçalho.
+ * @slot header - Slot para o conteúdo do cabeçalho do card.
+ * @slot content - Slot para o corpo principal do card ao usar a estrutura de slots.
+ * @slot footer - Slot para o conteúdo do rodapé do card.
+ *
+ * @part wrapper - Área principal do card.
+ * @part media - Área de mídia do card.
+ * @part header - Área do cabeçalho.
+ * @part content - Área do conteúdo principal.
+ * @part footer - Área do rodapé.
+ */
+export class BrCard {
+    constructor() {
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Desabilita a interação com o componente.
+         *
+         */
+        this.disabled = false;
+        /**
+         * Define se o card tem hover interativo.
+         * Quando true, o card terá efeitos visuais ao passar o mouse.
+         */
+        /** @deprecated Use `interactive`. */
+        this.hover = false;
+        this.hasMedia = false;
+        this.hasHeader = false;
+        this.hasContent = false;
+        this.hasFooter = false;
+    }
+    componentWillLoad() {
+        this.checkSlots();
+    }
+    componentDidLoad() {
+        this.slotObserver = new MutationObserver(() => this.checkSlots());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+        this.slotObserver = undefined;
+    }
+    checkSlots() {
+        const next = {
+            media: hasNamedLightDomSlot(this.el, 'media'),
+            header: hasNamedLightDomSlot(this.el, 'header'),
+            content: hasNamedLightDomSlot(this.el, 'content'),
+            footer: hasNamedLightDomSlot(this.el, 'footer'),
+        };
+        if (this.hasMedia !== next.media)
+            this.hasMedia = next.media;
+        if (this.hasHeader !== next.header)
+            this.hasHeader = next.header;
+        if (this.hasContent !== next.content)
+            this.hasContent = next.content;
+        if (this.hasFooter !== next.footer)
+            this.hasFooter = next.footer;
+    }
+    getCssClassMap() {
+        return {
+            'br-card': true,
+            disabled: this.disabled,
+            hover: (this.interactive ?? this.hover) && !this.disabled,
+        };
+    }
+    getHeaderClassMap() {
+        return {
+            'card-header': true,
+        };
+    }
+    getContentClassMap() {
+        return {
+            'card-content': true,
+        };
+    }
+    getFooterClassMap() {
+        return {
+            'card-footer': true,
+        };
+    }
+    render() {
+        const hasStructuredContent = this.hasHeader || this.hasContent || this.hasFooter;
+        return (h(Host, { key: '560c7f841d7240aa9791991a5481084735cf3b6c', id: this.customId, "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '7b48c0c34e81ae58df865d85a0eaeef54aef35fb', class: this.getCssClassMap(), part: "wrapper" }, hasStructuredContent
+            ? [
+                this.hasMedia && (h("div", { part: "media" }, h("slot", { name: "media" }))),
+                this.hasHeader && (h("div", { class: this.getHeaderClassMap(), part: "header" }, h("slot", { name: "header" }))),
+                (this.hasContent || !this.hasFooter) && (h("div", { class: this.getContentClassMap(), part: "content" }, h("slot", { name: "content" }, h("slot", null)))),
+                this.hasFooter && (h("div", { class: this.getFooterClassMap(), part: "footer" }, h("slot", { name: "footer" }))),
+            ]
+            : [
+                this.hasMedia && (h("div", { part: "media" }, h("slot", { name: "media" }))),
+                h("div", { class: this.getContentClassMap(), part: "content" }, h("slot", null)),
+            ])));
+    }
+    static get is() { return "br-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita a intera\u00E7\u00E3o com o componente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "hover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `interactive`."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hover",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita indica\u00E7\u00E3o visual de interatividade. Quando informada, tem preced\u00EAncia sobre `hover`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interactive"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasMedia": {},
+            "hasHeader": {},
+            "hasContent": {},
+            "hasFooter": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/carousel/carousel-page/carousel-page.css

@@ -0,0 +1 @@
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}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]{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}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}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]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[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-notification{left:auto;right:0}.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)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.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: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,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--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,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--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))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !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}.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-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}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: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)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}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%}tr.selected,tr.is-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)}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)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::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)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):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)}.carousel-content{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:center;width:100%}::slotted(img){display:block;height:100%;object-fit:var(--carousel-page-image-fit, cover);width:100%}:host([active]:focus){outline:none}:host([active]:focus-visible){outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}

package/dist/collection/components/carousel/carousel-page/carousel-page.js

@@ -0,0 +1,195 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+/**
+ * ## Design System
+ *
+ * Subcomponente do `br-carousel`. Representa um slide individual dentro do carrossel.
+ * Deve ser usado exclusivamente como filho direto de `br-carousel`.
+ *
+ * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).
+ *
+ * @slot default - Qualquer conteúdo: imagens, textos, cards, vídeos, outros componentes do Design System.
+ *
+ * @part content - Wrapper interno do conteúdo do slide.
+ */
+export class CarouselPage {
+    constructor() {
+        /** @State() privado: controla se este slide está ativo (visível e focável). */
+        this.isActive = false;
+        /**
+         * Role ARIA interna do slide.
+         * - `group`: padrão W3C para carrossel básico/agrupado.
+         * - `tabpanel`: definido automaticamente quando o pai `br-carousel`
+         *   usa `indicatorType="simple"`, conforme o padrão W3C.
+         * Derivado automaticamente de `indicator-type` do `br-carousel` pai.
+         */
+        this.panelRole = 'group';
+        /**
+         * Marca este slide como visível e acessível.
+         * Pode ser usado declarativamente no HTML para definir o slide inicial:
+         * Em runtime, o `br-carousel` pai gerencia o estado via `setActive()`.
+         */
+        this.active = false;
+    }
+    onActiveChange(newVal) {
+        this.isActive = newVal;
+    }
+    componentWillLoad() {
+        const parent = this.el.closest('br-carousel');
+        this.panelRole = parent?.getAttribute('indicator-type') === 'simple' ? 'tabpanel' : 'group';
+        this.onActiveChange(this.active);
+    }
+    /**
+     * Define o label acessível (`aria-label`) do slide.
+     *
+     * Chamado pelo `br-carousel` pai para aplicar o label gerado automaticamente
+     * com base na posição do slide (ex: `"Slide 1 de 3"`).
+     *
+     * O `aria-label` declarado diretamente no elemento tem prioridade:
+     * se o consumidor definir `aria-label` no HTML ou via `setAttribute`,
+     * esse valor será mantido e o parâmetro `defaultLabel` será ignorado.
+     *
+     * @param defaultLabel - Label de fallback gerado pelo `br-carousel` (ex: `"Slide 2 de 4"`).
+     */
+    async setLabel(defaultLabel) {
+        this.slideLabel = this.el.getAttribute('aria-label') || defaultLabel;
+    }
+    /**
+     * Ativa ou desativa o slide.
+     */
+    async setActive(active) {
+        this.isActive = active;
+        if (active) {
+            this.el.setAttribute('active', '');
+            this.el.removeAttribute('aria-hidden');
+        }
+        else {
+            this.el.removeAttribute('active');
+            this.el.setAttribute('aria-hidden', 'true');
+        }
+    }
+    render() {
+        return (h(Host, { key: '4668bfb777b209f9020179dea7e710757e1a56ee', id: this.customId || undefined, role: this.panelRole, "aria-roledescription": "slide", "aria-label": this.slideLabel, tabIndex: this.isActive ? 0 : undefined }, h("div", { key: 'dbac40e4f7f4587d3c09e5b8c96fc88c0ee07619', part: "content", class: "carousel-content" }, h("slot", { key: 'f2884321c3b894115f639de0f463009b2bff517c' }))));
+    }
+    static get is() { return "br-carousel-page"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel-page.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel-page.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico customiz\u00E1vel do slide.\nQuando definido, \u00E9 aplicado diretamente ao atributo `id` do elemento host,\ngarantindo que refer\u00EAncias ARIA externas, testes automatizados e \u00E2ncoras funcionem corretamente.\nO `br-carousel` pai detecta este valor e usa-o tamb\u00E9m no `controls-id` do indicador de tabs,\nmantendo o v\u00EDnculo ARIA entre tab e tabpanel automaticamente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca este slide como vis\u00EDvel e acess\u00EDvel.\nPode ser usado declarativamente no HTML para definir o slide inicial:\nEm runtime, o `br-carousel` pai gerencia o estado via `setActive()`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isActive": {},
+            "panelRole": {},
+            "slideLabel": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setLabel": {
+                "complexType": {
+                    "signature": "(defaultLabel: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "defaultLabel",
+                            "type": "string",
+                            "docs": "- Label de fallback gerado pelo `br-carousel` (ex: `\"Slide 2 de 4\"`)."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o label acess\u00EDvel (`aria-label`) do slide.\n\nChamado pelo `br-carousel` pai para aplicar o label gerado automaticamente\ncom base na posi\u00E7\u00E3o do slide (ex: `\"Slide 1 de 3\"`).\n\nO `aria-label` declarado diretamente no elemento tem prioridade:\nse o consumidor definir `aria-label` no HTML ou via `setAttribute`,\nesse valor ser\u00E1 mantido e o par\u00E2metro `defaultLabel` ser\u00E1 ignorado.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "defaultLabel - Label de fallback gerado pelo `br-carousel` (ex: `\"Slide 2 de 4\"`)."
+                        }]
+                }
+            },
+            "setActive": {
+                "complexType": {
+                    "signature": "(active: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "active",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Ativa ou desativa o slide.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "onActiveChange"
+            }];
+    }
+}

package/dist/collection/components/carousel/carousel.css

@@ -0,0 +1 @@
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}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]{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}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}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]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[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-notification{left:auto;right:0}.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)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.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: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,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--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,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--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))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !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}.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-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}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: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)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}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%}tr.selected,tr.is-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)}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)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::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)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):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-carousel{--carousel-button-margin: var(--spacing-scale-default);--carousel-buton-icon-size: var(--–icon-size-base);--carousel-step-height: 40px;--carousel-step-progress-min-height: 32px;--carousel-full-size: 100%;--carousel-min-height: 400px;--carousel-button-fix-height: 52px;--carousel-button-fix-width: 100px;--carousel-step-progress-background: transparent;display:flex;height:var(--carousel-full-size);min-height:var(--carousel-min-height);position:relative;width:var(--carousel-full-size)}.br-carousel .carousel-stage{display:block;flex-wrap:nowrap;height:var(--carousel-step-height);overflow:hidden;position:relative;width:var(--carousel-full-width);z-index:0}.br-carousel .carousel-stage .carousel-page{align-items:center;display:flex;flex-wrap:wrap;height:var(--carousel-full-size);justify-content:center;left:var(--carousel-full-size);margin-bottom:var(--spacing-scale-4x);opacity:0;overflow:hidden;position:absolute;top:0;transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out;visibility:hidden;width:var(--carousel-full-size)}.br-carousel .carousel-stage .carousel-page[active]{height:var(--carousel-full-size);left:0 !important;opacity:1;transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out;visibility:visible}.br-carousel .carousel-stage .carousel-page .carousel-content{align-items:center;display:flex;flex-wrap:wrap;height:var(--carousel-full-size);justify-content:center;width:var(--carousel-full-size)}.br-carousel .carousel-step{bottom:8px;height:var(--carousel-step-height);position:absolute;width:var(--carousel-full-size)}.br-carousel .carousel-step .br-step[data-type=simple] .step-progress,.br-carousel .carousel-step .br-step[data-type=text] .step-progress{background:var(--carousel-step-progress-background);min-height:var(--carousel-step-progress-min-height)}.br-carousel .carousel-step .br-step[data-type=simple] .step-progress .step-progress-btn,.br-carousel .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn{top:0}.br-carousel .carousel-step .br-step[data-type=simple] .step-progress .step-progress-btn:hover:not([disabled])::before,.br-carousel .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn:hover:not([disabled])::before{background-image:none}.br-carousel .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn{cursor:default;margin:0}.br-carousel .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn.focus-visible::before{outline-color:rgba(0,0,0,0) !important}.br-carousel .carousel-button{align-items:center;display:flex;height:var(--carousel-full-size);left:unset;position:absolute;right:0;width:fit-content;z-index:1}.br-carousel .carousel-button:first-child{left:0;right:unset}.br-carousel .carousel-button .carousel-btn-next,.br-carousel .carousel-button .carousel-btn-prev{margin:var(--carousel-button-margin);padding:0}.br-carousel[data-stage=in] .carousel-button{height:var(--carousel-full-size)}.br-carousel[data-stage=in] .carousel-button .carousel-btn-next,.br-carousel[data-stage=in] .carousel-button .carousel-btn-prev{border-radius:0;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}.br-carousel[data-stage=in] .carousel-stage{height:var(--carousel-full-size);left:0;width:var(--carousel-full-size)}.br-carousel[data-stage=out] .carousel-button,.br-carousel .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}.br-carousel[data-stage=out] .carousel-stage,.br-carousel .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:50px;width:calc(var(--carousel-full-size) - var(--carousel-button-fix-width))}.br-carousel[data-stage=hibh] .carousel-button{height:var(--carousel-full-size)}.br-carousel[data-stage=hibh] .carousel-stage{height:var(--carousel-full-size);left:50px;width:calc(var(--carousel-full-size) - var(--carousel-button-fix-width))}.br-carousel[data-stage=hibw] .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}.br-carousel[data-stage=hibw] .carousel-button .carousel-btn-next,.br-carousel[data-stage=hibw] .carousel-button .carousel-btn-prev{border-radius:0;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}.br-carousel[data-stage=hibw] .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:0;width:var(--carousel-full-size)}@media(max-width: 991px){.br-carousel{max-width:var(--carousel-full-size);width:var(--carousel-full-size)}.br-carousel .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}.br-carousel .carousel-button .carousel-btn-next,.br-carousel .carousel-button .carousel-btn-prev{border-radius:0;display:none;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}.br-carousel[data-mobile-nav] .carousel-button .carousel-btn-next,.br-carousel[data-mobile-nav] .carousel-button .carousel-btn-prev{display:flex}.br-carousel .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:0;width:var(--carousel-full-size)}.br-carousel .carousel-step .br-step[data-type=simple] .step-progress,.br-carousel .carousel-step .br-step[data-type=text] .step-progress{padding-top:0 !important}}.br-carousel.inverted,.br-carousel.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-carousel.inverted .br-step,.br-carousel.dark-mode .br-step{--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-carousel.inverted .br-step .step-progress-btn[data-alert=success],.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=success]{color:var(--success-alternative)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=success] .step-info,.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=success] .step-info{color:var(--success-alternative)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=success] .step-alert::after,.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=success] .step-alert::after{content:var(--step-alert-success-icon)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=info],.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=info]{color:var(--info-alternative)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=info] .step-info,.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=info] .step-info{color:var(--info-alternative)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=info] .step-alert::after,.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=info] .step-alert::after{content:var(--step-alert-info-icon)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=warning] .step-alert::after,.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=warning] .step-alert::after{content:var(--step-alert-warning-icon)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=danger],.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=danger]{color:var(--danger-alternative)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=danger] .step-info,.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=danger] .step-info{color:var(--danger-alternative)}.br-carousel.inverted .br-step .step-progress-btn[data-alert=danger] .step-alert::after,.br-carousel.dark-mode .br-step .step-progress-btn[data-alert=danger] .step-alert::after{content:var(--step-alert-danger-icon)}.br-carousel.inverted .br-step .step-progress-btn.active,.br-carousel.inverted .br-step .step-progress-btn[active],.br-carousel.dark-mode .br-step .step-progress-btn.active,.br-carousel.dark-mode .br-step .step-progress-btn[active]{color:var(--color-dark)}.br-carousel.inverted .br-step .step-progress-btn.active::before,.br-carousel.inverted .br-step .step-progress-btn[active]::before,.br-carousel.dark-mode .br-step .step-progress-btn.active::before,.br-carousel.dark-mode .br-step .step-progress-btn[active]::before{background-color:var(--background-light);border-color:var(--background-light);color:var(--active)}.br-carousel.inverted .br-step .step-progress-btn.active .step-icon,.br-carousel.inverted .br-step .step-progress-btn[active] .step-icon,.br-carousel.dark-mode .br-step .step-progress-btn.active .step-icon,.br-carousel.dark-mode .br-step .step-progress-btn[active] .step-icon{color:var(--active)}.br-carousel.inverted .br-step[data-type=void] .step-progress-btn.active .step-alert,.br-carousel.inverted .br-step[data-type=void] .step-progress-btn[active] .step-alert,.br-carousel.dark-mode .br-step[data-type=void] .step-progress-btn.active .step-alert,.br-carousel.dark-mode .br-step[data-type=void] .step-progress-btn[active] .step-alert{border-color:var(--color-dark)}.br-carousel.inverted .br-step[data-type=text] .step-progress-btn::before,.br-carousel.dark-mode .br-step[data-type=text] .step-progress-btn::before{background-color:rgba(0,0,0,0);color:var(--color)}.br-carousel .carousel-page[active]:focus,.br-carousel .carousel-page[active]:focus-visible,.br-carousel .carousel-page[active]:focus-within{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{display:block;min-width:0;min-height:var(--carousel-min-height, 400px);--carousel-button-margin: var(--spacing-scale-default);--carousel-buton-icon-size: var(--–icon-size-base);--carousel-step-height: 40px;--carousel-step-progress-min-height: 32px;--carousel-full-size: 100%;--carousel-min-height: 400px;--carousel-button-fix-height: 52px;--carousel-button-fix-width: 100px;--carousel-step-progress-background: transparent;display:flex;height:var(--carousel-full-size);min-height:var(--carousel-min-height);position:relative;width:var(--carousel-full-size)}:host .carousel-stage{display:block;flex-wrap:nowrap;height:var(--carousel-step-height);overflow:hidden;position:relative;width:var(--carousel-full-width);z-index:0}:host .carousel-stage .carousel-page{align-items:center;display:flex;flex-wrap:wrap;height:var(--carousel-full-size);justify-content:center;left:var(--carousel-full-size);margin-bottom:var(--spacing-scale-4x);opacity:0;overflow:hidden;position:absolute;top:0;transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out;visibility:hidden;width:var(--carousel-full-size)}:host .carousel-stage .carousel-page[active]{height:var(--carousel-full-size);left:0 !important;opacity:1;transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out;visibility:visible}:host .carousel-stage .carousel-page .carousel-content{align-items:center;display:flex;flex-wrap:wrap;height:var(--carousel-full-size);justify-content:center;width:var(--carousel-full-size)}:host .carousel-step{bottom:8px;height:var(--carousel-step-height);position:absolute;width:var(--carousel-full-size)}:host .carousel-step .br-step[data-type=simple] .step-progress,:host .carousel-step .br-step[data-type=text] .step-progress{background:var(--carousel-step-progress-background);min-height:var(--carousel-step-progress-min-height)}:host .carousel-step .br-step[data-type=simple] .step-progress .step-progress-btn,:host .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn{top:0}:host .carousel-step .br-step[data-type=simple] .step-progress .step-progress-btn:hover:not([disabled])::before,:host .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn:hover:not([disabled])::before{background-image:none}:host .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn{cursor:default;margin:0}:host .carousel-step .br-step[data-type=text] .step-progress .step-progress-btn.focus-visible::before{outline-color:rgba(0,0,0,0) !important}:host .carousel-button{align-items:center;display:flex;height:var(--carousel-full-size);left:unset;position:absolute;right:0;width:fit-content;z-index:1}:host .carousel-button:first-child{left:0;right:unset}:host .carousel-button .carousel-btn-next,:host .carousel-button .carousel-btn-prev{margin:var(--carousel-button-margin);padding:0}:host[data-stage=in] .carousel-button{height:var(--carousel-full-size)}:host[data-stage=in] .carousel-button .carousel-btn-next,:host[data-stage=in] .carousel-button .carousel-btn-prev{border-radius:0;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}:host[data-stage=in] .carousel-stage{height:var(--carousel-full-size);left:0;width:var(--carousel-full-size)}:host[data-stage=out] .carousel-button,:host .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}:host[data-stage=out] .carousel-stage,:host .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:50px;width:calc(var(--carousel-full-size) - var(--carousel-button-fix-width))}:host[data-stage=hibh] .carousel-button{height:var(--carousel-full-size)}:host[data-stage=hibh] .carousel-stage{height:var(--carousel-full-size);left:50px;width:calc(var(--carousel-full-size) - var(--carousel-button-fix-width))}:host[data-stage=hibw] .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}:host[data-stage=hibw] .carousel-button .carousel-btn-next,:host[data-stage=hibw] .carousel-button .carousel-btn-prev{border-radius:0;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}:host[data-stage=hibw] .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:0;width:var(--carousel-full-size)}@media(max-width: 991px){:host{max-width:var(--carousel-full-size);width:var(--carousel-full-size)}:host .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}:host .carousel-button .carousel-btn-next,:host .carousel-button .carousel-btn-prev{border-radius:0;display:none;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}:host[data-mobile-nav] .carousel-button .carousel-btn-next,:host[data-mobile-nav] .carousel-button .carousel-btn-prev{display:flex}:host .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:0;width:var(--carousel-full-size)}:host .carousel-step .br-step[data-type=simple] .step-progress,:host .carousel-step .br-step[data-type=text] .step-progress{padding-top:0 !important}}:host.inverted,:host.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.inverted .br-step,:host.dark-mode .br-step{--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.inverted .br-step .step-progress-btn[data-alert=success],:host.dark-mode .br-step .step-progress-btn[data-alert=success]{color:var(--success-alternative)}:host.inverted .br-step .step-progress-btn[data-alert=success] .step-info,:host.dark-mode .br-step .step-progress-btn[data-alert=success] .step-info{color:var(--success-alternative)}:host.inverted .br-step .step-progress-btn[data-alert=success] .step-alert::after,:host.dark-mode .br-step .step-progress-btn[data-alert=success] .step-alert::after{content:var(--step-alert-success-icon)}:host.inverted .br-step .step-progress-btn[data-alert=info],:host.dark-mode .br-step .step-progress-btn[data-alert=info]{color:var(--info-alternative)}:host.inverted .br-step .step-progress-btn[data-alert=info] .step-info,:host.dark-mode .br-step .step-progress-btn[data-alert=info] .step-info{color:var(--info-alternative)}:host.inverted .br-step .step-progress-btn[data-alert=info] .step-alert::after,:host.dark-mode .br-step .step-progress-btn[data-alert=info] .step-alert::after{content:var(--step-alert-info-icon)}:host.inverted .br-step .step-progress-btn[data-alert=warning] .step-alert::after,:host.dark-mode .br-step .step-progress-btn[data-alert=warning] .step-alert::after{content:var(--step-alert-warning-icon)}:host.inverted .br-step .step-progress-btn[data-alert=danger],:host.dark-mode .br-step .step-progress-btn[data-alert=danger]{color:var(--danger-alternative)}:host.inverted .br-step .step-progress-btn[data-alert=danger] .step-info,:host.dark-mode .br-step .step-progress-btn[data-alert=danger] .step-info{color:var(--danger-alternative)}:host.inverted .br-step .step-progress-btn[data-alert=danger] .step-alert::after,:host.dark-mode .br-step .step-progress-btn[data-alert=danger] .step-alert::after{content:var(--step-alert-danger-icon)}:host.inverted .br-step .step-progress-btn.active,:host.inverted .br-step .step-progress-btn[active],:host.dark-mode .br-step .step-progress-btn.active,:host.dark-mode .br-step .step-progress-btn[active]{color:var(--color-dark)}:host.inverted .br-step .step-progress-btn.active::before,:host.inverted .br-step .step-progress-btn[active]::before,:host.dark-mode .br-step .step-progress-btn.active::before,:host.dark-mode .br-step .step-progress-btn[active]::before{background-color:var(--background-light);border-color:var(--background-light);color:var(--active)}:host.inverted .br-step .step-progress-btn.active .step-icon,:host.inverted .br-step .step-progress-btn[active] .step-icon,:host.dark-mode .br-step .step-progress-btn.active .step-icon,:host.dark-mode .br-step .step-progress-btn[active] .step-icon{color:var(--active)}:host.inverted .br-step[data-type=void] .step-progress-btn.active .step-alert,:host.inverted .br-step[data-type=void] .step-progress-btn[active] .step-alert,:host.dark-mode .br-step[data-type=void] .step-progress-btn.active .step-alert,:host.dark-mode .br-step[data-type=void] .step-progress-btn[active] .step-alert{border-color:var(--color-dark)}:host.inverted .br-step[data-type=text] .step-progress-btn::before,:host.dark-mode .br-step[data-type=text] .step-progress-btn::before{background-color:rgba(0,0,0,0);color:var(--color)}:host .carousel-page[active]:focus,:host .carousel-page[active]:focus-visible,:host .carousel-page[active]:focus-within{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host .br-carousel .carousel-button[part=nav-prev]{left:0;right:unset}:host .br-carousel[data-stage=in] .carousel-button{height:var(--carousel-full-size)}:host .br-carousel[data-stage=in] .carousel-button br-button.carousel-btn-next::part(button),:host .br-carousel[data-stage=in] .carousel-button br-button.carousel-btn-prev::part(button){border-radius:0;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}:host .br-carousel[data-stage=in] .carousel-stage{height:var(--carousel-full-size);left:0;width:var(--carousel-full-size)}:host .br-carousel[data-stage=out] .carousel-button,:host .br-carousel .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}:host .br-carousel .carousel-stage{box-sizing:border-box;min-width:0;max-width:100%}:host .br-carousel{container-type:inline-size;min-width:0}:host .br-carousel .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:50px;width:calc(var(--carousel-full-size) - var(--carousel-button-fix-width))}:host .br-carousel[data-stage=hibh] .carousel-button{height:var(--carousel-full-size)}:host .br-carousel[data-stage=hibh] .carousel-stage{height:var(--carousel-full-size);left:50px;width:calc(var(--carousel-full-size) - var(--carousel-button-fix-width))}:host .br-carousel[data-stage=hibw] .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}:host .br-carousel[data-stage=hibw] .carousel-button br-button.carousel-btn-next::part(button),:host .br-carousel[data-stage=hibw] .carousel-button br-button.carousel-btn-prev::part(button){border-radius:0;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}:host .br-carousel[data-stage=hibw] .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:0;width:var(--carousel-full-size)}@container (max-width: 991px){:host .br-carousel .carousel-button{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height))}:host .br-carousel .carousel-button br-button.carousel-btn-next,:host .br-carousel .carousel-button br-button.carousel-btn-prev{border-radius:0;display:none;height:var(--carousel-full-size);margin:0;padding:0 var(--spacing-scale-default)}:host .br-carousel[data-mobile-nav] .carousel-button br-button.carousel-btn-next,:host .br-carousel[data-mobile-nav] .carousel-button br-button.carousel-btn-prev{display:flex}:host .br-carousel .carousel-stage{height:calc(var(--carousel-full-size) - var(--carousel-button-fix-height));left:0;width:var(--carousel-full-size)}}::slotted(br-carousel-page){align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:center;left:100%;margin-bottom:var(--spacing-scale-4x);opacity:0;overflow:hidden;position:absolute;top:0;transition:all var(--duration-moderate, 0.5s) ease-in-out 0s;visibility:hidden;width:100%;min-width:0}::slotted(br-carousel-page[active]){height:100%;left:0 !important;opacity:1;visibility:visible}.carousel-page-text{align-items:center;display:flex;font-size:var(--font-size-scale-base);justify-content:center;padding:var(--spacing-scale-2x) 0;width:100%}.br-carousel.dark-mode .carousel-page-text,.br-carousel.inverted .carousel-page-text{color:var(--color-dark)}.carousel-stage{overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.carousel-play-button{left:50%;opacity:0;pointer-events:none;position:absolute;top:calc(50% - var(--carousel-button-fix-height)/2);transform:translate(-50%, -50%);transition:opacity .2s ease-in-out;z-index:2}.br-carousel:hover .carousel-play-button,.carousel-play-button:focus-within{opacity:1;pointer-events:auto}.br-carousel[data-stage=in] .carousel-play-button,.br-carousel[data-stage=hibh] .carousel-play-button{top:50%}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}