@govbr-ds/webcomponents 2.1.0 → 2.1.2

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

@@ -0,0 +1,917 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+import { handleNavigationClick } from "../../shared/utils/navigation";
+import { hasDefaultLightDomContent, 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/item?tab=designer).
+ *
+ * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).
+ *
+ * @slot start - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.
+ *
+ * @slot end - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.
+ *
+ * @category Conteúdo
+ * @status stable
+ * @part item - Elemento principal do item (botão, link ou div).
+ */
+export class Item {
+    constructor() {
+        /**
+         * Indica se o slot padrão possui conteúdo atribuído.
+         */
+        this.hasSlotDefault = false;
+        /**
+         * Indica se o slot `end` possui conteúdo atribuído.
+         */
+        this.hasSlotEnd = false;
+        /**
+         * Indica se o slot `start` possui conteúdo atribuído.
+         */
+        this.hasSlotStart = false;
+        /**
+         * Estado interno de seleção usado na renderização e emissão de eventos.
+         */
+        this.selectedValue = false;
+        this.rovingTabIndex = 0;
+        /**
+         * Desabilita a interação com o componente.
+         *
+         */
+        this.disabled = false;
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Indica se o item está no estado ativo.
+         * Se definido como verdadeiro, o item será exibido como ativo.
+         * @deprecated Use `active`.
+         */
+        this.isActive = false;
+        /**
+         * Indica se o item está no estado selecionado.
+         * Se definido como verdadeiro, o item será exibido como selecionado.
+         * @deprecated Use `selected`.
+         */
+        this.isSelected = false;
+        /**
+         * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.
+         * @deprecated Use `interactive`.
+         */
+        this.isInteractive = false;
+        /**
+         * Controla como o componente integra a navegação mantendo `href` real no elemento navegável.
+         * - `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C.
+         * - `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir.
+         * Cliques com modificadores, botão do meio ou `target` diferente de `_self` permanecem nativos.
+         */
+        this.navigationMode = 'native';
+        /**
+         * Quando definido como `true`, o item será tratado como um botão.
+         * @deprecated Use `button`.
+         */
+        this.isButton = false;
+        /**
+         * Define a densidade visual do componente.
+         *
+         * - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).
+         * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.
+         * - `large`: Baixa densidade (componente maior, mais espaçamento e altura).
+         *
+         */
+        this.density = 'medium';
+        this.hasRadios = false;
+        this.hasCheckboxes = false;
+        this.isManagedByList = false;
+        this.handleMouseDown = (event) => {
+            const shouldPreventDefault = Boolean(this.href?.length) || this.disabled;
+            if (shouldPreventDefault) {
+                event.preventDefault();
+            }
+        };
+        /**
+         * Trata Enter/Espaço quando o item NÃO está sendo gerenciado por um
+         * br-list ancestral (uso standalone — ex.: dentro do shadow/light DOM
+         * de br-dropdown, br-notification, ou qualquer wrapper customizado).
+         *
+         * Quando o item está dentro de um br-list, este handler não é registrado
+         * (ver componentWillLoad/isManagedByList), pois o br-list já trata
+         * Enter/Espaço/setas para todos os seus itens navegáveis via handleKeydown
+         * + activate(), evitando double-handling.
+         *
+         * Itens renderizados como <button> ou <a> já respondem nativamente a
+         * Enter (e <button> também a Espaço), então este handler só precisa
+         * agir sobre o caso <div role="button"> (isInteractive standalone).
+         */
+        this.handleKeydown = (event) => {
+            if (this.isManagedByList)
+                return;
+            if (this.disabled)
+                return;
+            if (this.getTagType() !== 'div')
+                return;
+            if (!this.isInteractive && !this.isButton)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault();
+                this.activate();
+            }
+        };
+        // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mantém em uma transação os modos standalone, controlado, radio e checkbox.
+        this.handleClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            const clickedElement = event.target;
+            handleNavigationClick({
+                event,
+                href: this.href,
+                target: this.target,
+                navigationMode: this.navigationMode,
+                brNavigate: this.brNavigate,
+            });
+            if (this.effectiveButton) {
+                this.brDidClick.emit();
+                this.brItemClick.emit();
+            }
+            else if (this.selectionEnabled &&
+                this.effectiveInteractive &&
+                !this.isClickInsideInteractiveElement(clickedElement)) {
+                if (this.hasRadios) {
+                    // Só existe um alvo inequívoco quando há exatamente um radio no item; com múltiplos
+                    // radios não há como saber qual o clique na superfície pretendia selecionar.
+                    const radios = Array.from(this.el.querySelectorAll('br-radio'));
+                    if (radios.length === 1 && !radios[0].checked) {
+                        radios[0].toggleChecked();
+                    }
+                }
+                else {
+                    // Armazena o estado anterior para emitir o evento apenas se houver mudança.
+                    const previousSelectedValue = this.hasControlledSelection ? Boolean(this.selected) : this.selectedValue;
+                    const nextSelected = !previousSelectedValue;
+                    if (!this.hasControlledSelection)
+                        this.selectedValue = nextSelected;
+                    if (previousSelectedValue !== nextSelected) {
+                        const detail = { selected: nextSelected };
+                        this.brDidSelect.emit(detail);
+                        this.brItemSelect.emit(detail);
+                    }
+                    if (!this.hasControlledSelection)
+                        this.updateCheckboxes();
+                }
+            }
+            event.stopPropagation();
+        };
+    }
+    componentWillLoad() {
+        this.hasSlotContentDefault();
+        this.hasSlotStart = this.hasSlotContent('start');
+        this.hasSlotEnd = this.hasSlotContent('end');
+        this.selectedValue = this.effectiveSelected;
+        if (this.effectiveButton) {
+            this.type = this.type || 'button';
+        }
+        const radios = Array.from(this.el.querySelectorAll('br-radio'));
+        const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        this.hasRadios = radios.length > 0;
+        this.hasCheckboxes = checkboxes.length > 0;
+        this.isManagedByList = Boolean(this.el.closest('br-list'));
+        if (this.effectiveSelected) {
+            if (checkboxes.length > 0) {
+                checkboxes.forEach((checkbox) => {
+                    checkbox.checked = true;
+                });
+            }
+            if (radios.length > 0) {
+                radios[0].checked = true;
+            }
+        }
+        if (this.selectionEnabled) {
+            this.updateRadioSelectionState(false);
+            this.updateCheckboxSelectionState(false);
+        }
+    }
+    // Sincroniza selectedValue quando a prop é alterada externamente (ex.: toggleAllOptions)
+    handleSelectedPropChange() {
+        this.selectedValue = this.effectiveSelected;
+    }
+    handleCheckedChange(event) {
+        if (!this.selectionEnabled)
+            return;
+        const target = event.target;
+        if (this.el.contains(target))
+            this.updateCheckboxSelectionState();
+        requestAnimationFrame(() => this.updateRadioSelectionState());
+    }
+    /**
+     * Ativa o item programaticamente, simulando um clique na superfície.
+     * Utilizado pelo br-list para tratar Enter e Espaço via teclado, e
+     * internamente pelo próprio item quando standalone (fora de br-list).
+     */
+    async activate() {
+        if (this.isButton) {
+            this.focusableElement?.click();
+            return;
+        }
+        this.handleClick(new MouseEvent('click', { bubbles: true }));
+    }
+    /**
+     * Define o foco no elemento interno do componente.
+     * Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
+     */
+    async setFocus() {
+        this.el?.focus();
+    }
+    /**
+     * Define o tabIndex do elemento interno.
+     * Utilizado pelo br-list para implementar o padrão roving tabindex,
+     * garantindo que apenas um item por vez seja alcançável via Tab.
+     */
+    async setTabIndex(value) {
+        this.rovingTabIndex = value;
+    }
+    get effectiveActive() {
+        return this.active ?? this.isActive;
+    }
+    get effectiveSelected() {
+        return this.selected ?? this.isSelected;
+    }
+    get hasControlledSelection() {
+        return this.selected !== undefined;
+    }
+    get effectiveInteractive() {
+        return (this.interactive ??
+            (this.isInteractive ||
+                (this.el ? this.el.hasAttribute('is-interactive') || this.el.hasAttribute('interactive') : false)));
+    }
+    get selectionEnabled() {
+        return !this.el.hasAttribute('data-no-selection');
+    }
+    get effectiveButton() {
+        return this.button ?? this.isButton;
+    }
+    hasSlotContentDefault() {
+        this.hasSlotDefault = hasDefaultLightDomContent(this.el);
+    }
+    hasSlotContent(slotName) {
+        return hasNamedLightDomSlot(this.el, slotName);
+    }
+    getCssClassMap() {
+        return {
+            'br-item': true,
+            disabled: this.disabled,
+            active: this.effectiveActive,
+            selected: this.selected ?? this.selectedValue,
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            'no-text-selection': this.effectiveButton || Boolean(this.href?.length) || this.disabled,
+        };
+    }
+    getTagType() {
+        if (this.effectiveButton) {
+            return 'button';
+        }
+        if (this.href?.length > 0) {
+            return 'a';
+        }
+        return 'div';
+    }
+    getAttributes() {
+        const TagType = this.getTagType();
+        const baseAttributes = TagType === 'button'
+            ? {
+                type: this.type,
+                value: this.value,
+                disabled: this.disabled ? true : null,
+            }
+            : { href: this.href, target: this.target };
+        const isInteractiveDiv = TagType === 'div' && this.isInteractive && !this.hasRadios && !this.hasCheckboxes;
+        const isFocusableItem = this.isInteractive || this.isButton || Boolean(this.href?.length);
+        return {
+            ...baseAttributes,
+            role: isInteractiveDiv ? 'button' : null,
+            'aria-pressed': isInteractiveDiv ? String(this.selected ?? this.selectedValue) : null,
+            tabIndex: this.disabled || !isFocusableItem ? -1 : this.rovingTabIndex,
+            'aria-disabled': this.disabled ? 'true' : null,
+            'aria-current': this.effectiveActive ? 'true' : null,
+            'data-toggle': this.effectiveInteractive ? 'selection' : null,
+            'is-selected': (this.selected ?? this.selectedValue) ? true : null,
+        };
+    }
+    updateCheckboxSelectionState(emitEvent = true) {
+        if (this.hasRadios)
+            return;
+        const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        const nextSelected = checkboxes.some((checkbox) => checkbox.checked);
+        if (!this.hasControlledSelection)
+            this.selectedValue = nextSelected;
+        if (emitEvent && this.effectiveInteractive) {
+            const detail = { selected: nextSelected };
+            this.brDidSelect.emit(detail);
+            this.brItemSelect.emit(detail);
+        }
+    }
+    updateRadioSelectionState(emitEvent = true) {
+        if (!this.hasRadios)
+            return;
+        const radios = Array.from(this.el.querySelectorAll('br-radio'));
+        const nextSelected = radios.some((radio) => radio.checked);
+        if (!this.hasControlledSelection)
+            this.selectedValue = nextSelected;
+        if (emitEvent && this.effectiveInteractive) {
+            const detail = { selected: nextSelected };
+            this.brDidSelect.emit(detail);
+            this.brItemSelect.emit(detail);
+        }
+    }
+    isClickInsideInteractiveElement(target) {
+        const interactiveSelectors = 'br-checkbox, br-radio, br-input, br-button, br-select, br-textarea';
+        const interactiveElements = this.el.querySelectorAll(interactiveSelectors);
+        return Array.from(interactiveElements).some((el) => el.contains(target) || target === el);
+    }
+    updateCheckboxes() {
+        const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        checkboxes.forEach((checkbox) => {
+            checkbox.checked = this.selectedValue;
+        });
+    }
+    render() {
+        const TagType = this.getTagType();
+        const attributes = this.getAttributes();
+        const classList = this.getCssClassMap();
+        return (h(Host, { key: '0c2e8ad9198db23ff1c43bc1a48cabe478f4d207', tabindex: this.isInteractive || this.effectiveInteractive ? (this.disabled ? -1 : 0) : undefined }, h(TagType, { key: 'd88d1732106bba4167118f16f2a27fdf3cf0f660', class: classList, ...attributes, tabindex: this.isInteractive || this.effectiveInteractive ? (this.disabled ? -1 : 0) : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown, id: this.customId, ref: (el) => (this.focusableElement = el), onMouseDown: this.handleMouseDown, part: "item" }, this.hasSlotStart || this.hasSlotEnd ? (h("div", { class: "row align-items-center" }, this.hasSlotStart && (h("div", { class: "col-auto" }, h("slot", { name: "start" }))), h("div", { class: "col" }, h("slot", null)), this.hasSlotEnd && (h("div", { class: "col-auto" }, h("slot", { name: "end" }))))) : (h("slot", null)))));
+    }
+    static get is() { return "br-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "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()"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `active`."
+                        }],
+                    "text": "Indica se o item est\u00E1 no estado ativo.\nSe definido como verdadeiro, o item ser\u00E1 exibido como ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-active",
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado ativo can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isActive`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
+            },
+            "isSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `selected`."
+                        }],
+                    "text": "Indica se o item est\u00E1 no estado selecionado.\nSe definido como verdadeiro, o item ser\u00E1 exibido como selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-selected",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado selecionado can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isSelected`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected"
+            },
+            "isInteractive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `interactive`."
+                        }],
+                    "text": "Marca o item como interativo, permitindo que toda a superf\u00EDcie do item seja clic\u00E1vel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-interactive",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Torna toda a superf\u00EDcie interativa. Quando informado, tem preced\u00EAncia sobre `isInteractive`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interactive"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL ou caminho para o qual o usu\u00E1rio ser\u00E1 direcionado ao clicar no item. Quando definido, o item ser\u00E1 renderizado como um link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrLinkTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {
+                        "BrLinkTarget": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrLinkTarget",
+                            "referenceLocation": "BrLinkTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o alvo do link quando `href` est\u00E1 presente. Pode ser:\n- `_blank` para abrir em uma nova aba,\n- `_self` para abrir na mesma aba,\n- `_parent` para abrir na aba pai,\n- `_top` para abrir na aba superior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "target"
+            },
+            "navigationMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrNavigationMode",
+                    "resolved": "\"event\" | \"native\"",
+                    "references": {
+                        "BrNavigationMode": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrNavigationMode",
+                            "referenceLocation": "BrNavigationMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla como o componente integra a navega\u00E7\u00E3o mantendo `href` real no elemento naveg\u00E1vel.\n- `native` (padr\u00E3o): preserva o comportamento do navegador, conforme HTML/W3C.\n- `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navega\u00E7\u00E3o nativa para a SPA assumir.\nCliques com modificadores, bot\u00E3o do meio ou `target` diferente de `_self` permanecem nativos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "navigation-mode",
+                "defaultValue": "'native'"
+            },
+            "isButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `button`."
+                        }],
+                    "text": "Quando definido como `true`, o item ser\u00E1 tratado como um bot\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-button",
+                "defaultValue": "false"
+            },
+            "button": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Renderiza o item como bot\u00E3o. Quando informado, tem preced\u00EAncia sobre `isButton`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "button"
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "BrButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "BrButtonType": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrButtonType",
+                            "referenceLocation": "BrButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo do bot\u00E3o, aplic\u00E1vel apenas se `isButton` for `true`. Pode ser:\n- `'submit'` para enviar um formul\u00E1rio,\n- `'reset'` para redefinir um formul\u00E1rio,\n- `'button'` para um bot\u00E3o padr\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define um valor associado ao br-item quando renderizado como um bot\u00E3o, utilizado em contextos de formul\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "BrDensity": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrDensity",
+                            "referenceLocation": "BrDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espa\u00E7amento).\n- `medium`: Densidade intermedi\u00E1ria, padr\u00E3o recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espa\u00E7amento e altura)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlotDefault": {},
+            "hasSlotEnd": {},
+            "hasSlotStart": {},
+            "selectedValue": {},
+            "rovingTabIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidClick",
+                "name": "brDidClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `brItemClick`."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "brItemClick",
+                "name": "brItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando o item com comportamento de bot\u00E3o \u00E9 acionado."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidSelect",
+                "name": "brDidSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `brItemSelect`."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ItemSelectDetail",
+                    "resolved": "ItemSelectDetail",
+                    "references": {
+                        "ItemSelectDetail": {
+                            "location": "import",
+                            "path": "./item.types",
+                            "id": "src/components/item/item.types.ts::ItemSelectDetail",
+                            "referenceLocation": "ItemSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brItemSelect",
+                "name": "brItemSelect",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando a sele\u00E7\u00E3o muda."
+                },
+                "complexType": {
+                    "original": "ItemSelectDetail",
+                    "resolved": "ItemSelectDetail",
+                    "references": {
+                        "ItemSelectDetail": {
+                            "location": "import",
+                            "path": "./item.types",
+                            "id": "src/components/item/item.types.ts::ItemSelectDetail",
+                            "referenceLocation": "ItemSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brNavigate",
+                "name": "brNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento cancel\u00E1vel emitido em `navigation-mode=\"event\"` para cliques prim\u00E1rios sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navega\u00E7\u00E3o nativa e entregar `event.detail.href` ao roteador da SPA."
+                },
+                "complexType": {
+                    "original": "BrNavigateDetail",
+                    "resolved": "BrNavigateDetail",
+                    "references": {
+                        "BrNavigateDetail": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrNavigateDetail",
+                            "referenceLocation": "BrNavigateDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "activate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Ativa o item programaticamente, simulando um clique na superf\u00EDcie.\nUtilizado pelo br-list para tratar Enter e Espa\u00E7o via teclado, e\ninternamente pelo pr\u00F3prio item quando standalone (fora de br-list).",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o foco no elemento interno do componente.\nEste m\u00E9todo pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.",
+                    "tags": []
+                }
+            },
+            "setTabIndex": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o tabIndex do elemento interno.\nUtilizado pelo br-list para implementar o padr\u00E3o roving tabindex,\ngarantindo que apenas um item por vez seja alcan\u00E7\u00E1vel via Tab.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isSelected",
+                "methodName": "handleSelectedPropChange"
+            }, {
+                "propName": "selected",
+                "methodName": "handleSelectedPropChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "checkedChange",
+                "method": "handleCheckedChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}