@govbr-ds/webcomponents 2.1.2 → 2.2.0

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -3,13 +3,41 @@
  * © https://serpro.gov.br/ - MIT License.
  */
 import { Host, h } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+import { createMicrotaskReconciler, getOwnedAssignedElements } from "../../shared/utils/ownership";
+import { resolveAllowedPropValue } from "../../shared/utils/props";
+const CHECKBOX_GROUP_ORIENTATIONS = ['horizontal', 'vertical'];
 /**
- * ## Design System
+ * O componente `br-checkbox-group` é o contêiner semântico e orquestrador de múltiplos controles `br-checkbox` que pertencem a um mesmo contexto ou pergunta em formulários do GovBR-DS.
  *
- * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/checkgroup?tab=designer).
+ * ### Para que serve
  *
- * @category Formulários
+ * - **Agrupamento semântico e acessibilidade:** Cria a estrutura recomendada de `fieldset` e `legend` para leitores de tela, garantindo que o contexto da pergunta seja anunciado antes de cada opção individual.
+ * - **Validação conjunta:** Permite coordenar regras de validação em grupo (como exigir uma quantidade mínima ou máxima de checkboxes selecionados).
+ * - **Alinhamento e padronização visual:** Organiza os checkboxes vertical ou horizontalmente conforme o leiaute da interface.
+ *
+ * ### Quando utilizar
+ *
+ * - **Utilize quando:**
+ *   - Existirem duas ou mais opções em checkbox que respondem à mesma pergunta ou pertencem ao mesmo conjunto lógico de preferências.
+ *   - For necessário aplicar rótulo geral e mensagens de validação ao grupo completo de escolhas.
+ * - **Evite e prefira outro componente quando:**
+ *   - Houver apenas um único checkbox independente (ex.: aceite de termos): use `br-checkbox` isoladamente.
+ *   - A seleção for de escolha única (mutuamente exclusiva): use `br-radio-group`.
+ *
+ * ### Estrutura e Slots
+ *
+ * O `br-checkbox-group` atua como container orquestrador:
+ * - `default`: Slot onde devem ser inseridos os elementos `br-checkbox` que compõem o grupo.
+ * - `feedback`: Slot opcional para mensagem de erro ou orientação de validação associada ao grupo todo.
+ *
+ * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/checkgroup?tab=designer).
+ *
+
+ * @category Formulários, Seleção
  * @status stable
+ * @see br-checkbox
+ * @see br-checkgroup
  * @slot default - Slot para adicionar os checkboxes controlados pelo grupo.
  */
 export class CheckboxGroup {
@@ -18,29 +46,46 @@ export class CheckboxGroup {
         this.checked = false;
         /** Estado indeterminado do controlador do grupo. */
         this.isIndeterminate = false;
+        /** Desabilita o controlador e os checkboxes contidos no grupo. */
+        this.disabled = false;
         /** Rótulo para desmarcar todos os checkboxes. */
         this.unselectAllLabel = 'Desselecionar tudo';
         /** Rótulo para marcar todos os checkboxes. */
         this.selectAllLabel = 'Selecionar tudo';
         /** Define o estado indeterminado inicial do grupo. */
         this.indeterminate = false;
-        /** Orientação visual das opções. */
+        /** Orientação visual das opções. Valores inválidos usam `vertical`. */
         this.orientation = 'vertical';
         /** Identificador único do controlador. */
-        this.customId = `br-checkbox-group-${checkboxGroupId++}`;
+        this.customId = generateUniqueId('br-checkbox-group');
         this.syncingChildren = false;
+        this.managedChildren = new Set();
+        this.reconciler = createMicrotaskReconciler(() => this.updateGroupState());
         this.handleSlotChange = () => {
             this.setNumberOfChildren();
-            this.updateGroupState();
+            this.syncManagedChildren();
+            this.reconciler.schedule();
+        };
+        this.handleStructureChange = () => {
+            this.setNumberOfChildren();
+            this.syncManagedChildren();
+            this.reconciler.schedule();
         };
         this.handleParentChange = (event) => {
-            if (event.detail === this.checked)
+            if (this.disabled)
                 return;
-            this.checked = event.detail;
+            const children = this.getChildCheckboxes();
+            const enabledChildren = children.filter((checkbox) => !this.isCheckboxDisabledOrReadonly(checkbox));
+            const targetChecked = enabledChildren.length > 0
+                ? !enabledChildren.every((checkbox) => this.isCheckboxChecked(checkbox))
+                : event.detail;
+            this.checked = targetChecked;
             this.isIndeterminate = false;
             this.syncingChildren = true;
-            this.getChildCheckboxes().forEach((checkbox) => {
-                checkbox.checked = this.checked;
+            children.forEach((checkbox) => {
+                if (this.isCheckboxDisabledOrReadonly(checkbox))
+                    return;
+                checkbox.checked = targetChecked;
                 checkbox.indeterminate = false;
             });
             this.syncingChildren = false;
@@ -53,28 +98,80 @@ export class CheckboxGroup {
     }
     componentDidLoad() {
         this.setNumberOfChildren();
+        this.syncManagedChildren();
+        this.updateGroupState();
         this.getSlotElement()?.addEventListener('slotchange', this.handleSlotChange);
+        this.structureObserver = new MutationObserver(this.handleStructureChange);
+        this.structureObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: ['class'],
+            childList: true,
+            subtree: true,
+        });
+        setTimeout(() => this.syncManagedChildren());
     }
     disconnectedCallback() {
+        this.reconciler.cancel();
+        this.structureObserver?.disconnect();
+        this.structureObserver = undefined;
         this.getSlotElement()?.removeEventListener('slotchange', this.handleSlotChange);
+        this.releaseManagedChildren();
+    }
+    handleDisabledChange() {
+        this.syncManagedChildren();
     }
-    handleChildChange(event) {
+    async handleChildChange(event) {
+        if (event) {
+            const target = this.getEventCheckboxTarget(event);
+            if (target && this.isParentCheckbox(target)) {
+                this.handleParentChange(event);
+                return;
+            }
+            if (target && !this.getChildCheckboxes().includes(target))
+                return;
+        }
+        if (this.syncingChildren)
+            return;
+        this.reconciler.schedule();
+    }
+    handleInternalChildStateChange(event) {
         const target = this.getEventCheckboxTarget(event);
-        if (!target || this.isParentCheckbox(target) || this.syncingChildren)
+        if (!target || this.isParentCheckbox(target) || !this.getChildCheckboxes().includes(target))
             return;
-        this.updateGroupState();
+        if (this.syncingChildren)
+            return;
+        this.reconciler.schedule();
+    }
+    dispatchGroupState(checkbox, managed) {
+        checkbox.dispatchEvent(new CustomEvent('brCheckboxGroupState', {
+            bubbles: true,
+            composed: true,
+            detail: { managed, disabled: managed && this.disabled },
+        }));
+    }
+    syncManagedChildren() {
+        const children = new Set(this.getChildCheckboxes());
+        for (const checkbox of this.managedChildren) {
+            if (!children.has(checkbox)) {
+                this.dispatchGroupState(checkbox, false);
+                this.managedChildren.delete(checkbox);
+            }
+        }
+        for (const checkbox of children) {
+            this.dispatchGroupState(checkbox, true);
+            this.managedChildren.add(checkbox);
+        }
+    }
+    releaseManagedChildren() {
+        for (const checkbox of this.managedChildren)
+            this.dispatchGroupState(checkbox, false);
+        this.managedChildren.clear();
     }
     getSlotElement() {
         return this.el.shadowRoot?.querySelector('slot') ?? null;
     }
     getChildCheckboxes() {
-        const assigned = this.getSlotElement()?.assignedElements({ flatten: true }) ?? [];
-        const children = assigned.flatMap((element) => {
-            if (element.tagName.toLowerCase() === 'br-checkbox')
-                return [element];
-            return Array.from(element.querySelectorAll('br-checkbox'));
-        });
-        return [...new Set(children)].filter((element) => element.getAttribute('data-controller') !== 'true');
+        return getOwnedAssignedElements(this.getSlotElement(), this.el, 'br-checkbox').filter((element) => element.getAttribute('data-controller') !== 'true');
     }
     getEventCheckboxTarget(event) {
         return event.composedPath().find((node) => node.tagName?.toLowerCase() === 'br-checkbox');
@@ -82,36 +179,88 @@ export class CheckboxGroup {
     isParentCheckbox(target) {
         return target.getRootNode() === this.el.shadowRoot;
     }
+    isCheckboxDisabledOrReadonly(checkbox) {
+        return (checkbox.disabled ||
+            checkbox.hasAttribute('disabled') ||
+            Boolean(checkbox.readonly) ||
+            Boolean(checkbox.readOnly) ||
+            checkbox.hasAttribute('readonly') ||
+            checkbox.hasAttribute('read-only') ||
+            Boolean(checkbox.closest('fieldset[disabled]')));
+    }
+    isCheckboxChecked(checkbox) {
+        return Boolean(checkbox.checked);
+    }
+    isCheckboxIndeterminate(checkbox) {
+        return Boolean(checkbox.indeterminate);
+    }
     updateGroupState() {
         const children = this.getChildCheckboxes();
         if (children.length === 0) {
             this.setParentState(false, false);
             return;
         }
-        const allChecked = children.every((checkbox) => checkbox.checked);
-        const noneChecked = children.every((checkbox) => !checkbox.checked);
+        const anyIndeterminate = children.some((checkbox) => this.isCheckboxIndeterminate(checkbox));
+        const allChecked = !anyIndeterminate && children.every((checkbox) => this.isCheckboxChecked(checkbox));
+        const noneChecked = !anyIndeterminate && children.every((checkbox) => !this.isCheckboxChecked(checkbox));
         this.setParentState(allChecked, !allChecked && !noneChecked);
     }
+    componentDidUpdate() {
+        this.syncManagedChildren();
+        this.syncControllerState();
+    }
+    syncControllerState() {
+        const controller = this.controller ?? this.el.shadowRoot?.querySelector('br-checkbox');
+        if (controller) {
+            this.controller = controller;
+            controller.checked = this.checked;
+            controller.indeterminate = this.isIndeterminate;
+            const label = this.checked ? this.unselectAllLabel : this.selectAllLabel;
+            controller.label = label;
+            controller.setAttribute('label', label);
+            controller.setAttribute('aria-label', label);
+            if (!this.checked) {
+                controller.removeAttribute('checked');
+            }
+            else {
+                controller.setAttribute('checked', '');
+            }
+            if (!this.isIndeterminate) {
+                controller.removeAttribute('indeterminate');
+            }
+            else {
+                controller.setAttribute('indeterminate', '');
+            }
+            controller.dispatchEvent(new CustomEvent('brInternalCheckboxSyncRequest'));
+        }
+    }
     setParentState(checked, indeterminate) {
         this.checked = checked;
         this.isIndeterminate = indeterminate;
+        this.syncControllerState();
     }
     setNumberOfChildren() {
-        const controller = this.el.shadowRoot?.querySelector('br-checkbox');
+        const controller = this.controller ?? this.el.shadowRoot?.querySelector('br-checkbox');
         const children = this.getChildCheckboxes();
-        if (controller && children.length > 0)
+        if (controller)
             controller.setNumberOfChildren(children.length);
     }
     getCssClassMap() {
+        const orientation = this.effectiveOrientation;
         return {
             'br-checkbox-group': true,
-            horizontal: this.orientation === 'horizontal',
-            vertical: this.orientation === 'vertical',
+            horizontal: orientation === 'horizontal',
+            vertical: orientation === 'vertical',
         };
     }
+    get effectiveOrientation() {
+        return resolveAllowedPropValue(this.el, 'orientation', this.orientation, CHECKBOX_GROUP_ORIENTATIONS, 'vertical');
+    }
     render() {
         const selectAllLabel = this.checked ? this.unselectAllLabel : this.selectAllLabel;
-        return (h(Host, { key: 'b8b3040aedb098d6c95c3a420921438d506b7001' }, h("fieldset", { key: 'e814623e7bf019c6f0469046a111915e85cdb507', class: this.getCssClassMap(), style: { width: '100%' } }, this.label && h("legend", { key: '72cb77581c474c7266d7297852e65c32f154cb55' }, this.label), h("div", { key: '257fbdfa256e2f4ec1b7098fc59d13ec74979c89', class: "mb-1" }, h("div", { key: '9cf2a7ed3139f3332eff1bc7e4b3db742cfd5e57', class: "checkbox-group-example" }, h("br-checkbox", { key: '5dec47045bb28278b36bf7c5f5fc3ba32154961b', id: `checkbox-group-${this.customId}`, "data-controller": "true", name: `checkbox-group-${this.customId}`, checked: this.checked, indeterminate: this.isIndeterminate, label: selectAllLabel, "aria-label": selectAllLabel, onCheckedChange: this.handleParentChange, "is-father": true }))), h("div", { key: 'ea0585436d16aeeb4644251f4b66268f13960ee4', class: "checkbox-group-options" }, h("slot", { key: '31f349a3cf931add400f0d4db4daac31e71f13e0' })))));
+        return (h(Host, { key: '5fcab47283a3e2df57ffbdc5bcca09c537d32951', style: { opacity: this.disabled ? '1' : undefined } }, h("fieldset", { key: '0f6d5a4f378d36eea6d65c13740a92216f4b64fa', class: this.getCssClassMap(), style: { width: '100%' }, disabled: this.disabled }, this.label && h("legend", { key: 'f3424c55354d30341f5c55ba1eb647b15457c355' }, this.label), h("div", { key: 'adefe827bf0e7a0bac8bd88739905ea55a2ed365', class: "mb-1" }, h("div", { key: 'abcf8538b1eb5b1155c4d0be4fec437384868437', class: "checkbox-group-example" }, h("br-checkbox", { key: '0e08247a7ad72a2a56a486601cceec8e92b33bd2', ref: (element) => {
+                this.controller = element;
+            }, id: `checkbox-group-${this.customId}`, "data-controller": "true", name: `checkbox-group-${this.customId}`, checked: this.checked, indeterminate: this.isIndeterminate, label: selectAllLabel, "aria-label": selectAllLabel, disabled: this.disabled, isFather: true, "is-father": true }))), h("div", { key: 'dbb446b00abdbda65925dc95034c3aeb237084c4', class: "checkbox-group-options" }, h("slot", { key: 'e2b0c5155435b7af5d9460fa5d21f38d2f80cc0b' })))));
     }
     static get is() { return "br-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -127,6 +276,26 @@ export class CheckboxGroup {
     }
     static get properties() {
         return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o controlador e os checkboxes contidos no grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -218,7 +387,7 @@ export class CheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Orienta\u00E7\u00E3o visual das op\u00E7\u00F5es."
+                    "text": "Orienta\u00E7\u00E3o visual das op\u00E7\u00F5es. Valores inv\u00E1lidos usam `vertical`."
                 },
                 "getter": false,
                 "setter": false,
@@ -244,7 +413,7 @@ export class CheckboxGroup {
                 "setter": false,
                 "reflect": true,
                 "attribute": "custom-id",
-                "defaultValue": "`br-checkbox-group-${checkboxGroupId++}`"
+                "defaultValue": "generateUniqueId('br-checkbox-group')"
             }
         };
     }
@@ -255,6 +424,12 @@ export class CheckboxGroup {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "checkedChange",
@@ -262,7 +437,12 @@ export class CheckboxGroup {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "brInternalCheckboxStateChange",
+                "method": "handleInternalChildStateChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }
-let checkboxGroupId = 0;

package/dist/collection/components/checkgroup/checkgroup.js

@@ -4,8 +4,23 @@
  */
 import { Host, h } from "@stencil/core";
 /**
- * @category Formulários
+ * O componente `br-checkgroup` é o alias legado mantido para compatibilidade com versões anteriores da biblioteca.
+ *
+ * ### Papel na biblioteca
+ *
+ * - Atua como um redirecionador direto para a implementação do `br-checkbox-group`.
+ * - Permite que aplicações já existentes mantenham o funcionamento sem interrupções enquanto realizam a transição gradativa.
+ *
+ * ### Regra de uso e migração
+ *
+ * Em novos projetos e manutenções ativas, **utilize sempre a tag canônica `br-checkbox-group`**. O uso de `br-checkgroup` está depreciado e deve ser substituído pela tag oficial.
+ *
+ * Para a documentação canônica completa, consulte a página do [br-checkbox-group](/docs/components/checkbox-group).
+ *
+
+ * @category Formulários, Seleção
  * @status deprecated
+ * @see br-checkbox-group
  * @slot default - Slot para adicionar os checkboxes controlados pelo grupo.
  * @deprecated Use `br-checkbox-group`.
  */
@@ -13,9 +28,11 @@ export class Checkgroup {
     constructor() {
         /** Estado indeterminado inicial. */
         this.indeterminate = false;
+        /** Desabilita o controlador e os checkboxes contidos no grupo. */
+        this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'e081600bf886a60f26388f00db1b54339a682bcf' }, h("br-checkbox-group", { key: 'cd1619fe3fdd218a38539d30eef1567a6ffc75c3', label: this.label, selectAllLabel: this.selectAllLabel ?? this.labelDesselecionado, unselectAllLabel: this.unselectAllLabel ?? this.labelSelecionado, indeterminate: this.indeterminate, customId: this.customId }, h("slot", { key: '9aeb921113766668a7a67d414feceb5fda4d3c46' }))));
+        return (h(Host, { key: '19298fbd247fa7ae6360dad0c6b41641fd9d2f5d' }, h("br-checkbox-group", { key: '943b4a1d72ca1034d71fa79d748d4717f9cd7425', label: this.label, selectAllLabel: this.selectAllLabel ?? this.labelDesselecionado, unselectAllLabel: this.unselectAllLabel ?? this.labelSelecionado, indeterminate: this.indeterminate, customId: this.customId, disabled: this.disabled }, h("slot", { key: '8ff436a7e53c1c8d266d0e047013a89307805eec' }))));
     }
     static get is() { return "br-checkgroup"; }
     static get encapsulation() { return "shadow"; }
@@ -55,7 +72,7 @@ export class Checkgroup {
                             "name": "deprecated",
                             "text": "Use `unselectAllLabel`."
                         }],
-                    "text": ""
+                    "text": "R\u00F3tulo legado para desmarcar todos."
                 },
                 "getter": false,
                 "setter": false,
@@ -96,7 +113,7 @@ export class Checkgroup {
                             "name": "deprecated",
                             "text": "Use `selectAllLabel`."
                         }],
-                    "text": ""
+                    "text": "R\u00F3tulo legado para marcar todos."
                 },
                 "getter": false,
                 "setter": false,
