@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/list/list.js

@@ -0,0 +1,728 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+import { hasNamedLightDomSlot } from "../../shared/utils/slot";
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/list?tab=designer).
+ *
+ * @category Conteúdo
+ * @status stable
+ * @slot default - Slot para os itens da lista.
+ * @slot header - Slot para ações ou conteúdo do cabeçalho da lista.
+ *
+ * @part container - Wrapper principal da lista.
+ */
+export class List {
+    constructor() {
+        /**
+         * Define o texto do cabeçalho da lista.
+         * Quando definido, também é usado como `aria-label` do elemento `role="list"`,
+         * fornecendo um nome acessível que leitores de tela anunciam ao entrar na lista.
+         */
+        this.header = null;
+        /**
+         * Indica se a lista será horizontal. Por padrão, a lista é vertical.
+         * @deprecated Use `orientation`.
+         */
+        this.isHorizontal = false;
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Indica que o divider para o título da lista estará oculto.
+         */
+        this.hideHeaderDivider = false;
+        /**
+         * Indica se a lista possui divisores (divider) entre os itens.
+         */
+        this.divider = false;
+        /**
+         * Indica se a lista possui o comportamento de collapse.
+         */
+        this.collapse = false;
+        /**
+         * Indica se a lista possui o comportamento de accordion.
+         * O valor da propriedade define o grupo, ou seja, o accordion é aplicado a todas as listas que possuem o mesmo valor para esta propriedade.
+         */
+        this.accordion = null;
+        /** Semântica do host quando o conteúdo não representa itens de lista. */
+        this.listRole = 'list';
+        /**
+         * Modificador de densidade da lista.
+         */
+        this.density = null;
+        this.observer = null;
+        this.slotElement = null;
+        this.observingNestedContent = false;
+        this.boundKeydown = null;
+        this.mutationFrame = null;
+        this.handleSlotChange = () => {
+            this.syncObserverMode();
+            this.scheduleListSync();
+        };
+        this.renderHeader = () => {
+            if (this.header?.length > 0 || this.hasSlotContent('header')) {
+                return (h("div", { class: !this.hasSlotContent('header') ? 'header' : null, slot: this.collapse || this.accordion ? 'trigger' : null }, h("slot", { name: "header" }, !this.hasSlotContent('header') ? h("div", { class: "title" }, this.header) : null)));
+            }
+            return null;
+        };
+    }
+    async componentDidLoad() {
+        this.boundKeydown = this.handleKeydown.bind(this);
+        this.el.addEventListener('keydown', this.boundKeydown);
+        if (this.effectiveOrientation === 'horizontal') {
+            const slotItems = Array.from(this.el.querySelectorAll('br-item'));
+            slotItems.forEach((item) => {
+                const nextElement = item.nextElementSibling;
+                if (nextElement?.classList.contains('br-divider')) {
+                    const divider = nextElement;
+                    divider.style.borderWidth = '0 1px 0 0';
+                    divider.style.width = '1px';
+                }
+            });
+        }
+        this.applyListItemRoles();
+        this.normalizeIntermediateWrappers();
+        await this.initRovingTabindex();
+        this.slotElement = this.el.shadowRoot?.querySelector('slot:not([name])') ?? null;
+        this.slotElement?.addEventListener('slotchange', this.handleSlotChange);
+        this.syncObserverMode();
+    }
+    disconnectedCallback() {
+        if (this.boundKeydown) {
+            this.el.removeEventListener('keydown', this.boundKeydown);
+            this.boundKeydown = null;
+        }
+        this.observer?.disconnect();
+        this.observer = null;
+        this.slotElement?.removeEventListener('slotchange', this.handleSlotChange);
+        this.slotElement = null;
+        if (this.mutationFrame !== null) {
+            cancelAnimationFrame(this.mutationFrame);
+            this.mutationFrame = null;
+        }
+    }
+    /**
+     * Retorna todos os `br-item` pertencentes diretamente a esta lista, ignorando
+     * itens de listas aninhadas. Usa `TreeWalker` com `FILTER_REJECT` em `br-list`
+     * filhas para evitar contaminar itens internos com `role="listitem"` desta lista pai.
+     */
+    getOwnedItems() {
+        const items = [];
+        const walker = document.createTreeWalker(this.el, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => {
+                const tag = node.tagName?.toLowerCase();
+                if (node !== this.el &&
+                    (tag === 'br-list' || tag === 'ul' || tag === 'ol' || node.getAttribute?.('role') === 'list')) {
+                    return NodeFilter.FILTER_REJECT;
+                }
+                if (tag === 'br-item' || tag === 'br-footer-item' || tag === 'br-skiplink-item') {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_SKIP;
+            },
+        });
+        let current = walker.nextNode();
+        while (current) {
+            items.push(current);
+            current = walker.nextNode();
+        }
+        return items;
+    }
+    /**
+     * Aplica `role="listitem"` em todos os itens pertencentes a esta lista quando `listRole === 'list'`.
+     * Chamado no `componentDidLoad` e pelo `MutationObserver` para itens adicionados dinamicamente.
+     */
+    applyListItemRoles() {
+        if (this.listRole !== 'list')
+            return;
+        this.getOwnedItems().forEach((item) => {
+            item.setAttribute('role', 'listitem');
+        });
+    }
+    /**
+     * Aplica `role="presentation"` em wrappers intermediários e elementos decorativos sem semântica
+     * entre o `br-list` e seus itens diretos (ex.: `<div>` de layout ou `<span>` divisores).
+     * Sem isso, a relação `list → listitem` exigida pelo WAI-ARIA é quebrada.
+     */
+    normalizeIntermediateWrappers() {
+        for (const child of Array.from(this.el.children)) {
+            this.normalizeWrapperRecursive(child);
+        }
+    }
+    normalizeWrapperRecursive(node) {
+        const tag = node.tagName?.toLowerCase();
+        if (tag === 'br-item' || tag === 'br-footer-item' || tag === 'br-skiplink-item') {
+            return;
+        }
+        // Não interfere em listas aninhadas: elas têm sua própria semântica.
+        if (tag === 'br-list' || tag === 'ul' || tag === 'ol' || node.getAttribute('role') === 'list') {
+            return;
+        }
+        // Slot de cabeçalho não deve ser tratado como wrapper de item.
+        if (node.getAttribute('slot') === 'header') {
+            return;
+        }
+        if (this.listRole === 'list' && !node.hasAttribute('role')) {
+            node.setAttribute('role', 'presentation');
+        }
+        for (const grandChild of Array.from(node.children)) {
+            this.normalizeWrapperRecursive(grandChild);
+        }
+    }
+    /**
+     * Observa mutações no light DOM para manter `role="listitem"` e o roving tabindex
+     * atualizados quando itens são adicionados dinamicamente após o `componentDidLoad`.
+     */
+    mutationHasRelevantItems(mutations) {
+        const itemTags = ['br-item', 'br-footer-item', 'br-skiplink-item'];
+        for (const mutation of mutations) {
+            for (const node of [...Array.from(mutation.addedNodes), ...Array.from(mutation.removedNodes)]) {
+                if (node.nodeType !== Node.ELEMENT_NODE)
+                    continue;
+                const el = node;
+                const tag = el.tagName?.toLowerCase();
+                if (itemTags.includes(tag) || itemTags.some((t) => el.querySelector?.(t))) {
+                    return true;
+                }
+            }
+            if (mutation.type === 'attributes' && itemTags.includes(mutation.target.tagName?.toLowerCase())) {
+                return true;
+            }
+        }
+        return false;
+    }
+    hasNestedSlottedContent() {
+        const itemTags = ['br-item', 'br-footer-item', 'br-skiplink-item'];
+        return (this.slotElement?.assignedElements({ flatten: true }) ?? []).some((element) => {
+            const tag = element.tagName.toLowerCase();
+            return !itemTags.includes(tag) && itemTags.some((itemTag) => element.querySelector(itemTag) !== null);
+        });
+    }
+    scheduleListSync() {
+        if (this.mutationFrame !== null)
+            return;
+        this.mutationFrame = requestAnimationFrame(async () => {
+            this.mutationFrame = null;
+            this.applyListItemRoles();
+            this.normalizeIntermediateWrappers();
+            await this.initRovingTabindex();
+        });
+    }
+    syncObserverMode() {
+        const nested = this.hasNestedSlottedContent();
+        if (this.observer !== null && nested === this.observingNestedContent)
+            return;
+        this.observer?.disconnect();
+        this.observingNestedContent = nested;
+        this.observer = new MutationObserver((mutations) => {
+            if (!this.mutationHasRelevantItems(mutations))
+                return;
+            this.scheduleListSync();
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: nested,
+            attributes: true,
+            attributeFilter: ['disabled', 'hidden', 'href', 'is-interactive', 'interactive', 'is-button', 'button', 'style'],
+        });
+    }
+    /**
+     * Implementa o padrão roving tabindex do WAI-ARIA APG.
+     * Apenas o primeiro item habilitado recebe `tabIndex=0`; todos os outros ficam com `tabIndex=-1`.
+     * Isso garante que a lista seja um único tab stop, com navegação interna via teclas de seta.
+     */
+    async initRovingTabindex() {
+        const items = this.getNavigableItems();
+        await Promise.all(items.map((item, index) => item.setTabIndex(index === 0 ? 0 : -1)));
+    }
+    /**
+     * Move o foco para o primeiro item navegável da lista.
+     * API pública para componentes que abrem a lista programaticamente
+     * (ex.: `br-dropdown`), evitando acesso direto ao `br-item`.
+     */
+    async focusFirstItem() {
+        const items = this.getNavigableItems();
+        if (items.length > 0) {
+            await this.focusItem(items[0]);
+        }
+    }
+    /**
+     * Atualiza o roving tabindex após uma navegação, colocando tabIndex=0
+     * no item que recebeu foco e tabIndex=-1 em todos os outros.
+     */
+    async updateRovingTabindex(focusedItem) {
+        const items = this.getNavigableItems();
+        await Promise.all(items.map((item) => item.setTabIndex(item === focusedItem ? 0 : -1)));
+    }
+    /**
+     * Verifica se um item está visível no documento.
+     */
+    isItemVisible(item) {
+        const style = window.getComputedStyle(item);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    }
+    /**
+     * Indica se o item participa da navegação por teclado (roving tabindex).
+     * Itens puramente de exibição (sem isInteractive/isButton/href) não são
+     * widgets acionáveis e não devem virar tab stop nem ser alcançados por seta.
+     */
+    isFocusableItem(item) {
+        return (item.hasAttribute('is-interactive') ||
+            item.hasAttribute('interactive') ||
+            item.hasAttribute('is-button') ||
+            item.hasAttribute('button') ||
+            item.hasAttribute('href'));
+    }
+    /**
+     * Retorna os br-item navegáveis desta lista, ignorando itens desabilitados,
+     * não-interativos, ocultos e itens pertencentes a listas aninhadas.
+     */
+    getNavigableItems() {
+        const items = [];
+        const walker = document.createTreeWalker(this.el, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => {
+                const tag = node.tagName?.toLowerCase();
+                if (node !== this.el &&
+                    (tag === 'br-list' || tag === 'ul' || tag === 'ol' || node.getAttribute?.('role') === 'list')) {
+                    return NodeFilter.FILTER_REJECT;
+                }
+                if (tag === 'br-item' && !node.hasAttribute('disabled') && this.isFocusableItem(node)) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_SKIP;
+            },
+        });
+        let current = walker.nextNode();
+        while (current) {
+            const item = current;
+            if (this.isItemVisible(item)) {
+                items.push(item);
+            }
+            current = walker.nextNode();
+        }
+        return items;
+    }
+    /**
+     * Resolve o elemento com foco atravessando múltiplos níveis de shadow DOM.
+     */
+    getDeepActiveElement(root = document) {
+        let active = root.activeElement;
+        while (active?.shadowRoot?.activeElement) {
+            active = active.shadowRoot.activeElement;
+        }
+        return active;
+    }
+    /**
+     * Sobe a partir de `start` até achar um dos `items`, atravessando limites de shadow root
+     * (via `.host`) em cada nível. Necessário porque `Node.contains()` não atravessa o shadow
+     * boundary de um elemento diferente (ex.: o `<input>` nativo dentro do shadow root de um
+     * `br-checkbox`/`br-radio` aninhado no item) -- sem isso, o foco dentro desses controles
+     * nunca é atribuído ao item correto.
+     */
+    findOwnerItem(start, items) {
+        let node = start;
+        while (node) {
+            if (node instanceof globalThis.Element && items.includes(node)) {
+                return node;
+            }
+            node = node instanceof ShadowRoot ? node.host : node.parentNode;
+        }
+        return null;
+    }
+    getCurrentIndex(items) {
+        const active = this.getDeepActiveElement();
+        const owner = this.findOwnerItem(active, items);
+        return owner ? items.indexOf(owner) : -1;
+    }
+    /**
+     * Indica se o teclado deve ser deixado para o próprio controle (input de texto, textarea,
+     * select), sem ser sequestrado pela navegação por setas/Home/End/Enter/Espaço da lista.
+     * Esses controles têm edição de texto/cursor próprios que a lista não deve sobrepor.
+     *
+     * Checkbox e radio ficam DE FORA deste bypass -- checkbox não tem comportamento nativo de
+     * seta algum (precisa que a lista trate as setas pra navegar entre itens, ver `findOwnerItem`),
+     * e radio já trata suas próprias setas via `defaultPrevented` (seu próprio `@Listen('keydown')`
+     * chama `preventDefault()`, o que o early-return de `handleKeydown` já respeita).
+     */
+    isFormControlTarget(target) {
+        const el = target;
+        const tag = el?.tagName?.toLowerCase();
+        if (!tag)
+            return false;
+        if (tag === 'textarea' || tag === 'select')
+            return true;
+        if (tag === 'input') {
+            const type = (el.type || 'text').toLowerCase();
+            return !['button', 'submit', 'reset', 'image', 'checkbox', 'radio'].includes(type);
+        }
+        return ['br-input', 'br-textarea', 'br-select'].includes(tag);
+    }
+    async focusItem(item) {
+        await this.updateRovingTabindex(item);
+        if ('setFocus' in item) {
+            await item.setFocus();
+        }
+        item.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    /**
+     * Trata a navegação por teclado dentro da lista, implementando o padrão
+     * composite widget do WAI-ARIA APG.
+     *
+     * - ArrowDown / ArrowRight (horizontal): próximo item (circular)
+     * - ArrowUp / ArrowLeft (horizontal): item anterior (circular)
+     * - Home / End: primeiro / último item
+     * - Enter / Space: ativa o item com foco via `activate()`
+     *
+     * Usa `composedPath()` para identificar a lista dona do evento,
+     * garantindo que listas aninhadas não processem eventos umas das outras.
+     * Chama `stopPropagation()` em todas as teclas tratadas para evitar
+     * conflito com componentes pai.
+     *
+     * Sai cedo (sem interceptar nada) quando: (a) o evento já foi tratado por um
+     * handler mais interno que chamou `preventDefault()` -- ex.: `br-dropdown` tratando
+     * Enter/Setas nos próprios itens, ou `br-radio` tratando Setas dentro do seu grupo --
+     * evitando double-handling; ou (b) o alvo é um controle de formulário que deve manter
+     * seu próprio comportamento de teclado (ver `isFormControlTarget`).
+     */
+    handleKeydown(event) {
+        const path = event.composedPath();
+        const closestList = path.find((el) => el.tagName?.toLowerCase() === 'br-list');
+        if (closestList !== this.el)
+            return;
+        if (event.defaultPrevented)
+            return;
+        if (this.isFormControlTarget(event.target))
+            return;
+        const items = this.getNavigableItems();
+        if (!items.length)
+            return;
+        let currentIndex = this.getCurrentIndex(items);
+        if (currentIndex === -1)
+            currentIndex = 0;
+        const nextKey = this.isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = this.isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        let target = null;
+        switch (event.key) {
+            case nextKey:
+                event.preventDefault();
+                event.stopPropagation();
+                target = items[(currentIndex + 1) % items.length];
+                break;
+            case prevKey:
+                event.preventDefault();
+                event.stopPropagation();
+                target = items[(currentIndex - 1 + items.length) % items.length];
+                break;
+            case 'Home':
+                event.preventDefault();
+                event.stopPropagation();
+                target = items[0];
+                break;
+            case 'End':
+                event.preventDefault();
+                event.stopPropagation();
+                target = items[items.length - 1];
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                event.stopPropagation();
+                const currentItem = items[currentIndex];
+                if (currentItem && 'activate' in currentItem) {
+                    currentItem.activate();
+                }
+                return;
+            }
+            default:
+                return;
+        }
+        if (target) {
+            void this.focusItem(target);
+        }
+    }
+    getCssClassMap() {
+        return {
+            'br-list': true,
+            horizontal: this.effectiveOrientation === 'horizontal',
+            divider: this.divider,
+            small: this.density === 'small',
+            large: this.density === 'large',
+        };
+    }
+    get effectiveOrientation() {
+        return this.orientation ?? (this.isHorizontal ? 'horizontal' : 'vertical');
+    }
+    /**
+     * Verifica se o slot possui conteúdo.
+     * @param slotName Nome do slot a ser verificado.
+     * @returns true se o slot possui conteúdo, false caso contrário.
+     */
+    hasSlotContent(slotName) {
+        return hasNamedLightDomSlot(this.el, slotName);
+    }
+    renderDivider() {
+        if ((this.header || this.hasSlotContent('header')) && !this.hideHeaderDivider) {
+            return h("div", { class: "br-divider" });
+        }
+        return null;
+    }
+    renderListBody() {
+        return [this.renderHeader(), this.renderDivider(), h("slot", null)];
+    }
+    render() {
+        return (h(Host, { key: '76fc25996edd37644798a525574f4c2d86c04373', role: this.listRole, "aria-label": this.header || null }, h("div", { key: 'be7604b1166c62b28dc12ecddae73b2b38ce3a17', class: this.getCssClassMap(), id: this.customId, part: "container" }, this.accordion || this.collapse ? (h("br-collapse", { "accordion-group": this.accordion || null, divider: this.divider }, this.renderListBody())) : (this.renderListBody()))));
+    }
+    static get is() { return "br-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o texto do cabe\u00E7alho da lista.\nQuando definido, tamb\u00E9m \u00E9 usado como `aria-label` do elemento `role=\"list\"`,\nfornecendo um nome acess\u00EDvel que leitores de tela anunciam ao entrar na lista."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "header",
+                "defaultValue": "null"
+            },
+            "isHorizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `orientation`."
+                        }],
+                    "text": "Indica se a lista ser\u00E1 horizontal. Por padr\u00E3o, a lista \u00E9 vertical."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-horizontal",
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Orienta\u00E7\u00E3o can\u00F4nica. Quando informada, tem preced\u00EAncia sobre `isHorizontal`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation"
+            },
+            "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()"
+            },
+            "hideHeaderDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica que o divider para o t\u00EDtulo da lista estar\u00E1 oculto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-header-divider",
+                "defaultValue": "false"
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se a lista possui divisores (divider) entre os itens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "divider",
+                "defaultValue": "false"
+            },
+            "collapse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se a lista possui o comportamento de collapse."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapse",
+                "defaultValue": "false"
+            },
+            "accordion": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se a lista possui o comportamento de accordion.\nO valor da propriedade define o grupo, ou seja, o accordion \u00E9 aplicado a todas as listas que possuem o mesmo valor para esta propriedade."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "accordion",
+                "defaultValue": "null"
+            },
+            "listRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'list' | 'group'",
+                    "resolved": "\"group\" | \"list\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sem\u00E2ntica do host quando o conte\u00FAdo n\u00E3o representa itens de lista."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "list-role",
+                "defaultValue": "'list'"
+            },
+            "density": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | null",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modificador de densidade da lista."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "focusFirstItem": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Move o foco para o primeiro item naveg\u00E1vel da lista.\nAPI p\u00FAblica para componentes que abrem a lista programaticamente\n(ex.: `br-dropdown`), evitando acesso direto ao `br-item`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}