@@ -160,7 +177,28 @@ export class Checkgroup {
                 "setter": false,
                 "reflect": true,
                 "attribute": "custom-id"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o controlador e os checkboxes contidos no grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/collapse/collapse.css

@@ -1 +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)}:host{display:block;width:100%}:host([color-mode=dark]){--collapse-color: var(--pure-0, #fff);--collapse-hover: rgb(var(--color-rgb), var(--hover));--collapse-border-color: var(--color-secondary-07, #555)}:host([divider]) .br-collapse{border-bottom:1px solid var(--border-color, var(--color-secondary-04, #e5e5e5))}:host .br-collapse{color:var(--collapse-color, var(--color, inherit));border-bottom:1px solid var(--collapse-border-color, var(--border-color, var(--color-secondary-04, #e5e5e5)))}:host .br-collapse .trigger{display:flex;justify-content:center;align-items:center}:host .br-collapse .trigger:not(:disabled):hover,:host .br-collapse .trigger:not(:disabled):focus-visible{background-image:linear-gradient(var(--collapse-hover, rgb(var(--color-rgb), var(--hover))), var(--collapse-hover, rgb(var(--color-rgb), var(--hover))))}:host .br-collapse .trigger-content{flex:1 1 auto !important}:host .br-collapse .content{transition:height .3s;overflow:hidden}:host .br-collapse br-icon{color:var(--interactive);pointer-events:none}:host details{width:100%}:host details summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;height:48px;outline:none}:host details summary::-webkit-details-marker{display:none}:host details summary:focus-visible{outline:var(--focus-width) var(--focus-style) var(--focus)}:host details.trigger-button summary{width:max-content;min-width:40px;border-radius:var(--surface-border-radius-sm, 4px)}:host details.trigger-text summary{width:max-content;padding-inline:0}:host details.direction-up .content{display:flex;flex-direction:column-reverse}:host details.direction-right,:host details.direction-left{display:flex;align-items:flex-start}:host details.direction-right summary,:host details.direction-left summary{flex:0 0 auto}:host details.direction-right .content,:host details.direction-left .content{flex:1 1 auto;min-width:0}:host details.direction-left{flex-direction:row-reverse}:host .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
+*,*::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}pre{font-family:monospace;font-size:1em}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,optgroup,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))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@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))}.col-lg-3{flex-basis:25%;max-width:25%}}@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-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.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}fieldset[disabled]{opacity:1}.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)}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)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[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)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{display:block;width:100%}:host([color-mode=dark]){--collapse-color: var(--pure-0, #fff);--collapse-hover: rgb(var(--color-rgb), var(--hover));--collapse-border-color: var(--color-secondary-07, #555)}:host([divider]) .br-collapse{border-bottom:1px solid var(--collapse-border-color, var(--border-color, var(--color-secondary-04, #e5e5e5)))}:host .br-collapse{color:var(--collapse-color, var(--color, inherit))}:host .br-collapse .trigger{display:flex;justify-content:center;align-items:center}:host .br-collapse .trigger:not(:disabled):hover,:host .br-collapse .trigger:not(:disabled):focus-visible{background-image:linear-gradient(var(--collapse-hover, rgb(var(--color-rgb), var(--hover))), var(--collapse-hover, rgb(var(--color-rgb), var(--hover))))}:host .br-collapse .trigger-content{flex:1 1 auto !important}:host .br-collapse .content{overflow:hidden;opacity:1}:host .br-collapse br-icon{color:var(--interactive);pointer-events:none}:host details{width:100%}:host details summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;height:48px;outline:none}:host details summary::-webkit-details-marker{display:none}:host details summary:focus-visible{outline:var(--focus-width) var(--focus-style) var(--focus)}:host details[open] .content{animation:none}@media(prefers-reduced-motion: no-preference){:host details[open] .content{animation:collapse-content-open var(--duration-fast, 300ms) var(--animation-ease-out, ease-out) both}}:host details.trigger-button summary{width:max-content;min-width:40px;border-radius:var(--surface-border-radius-sm, 4px)}:host details.trigger-text summary{width:max-content;padding-inline:0}:host details.direction-up .content{display:flex;flex-direction:column-reverse}:host details.direction-right,:host details.direction-left{display:flex;align-items:flex-start}:host details.direction-right summary,:host details.direction-left summary{flex:0 0 auto}:host details.direction-right .content,:host details.direction-left .content{flex:1 1 auto;min-width:0}:host details.direction-left{flex-direction:row-reverse}:host .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}@keyframes collapse-content-open{from{opacity:0}to{opacity:1}}

package/dist/collection/components/collapse/collapse.js

@@ -5,11 +5,37 @@
 import { Host, h } from "@stencil/core";
 import { redispatchNativeEvent } from "../../shared/utils/event";
 import { generateUniqueId } from "../../shared/utils/id";
+import { resolveAllowedPropValue } from "../../shared/utils/props";
 /**
- * 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/collapse?tab=designer).
+ * O componente `br-collapse` é o controle retrátil do GovBR-DS baseado no elemento semântico HTML5 `<details>`, desenvolvido para permitir que a pessoa usuária expanda ou recolha seções de conteúdo sob demanda.
  *
- * @category Conteúdo
+ * ### Para que serve
+ *
+ * - **Otimização de espaço e hierarquia:** Reduz a sobrecarga de informação inicial na tela, ocultando blocos secundários até que o usuário decida visualizá-los.
+ * - **Estruturação de perguntas e respostas:** Padrão oficial para construção de seções de FAQ (perguntas frequentes) e listas explicativas sanfonadas (accordion).
+ * - **Acessibilidade nativa:** Por utilizar internamente os elementos `<details>` e `<summary>`, possui controle total de teclado, estado acessível (`open`) e anúncios para tecnologias assistivas sem exigir scripts adicionais complexos.
+ *
+ * ### Quando utilizar
+ *
+ * - **Utilize quando:**
+ *   - O conteúdo for extenso, dividido em tópicos independentes e a maioria dos usuários só precisa consultar itens específicos.
+ *   - Houver seções complementares opcionais em um formulário longo.
+ * - **Evite e prefira outro componente quando:**
+ *   - A informação contida for crítica para a tomada de decisão imediata ou segurança da pessoa usuária (ela deve ficar permanentemente visível).
+ *   - A intenção for alternar entre diferentes visões de uma mesma tela completa (prefira `br-tab`).
+ *
+ * ### Estrutura e Slots
+ *
+ * O `br-collapse` organiza o acionamento e a área expansível:
+ * - `trigger`: Slot para personalizar o botão/gatilho de expansão (texto, ícones ou componentes de apoio dentro do summary).
+ * - `default`: Slot para inserção do conteúdo que é revelado quando o componente é expandido.
+ *
+ * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/collapse?tab=designer).
+ *
+
+ * @category Conteúdo, Ações
  * @status stable
+ * @see br-list
  * @slot default - Slot para o conteúdo expansível exibido ao abrir o collapse.
  * @slot trigger - Slot para personalizar o acionador (texto, ícones, imagens, etc.).
  *
@@ -43,11 +69,11 @@ export class Collapse {
          */
         this.accordionGroup = null;
         /**
-         * Classe CSS do ícone exibido quando o conteúdo está oculto.
+         * Identificador do ícone exibido quando o conteúdo está oculto. O valor padrão usa o registro SVG local.
          */
         this.iconToShow = 'fa6-solid:chevron-down';
         /**
-         * Classe CSS do ícone exibido quando o conteúdo está visível.
+         * Identificador do ícone exibido quando o conteúdo está visível. O valor padrão usa o registro SVG local.
          */
         this.iconToHide = 'fa6-solid:chevron-up';
         /**
@@ -92,6 +118,18 @@ export class Collapse {
             redispatchNativeEvent(this.el, event, 'toggle');
         };
     }
+    get effectiveColorMode() {
+        return resolveAllowedPropValue(this.el, 'colorMode', this.colorMode, ['light', 'dark'], 'light');
+    }
+    get effectiveExpansionDirection() {
+        return resolveAllowedPropValue(this.el, 'expansionDirection', this.expansionDirection, ['down', 'up', 'right', 'left'], 'down');
+    }
+    get effectiveIconPosition() {
+        return resolveAllowedPropValue(this.el, 'iconPosition', this.iconPosition, ['left', 'right'], 'right');
+    }
+    get effectiveTriggerVariant() {
+        return resolveAllowedPropValue(this.el, 'triggerVariant', this.triggerVariant, ['surface', 'button', 'text'], 'surface');
+    }
     /**
      * Remove o listener do <details> ao desmontar o componente.
      */
@@ -178,7 +216,9 @@ export class Collapse {
         const parent = this.el.parentElement;
         if (!parent)
             return;
-        const others = Array.from(parent.querySelectorAll('br-collapse'));
+        // Accordion é definido entre irmãos imediatos; uma busca descendente
+        // fecharia collapses pertencentes a componentes compostos aninhados.
+        const others = Array.from(parent.children).filter((element) => element.tagName.toLowerCase() === 'br-collapse');
         others
             .filter((collapse) => collapse !== this.el && collapse.accordionGroup === this.accordionGroup && collapse.open)
             .forEach((c) => {
@@ -197,7 +237,7 @@ export class Collapse {
      * Renderiza o <details> com acionador e conteúdo expansível.
      */
     render() {
-        return (h(Host, { key: '0dbbabeaff8a9f0b4b3149da51e730c9c18b4961' }, h("details", { key: 'dfb43de3589f35d5ebb7a901e93658faf6825e30', class: `br-collapse direction-${this.expansionDirection} trigger-${this.triggerVariant}`, open: this.open, onToggle: this.handleCollapse, id: this.customId, part: "details" }, h("summary", { key: 'd7c1cc7bca44d6cc30bc15f507326b1d00f462df', class: "trigger", part: "trigger", "aria-controls": `content-${this.customId}` }, this.iconPosition === 'left' && this.renderIcon(), h("div", { key: '8d064ef748c9b4afe81637b442df0ddb29e1d402', class: "trigger-content", id: `label-${this.customId}` }, h("slot", { key: '014d443d1b3e010f1b36a85d97430e9322fdaefb', name: "trigger" })), this.iconPosition === 'right' && this.renderIcon()), h("div", { key: '64502ae705a2a4e88ea28bb80e240e938d2cba1c', class: "content", id: `content-${this.customId}`, part: "content", "aria-hidden": String(!this.open) }, this.open && this.itemCount > 0 && (h("div", { key: 'f4a8f0c7aa15c0b9e9cf32de25557f5170842d7f', class: "visually-hidden" }, this.itemCount, " ", this.itemCount === 1 ? 'item' : 'itens', " na lista")), h("slot", { key: 'b15a6c609416ce20ad54d9ffa8f81339a7f7d7a2', onSlotchange: (event) => this.updateItemCount(event.currentTarget) })))));
+        return (h(Host, { key: 'dd6481a2fc99541d1fa1b82ed07c24658a27309f', "color-mode": this.effectiveColorMode }, h("details", { key: 'f33896f5f6698b55f0e39d14a765cdc36c1f12a1', class: `br-collapse direction-${this.effectiveExpansionDirection} trigger-${this.effectiveTriggerVariant}`, open: this.open, onToggle: this.handleCollapse, id: this.customId, part: "details" }, h("summary", { key: '32657bf8b319f0a65d554e9ebaf50c7b927abe86', class: "trigger", part: "trigger", "aria-controls": `content-${this.customId}` }, this.effectiveIconPosition === 'left' && this.renderIcon(), h("div", { key: '6e42e9172d1efa3061906e04994b6ca2e113ea3b', class: "trigger-content", id: `label-${this.customId}` }, h("slot", { key: '4dbdd0ae814c93aa14424c760fb59629e69748cb', name: "trigger" })), this.effectiveIconPosition === 'right' && this.renderIcon()), h("div", { key: 'a4fd788c89a2446ebad6a562ceefed028859ae41', class: "content", id: `content-${this.customId}`, part: "content", "aria-hidden": String(!this.open) }, this.open && this.itemCount > 0 && (h("div", { key: 'd00bd030516cb622e65bbeb86303a64370137074', class: "visually-hidden" }, this.itemCount, " ", this.itemCount === 1 ? 'item' : 'itens', " na lista")), h("slot", { key: '63b5d31064f7f0c9f54f06be1b1142c92d008566', onSlotchange: (event) => this.updateItemCount(event.currentTarget) })))));
     }
     static get is() { return "br-collapse"; }
     static get encapsulation() { return "shadow"; }
@@ -305,7 +345,7 @@ export class Collapse {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Classe CSS do \u00EDcone exibido quando o conte\u00FAdo est\u00E1 oculto."
+                    "text": "Identificador do \u00EDcone exibido quando o conte\u00FAdo est\u00E1 oculto. O valor padr\u00E3o usa o registro SVG local."
                 },
                 "getter": false,
                 "setter": false,
@@ -325,7 +365,7 @@ export class Collapse {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Classe CSS do \u00EDcone exibido quando o conte\u00FAdo est\u00E1 vis\u00EDvel."
+                    "text": "Identificador do \u00EDcone exibido quando o conte\u00FAdo est\u00E1 vis\u00EDvel. O valor padr\u00E3o usa o registro SVG local."
                 },
                 "getter": false,
                 "setter": false,