@govbr-ds/webcomponents 2.0.0-next.57 → 2.0.0-next.58

package/dist/collection/components/skip-link/skip-link.js

@@ -0,0 +1,588 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { __awaiter } from "tslib";
+import { h, Host, } from "@stencil/core";
+import Helpers from "../../utils/helpers";
+/**
+ * O componente Skip Link consiste em uma lista de itens que auxiliam os usuários a navegarem
+ * por uma página com o auxílio do teclado, sendo extremamente útil para pessoas que dependem
+ * de leitores de tela ou navegação via teclado.
+ *
+ * Este componente implementa atalhos de teclado para acessibilidade, permitindo que o usuário
+ * acesse rapidamente áreas importantes da página utilizando Alt+[número]. Os números das teclas
+ * são definidos na propriedade `key-number` de cada item e exibidos visualmente na interface.
+ *
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/skip-link?tab=designer).
+ *
+ * @slot default - Slot padrão para inserir elementos `<br-skiplink-item>`.
+ *
+ * @part container - Container principal do skiplink.
+ *
+ * @example
+ * ```html
+ * <br-skip-link>
+ *   <br-skiplink-item target="#main-content" key-number="1">
+ *     Ir para o conteúdo principal
+ *   </br-skiplink-item>
+ *   <br-skiplink-item target="#menu" key-number="2">
+ *     Ir para o menu
+ *   </br-skiplink-item>
+ *   <br-skiplink-item target="#search" key-number="3">
+ *     Ir para a busca
+ *   </br-skiplink-item>
+ * </br-skip-link>
+ * ```
+ * Neste exemplo, o componente exibirá automaticamente as tags com os números 1, 2 e 3
+ * ao lado dos textos. O usuário pode usar Alt+1 para ir ao conteúdo principal,
+ * Alt+2 para ir ao menu, e Alt+3 para ir à busca.
+ */
+export class SkipLink {
+    constructor() {
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = Helpers.generateUniqueId();
+        /**
+         * Define se o skip link apresenta um ou múltiplos itens visíveis.
+         * - 'simple': Exibe apenas um item por vez.
+         * - 'compound': Exibe uma lista com múltiplos itens.
+         */
+        this.variant = 'compound';
+        /**
+         * Define a posição do skip link na tela.
+         * - 'top-left': Posicionado no canto superior esquerdo.
+         * - 'top-center': Posicionado no centro superior.
+         * - 'top-right': Posicionado no canto superior direito.
+         */
+        this.position = 'top-left';
+        /**
+         * Define o z-index do componente.
+         * Controla a ordem de empilhamento do componente na página.
+         */
+        this.zIndex = null;
+        /**
+         * Estado interno que controla a visibilidade do componente.
+         */
+        this.isVisible = false;
+        /**
+         * Define se o componente está em modo tela pequena
+         */
+        this.isSmallScreen = false;
+        /**
+         * Define se o componente precisa mudar para modo simples por falta de espaço
+         */
+        this.needsSimpleMode = false;
+        /**
+         * Largura do container pai
+         */
+        this.containerWidth = 0;
+        /**
+         * Manipulador global para atalhos de teclado Alt+[número].
+         */
+        this.globalKeyHandler = (event) => {
+            if (event.altKey && /^[1-9]$/.test(event.key)) {
+                const items = this.el.querySelectorAll('br-skiplink-item');
+                const targetItem = Array.from(items).find((item) => {
+                    const keyNumber = item.getAttribute('key-number');
+                    return keyNumber === event.key;
+                });
+                if (targetItem && typeof targetItem.navigateToTarget === 'function') {
+                    event.preventDefault();
+                    targetItem.navigateToTarget();
+                    this.show();
+                }
+            }
+        };
+        /**
+         * Calcula a largura total dos itens e atualiza os estados do componente
+         */
+        this.updateContainerSize = (entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                this.containerWidth = width;
+                this.isSmallScreen = width < 570;
+                if (!this.isSmallScreen) {
+                    this.calculateItemsWidth();
+                }
+                else {
+                    this.needsSimpleMode = false;
+                }
+            }
+        };
+    }
+    updateStyles() {
+        if (this.zIndex !== null && this.zIndex !== undefined) {
+            this.el.style.zIndex = `${this.zIndex}`;
+            this.el.style.setProperty('--skiplink-layer', `${this.zIndex}`);
+        }
+    }
+    /**
+     * Observa mudanças nos estados que afetam o modo efetivo (simple/compound)
+     * e atualiza as contagens dos itens quando necessário.
+     */
+    watchModeChanges() {
+        this.updateItemCounts();
+    }
+    /**
+     * Listener para eventos de navegação dos itens filhos.
+     */
+    handleItemNavigation(event) {
+        this.brSkiplinkNavigation.emit(event.detail);
+        this.hide();
+    }
+    /**
+     * Listener para evento de foco no componente.
+     */
+    handleFocusIn() {
+        if (!this.isVisible) {
+            this.show();
+        }
+    }
+    /**
+     * Listener para evento de perda de foco no componente.
+     */
+    handleFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget === null || !this.el.contains(relatedTarget)) {
+            this.hide();
+        }
+    }
+    /**
+     * Listener para a tecla Escape.
+     */
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Escape' && this.isVisible) {
+            event.preventDefault();
+            this.hide();
+            (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+            return;
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('keydown', this.globalKeyHandler);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(this.updateContainerSize);
+            const parentElement = this.el.parentElement;
+            if (parentElement !== null) {
+                this.resizeObserver.observe(parentElement);
+            }
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.globalKeyHandler);
+        if (this.resizeObserver !== undefined && this.resizeObserver !== null) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentWillLoad() {
+        const parentElement = this.el.parentElement;
+        if (parentElement !== null) {
+            this.containerWidth = parentElement.clientWidth;
+        }
+    }
+    componentDidLoad() {
+        this.updateItemCounts();
+        this.calculateItemsWidth();
+    }
+    /**
+     * Calcula a largura total dos itens do skip-link e determina se deve usar modo simple ou compound.
+     */
+    calculateItemsWidth() {
+        requestAnimationFrame(() => {
+            const items = this.el.querySelectorAll('br-skiplink-item');
+            if (items.length === 0 || this.isSmallScreen)
+                return;
+            if (items.length > 4) {
+                this.needsSimpleMode = true;
+                return;
+            }
+            this.needsSimpleMode = false;
+            const totalWidth = this.sumItemsWidth(items);
+            const availableWidth = this.calculateAvailableWidth();
+            if (totalWidth > availableWidth) {
+                this.needsSimpleMode = true;
+            }
+        });
+    }
+    /**
+     * Soma a largura de todos os itens do skip-link
+     */
+    sumItemsWidth(items) {
+        let total = 0;
+        items.forEach((item) => {
+            var _a;
+            const brItem = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('br-item');
+            if (brItem === null)
+                return;
+            const width = brItem.offsetWidth || brItem.scrollWidth || brItem.getBoundingClientRect().width;
+            total += width;
+        });
+        return total;
+    }
+    /**
+     * Calcula a largura disponível descontando margens e margem de segurança
+     */
+    calculateAvailableWidth() {
+        if (this.containerWidth === 0)
+            return 0;
+        // Obtém o valor da margem definida no CSS
+        const computedStyle = getComputedStyle(this.el);
+        const spacingValue = computedStyle.getPropertyValue('--spacing-scale-3x').trim();
+        const margin = parseFloat(spacingValue) || 24;
+        // Margem de segurança para evitar quebras visuais
+        const safetyMargin = 20;
+        // Desconta: margem esquerda + margem direita + margem de segurança
+        return this.containerWidth - margin * 2 - safetyMargin;
+    }
+    /**
+     * Atualiza os atributos de contagem nos itens filhos.
+     * Adiciona data-item-index e data-item-total em cada br-skiplink-item.
+     * A contagem é exibida quando o componente está em modo simple (incluindo modo responsivo).
+     */
+    updateItemCounts() {
+        const effectiveVariant = this.isSmallScreen || this.needsSimpleMode ? 'simple' : this.variant;
+        const shouldShowCount = this.showItemCount !== undefined ? this.showItemCount : effectiveVariant === 'simple';
+        const isCompoundMode = effectiveVariant === 'compound';
+        const items = this.el.querySelectorAll('br-skiplink-item');
+        items.forEach((item) => {
+            if (isCompoundMode) {
+                item.classList.add('compound-mode');
+            }
+            else {
+                item.classList.remove('compound-mode');
+            }
+        });
+        if (!shouldShowCount) {
+            items.forEach((item) => {
+                item.removeAttribute('data-item-index');
+                item.removeAttribute('data-item-total');
+            });
+            return;
+        }
+        const total = items.length;
+        items.forEach((item, index) => {
+            item.setAttribute('data-item-index', (index + 1).toString());
+            item.setAttribute('data-item-total', total.toString());
+        });
+    }
+    /**
+     * Oculta o componente programaticamente.
+     */
+    hide() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const focusedElement = this.el.querySelector(':focus');
+            if (focusedElement instanceof HTMLElement) {
+                focusedElement.blur();
+            }
+            this.isVisible = false;
+            this.brDidHide.emit();
+            return Promise.resolve();
+        });
+    }
+    /**
+     * Exibe o componente programaticamente.
+     */
+    show() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            this.isVisible = true;
+            yield new Promise((resolve) => requestAnimationFrame(resolve));
+            const firstItem = this.el.querySelector('br-skiplink-item');
+            if (firstItem !== null) {
+                if (typeof firstItem.itemFocus === 'function') {
+                    yield firstItem.itemFocus();
+                }
+                else {
+                    const focusableElement = (_a = firstItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a, button');
+                    if (focusableElement !== null) {
+                        focusableElement.focus();
+                    }
+                }
+            }
+            this.brDidShow.emit();
+            return Promise.resolve();
+        });
+    }
+    getEffectivePosition() {
+        if (this.isSmallScreen) {
+            return 'top-left';
+        }
+        return this.position;
+    }
+    getCssClassMap() {
+        const effectiveVariant = this.isSmallScreen || this.needsSimpleMode ? 'simple' : this.variant;
+        const effectivePosition = this.getEffectivePosition();
+        return {
+            'br-skiplink': true,
+            full: effectiveVariant === 'compound',
+            [effectivePosition]: true,
+            visible: this.isVisible,
+        };
+    }
+    render() {
+        return (h(Host, { key: '4c02e2eef1e5eb3826d93438cfe68db431556755' }, h("nav", { key: '96fe302f4421701c73df8a97c0f38fae08ace4a1', part: "container", class: this.getCssClassMap(), id: this.customId, role: "navigation" }, h("br-list", { key: '6c711d930a8c66df4441920893a08b6533d1e638' }, h("slot", { key: 'db52a2302b50bca5bf7d5326a922c31345ab4b54' })))));
+    }
+    static get is() { return "br-skip-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skip-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["skip-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "Helpers.generateUniqueId()"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'simple' | 'compound'",
+                    "resolved": "\"compound\" | \"simple\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o skip link apresenta um ou m\u00FAltiplos itens vis\u00EDveis.\n- 'simple': Exibe apenas um item por vez.\n- 'compound': Exibe uma lista com m\u00FAltiplos itens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'compound'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top-left' | 'top-center' | 'top-right'",
+                    "resolved": "\"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a posi\u00E7\u00E3o do skip link na tela.\n- 'top-left': Posicionado no canto superior esquerdo.\n- 'top-center': Posicionado no centro superior.\n- 'top-right': Posicionado no canto superior direito."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'top-left'"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o z-index do componente.\nControla a ordem de empilhamento do componente na p\u00E1gina."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "z-index",
+                "defaultValue": "null"
+            },
+            "showItemCount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe a contagem de itens no formato (1/4), (2/4), etc.\nQuando `true`, cada item mostrar\u00E1 sua posi\u00E7\u00E3o relativa ao total de itens.\nPor padr\u00E3o, \u00E9 `true` para o modo simple e `false` para o modo compound."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-item-count"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "isSmallScreen": {},
+            "needsSimpleMode": {},
+            "containerWidth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brSkiplinkNavigation",
+                "name": "brSkiplinkNavigation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando um item do skiplink \u00E9 ativado.\nO evento cont\u00E9m informa\u00E7\u00F5es sobre o item acionado e o elemento target."
+                },
+                "complexType": {
+                    "original": "{ itemId: string; target: string }",
+                    "resolved": "{ itemId: string; target: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidShow",
+                "name": "brDidShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o skiplink se torna vis\u00EDvel."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidHide",
+                "name": "brDidHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o skiplink se torna oculto."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Oculta o componente programaticamente.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLBrSkiplinkItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLBrSkiplinkItemElement"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Exibe o componente programaticamente.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "zIndex",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "needsSimpleMode",
+                "methodName": "watchModeChanges"
+            }, {
+                "propName": "isSmallScreen",
+                "methodName": "watchModeChanges"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "brSkiplinkItemClick",
+                "method": "handleItemNavigation",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=skip-link.js.map

package/dist/collection/components/skip-link/skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/skip-link/skip-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport Helpers from '../../utils/helpers'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * O componente Skip Link consiste em uma lista de itens que auxiliam os usuários a navegarem\n * por uma página com o auxílio do teclado, sendo extremamente útil para pessoas que dependem\n * de leitores de tela ou navegação via teclado.\n *\n * Este componente implementa atalhos de teclado para acessibilidade, permitindo que o usuário\n * acesse rapidamente áreas importantes da página utilizando Alt+[número]. Os números das teclas\n * são definidos na propriedade `key-number` de cada item e exibidos visualmente na interface.\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/skip-link?tab=designer).\n *\n * @slot default - Slot padrão para inserir elementos `<br-skiplink-item>`.\n *\n * @part container - Container principal do skiplink.\n *\n * @example\n * ```html\n * <br-skip-link>\n *   <br-skiplink-item target=\"#main-content\" key-number=\"1\">\n *     Ir para o conteúdo principal\n *   </br-skiplink-item>\n *   <br-skiplink-item target=\"#menu\" key-number=\"2\">\n *     Ir para o menu\n *   </br-skiplink-item>\n *   <br-skiplink-item target=\"#search\" key-number=\"3\">\n *     Ir para a busca\n *   </br-skiplink-item>\n * </br-skip-link>\n * ```\n * Neste exemplo, o componente exibirá automaticamente as tags com os números 1, 2 e 3\n * ao lado dos textos. O usuário pode usar Alt+1 para ir ao conteúdo principal,\n * Alt+2 para ir ao menu, e Alt+3 para ir à busca.\n */\n@Component({\n  tag: 'br-skip-link',\n  styleUrl: 'skip-link.scss',\n  shadow: true,\n})\nexport class SkipLink {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrSkipLinkElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = Helpers.generateUniqueId()\n\n  /**\n   * Define se o skip link apresenta um ou múltiplos itens visíveis.\n   * - 'simple': Exibe apenas um item por vez.\n   * - 'compound': Exibe uma lista com múltiplos itens.\n   */\n  @Prop({ reflect: true }) readonly variant: 'simple' | 'compound' = 'compound'\n\n  /**\n   * Define a posição do skip link na tela.\n   * - 'top-left': Posicionado no canto superior esquerdo.\n   * - 'top-center': Posicionado no centro superior.\n   * - 'top-right': Posicionado no canto superior direito.\n   */\n  @Prop({ reflect: true }) readonly position: 'top-left' | 'top-center' | 'top-right' = 'top-left'\n\n  /**\n   * Define o z-index do componente.\n   * Controla a ordem de empilhamento do componente na página.\n   */\n  @Prop({ reflect: true }) readonly zIndex: number | null = null\n\n  /**\n   * Exibe a contagem de itens no formato (1/4), (2/4), etc.\n   * Quando `true`, cada item mostrará sua posição relativa ao total de itens.\n   * Por padrão, é `true` para o modo simple e `false` para o modo compound.\n   */\n  @Prop({ reflect: true }) readonly showItemCount?: boolean\n\n  /**\n   * Estado interno que controla a visibilidade do componente.\n   */\n  @State() private isVisible: boolean = false\n\n  /**\n   * Define se o componente está em modo tela pequena\n   */\n  @State() private isSmallScreen: boolean = false\n\n  /**\n   * Define se o componente precisa mudar para modo simples por falta de espaço\n   */\n  @State() private needsSimpleMode: boolean = false\n\n  /**\n   * Largura do container pai\n   */\n  @State() private containerWidth: number = 0\n\n  /**\n   * ResizeObserver para monitorar mudanças no tamanho do container\n   */\n  private resizeObserver: ResizeObserver\n\n  /**\n   * Evento emitido quando um item do skiplink é ativado.\n   * O evento contém informações sobre o item acionado e o elemento target.\n   */\n  @Event() brSkiplinkNavigation: EventEmitter<{ itemId: string; target: string }>\n\n  /**\n   * Evento emitido quando o skiplink se torna visível.\n   */\n  @Event() brDidShow: EventEmitter<void>\n\n  /**\n   * Evento emitido quando o skiplink se torna oculto.\n   */\n  @Event() brDidHide: EventEmitter<void>\n\n  @Watch('zIndex')\n  updateStyles() {\n    if (this.zIndex !== null && this.zIndex !== undefined) {\n      this.el.style.zIndex = `${this.zIndex}`\n      this.el.style.setProperty('--skiplink-layer', `${this.zIndex}`)\n    }\n  }\n\n  /**\n   * Observa mudanças nos estados que afetam o modo efetivo (simple/compound)\n   * e atualiza as contagens dos itens quando necessário.\n   */\n  @Watch('needsSimpleMode')\n  @Watch('isSmallScreen')\n  watchModeChanges() {\n    this.updateItemCounts()\n  }\n\n  /**\n   * Listener para eventos de navegação dos itens filhos.\n   */\n  @Listen('brSkiplinkItemClick')\n  handleItemNavigation(event: CustomEvent<{ itemId: string; target: string }>) {\n    this.brSkiplinkNavigation.emit(event.detail)\n    this.hide()\n  }\n\n  /**\n   * Listener para evento de foco no componente.\n   */\n  @Listen('focusin')\n  handleFocusIn() {\n    if (!this.isVisible) {\n      this.show()\n    }\n  }\n\n  /**\n   * Listener para evento de perda de foco no componente.\n   */\n  @Listen('focusout')\n  handleFocusOut(event: FocusEvent) {\n    const relatedTarget = event.relatedTarget as HTMLElement | null\n    if (relatedTarget === null || !this.el.contains(relatedTarget)) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Listener para a tecla Escape.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.isVisible) {\n      event.preventDefault()\n      this.hide()\n      ;(document.activeElement as HTMLElement)?.blur()\n      return\n    }\n  }\n\n  connectedCallback() {\n    document.addEventListener('keydown', this.globalKeyHandler)\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(this.updateContainerSize)\n      const parentElement = this.el.parentElement\n      if (parentElement !== null) {\n        this.resizeObserver.observe(parentElement)\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('keydown', this.globalKeyHandler)\n\n    if (this.resizeObserver !== undefined && this.resizeObserver !== null) {\n      this.resizeObserver.disconnect()\n    }\n  }\n\n  componentWillLoad() {\n    const parentElement = this.el.parentElement\n    if (parentElement !== null) {\n      this.containerWidth = parentElement.clientWidth\n    }\n  }\n\n  componentDidLoad() {\n    this.updateItemCounts()\n    this.calculateItemsWidth()\n  }\n\n  /**\n   * Manipulador global para atalhos de teclado Alt+[número].\n   */\n  private globalKeyHandler = (event: KeyboardEvent) => {\n    if (event.altKey && /^[1-9]$/.test(event.key)) {\n      const items = this.el.querySelectorAll('br-skiplink-item') as NodeListOf<HTMLBrSkiplinkItemElement>\n      const targetItem = Array.from(items).find((item) => {\n        const keyNumber = item.getAttribute('key-number')\n        return keyNumber === event.key\n      })\n\n      if (targetItem && typeof targetItem.navigateToTarget === 'function') {\n        event.preventDefault()\n        targetItem.navigateToTarget()\n        this.show()\n      }\n    }\n  }\n\n  /**\n   * Calcula a largura total dos itens e atualiza os estados do componente\n   */\n  private updateContainerSize = (entries: ResizeObserverEntry[]) => {\n    for (const entry of entries) {\n      const width = entry.contentRect.width\n      this.containerWidth = width\n      this.isSmallScreen = width < 570\n\n      if (!this.isSmallScreen) {\n        this.calculateItemsWidth()\n      } else {\n        this.needsSimpleMode = false\n      }\n    }\n  }\n\n  /**\n   * Calcula a largura total dos itens do skip-link e determina se deve usar modo simple ou compound.\n   */\n  private calculateItemsWidth() {\n    requestAnimationFrame(() => {\n      const items = this.el.querySelectorAll('br-skiplink-item') as NodeListOf<HTMLBrSkiplinkItemElement>\n\n      if (items.length === 0 || this.isSmallScreen) return\n      if (items.length > 4) {\n        this.needsSimpleMode = true\n        return\n      }\n\n      this.needsSimpleMode = false\n      const totalWidth = this.sumItemsWidth(items)\n\n      const availableWidth = this.calculateAvailableWidth()\n\n      if (totalWidth > availableWidth) {\n        this.needsSimpleMode = true\n      }\n    })\n  }\n\n  /**\n   * Soma a largura de todos os itens do skip-link\n   */\n  private sumItemsWidth(items: NodeListOf<HTMLBrSkiplinkItemElement>): number {\n    let total = 0\n\n    items.forEach((item) => {\n      const brItem = item.shadowRoot?.querySelector('br-item') as HTMLElement | null\n      if (brItem === null) return\n\n      const width = brItem.offsetWidth || brItem.scrollWidth || brItem.getBoundingClientRect().width\n      total += width\n    })\n\n    return total\n  }\n\n  /**\n   * Calcula a largura disponível descontando margens e margem de segurança\n   */\n  private calculateAvailableWidth(): number {\n    if (this.containerWidth === 0) return 0\n\n    // Obtém o valor da margem definida no CSS\n    const computedStyle = getComputedStyle(this.el)\n    const spacingValue = computedStyle.getPropertyValue('--spacing-scale-3x').trim()\n    const margin = parseFloat(spacingValue) || 24\n\n    // Margem de segurança para evitar quebras visuais\n    const safetyMargin = 20\n\n    // Desconta: margem esquerda + margem direita + margem de segurança\n    return this.containerWidth - margin * 2 - safetyMargin\n  }\n\n  /**\n   * Atualiza os atributos de contagem nos itens filhos.\n   * Adiciona data-item-index e data-item-total em cada br-skiplink-item.\n   * A contagem é exibida quando o componente está em modo simple (incluindo modo responsivo).\n   */\n  private updateItemCounts() {\n    const effectiveVariant = this.isSmallScreen || this.needsSimpleMode ? 'simple' : this.variant\n    const shouldShowCount = this.showItemCount !== undefined ? this.showItemCount : effectiveVariant === 'simple'\n    const isCompoundMode = effectiveVariant === 'compound'\n\n    const items = this.el.querySelectorAll('br-skiplink-item') as NodeListOf<HTMLBrSkiplinkItemElement>\n\n    items.forEach((item) => {\n      if (isCompoundMode) {\n        item.classList.add('compound-mode')\n      } else {\n        item.classList.remove('compound-mode')\n      }\n    })\n\n    if (!shouldShowCount) {\n      items.forEach((item) => {\n        item.removeAttribute('data-item-index')\n        item.removeAttribute('data-item-total')\n      })\n      return\n    }\n\n    const total = items.length\n    items.forEach((item, index) => {\n      item.setAttribute('data-item-index', (index + 1).toString())\n      item.setAttribute('data-item-total', total.toString())\n    })\n  }\n\n  /**\n   * Oculta o componente programaticamente.\n   */\n  @Method()\n  async hide(): Promise<void> {\n    const focusedElement = this.el.querySelector(':focus')\n    if (focusedElement instanceof HTMLElement) {\n      focusedElement.blur()\n    }\n    this.isVisible = false\n    this.brDidHide.emit()\n    return Promise.resolve()\n  }\n\n  /**\n   * Exibe o componente programaticamente.\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true\n\n    await new Promise((resolve) => requestAnimationFrame(resolve))\n\n    const firstItem = this.el.querySelector('br-skiplink-item') as HTMLBrSkiplinkItemElement | null\n    if (firstItem !== null) {\n      if (typeof firstItem.itemFocus === 'function') {\n        await firstItem.itemFocus()\n      } else {\n        const focusableElement = firstItem.shadowRoot?.querySelector('a, button') as HTMLElement | null\n        if (focusableElement !== null) {\n          focusableElement.focus()\n        }\n      }\n    }\n\n    this.brDidShow.emit()\n    return Promise.resolve()\n  }\n\n  private getEffectivePosition(): 'top-left' | 'top-center' | 'top-right' {\n    if (this.isSmallScreen) {\n      return 'top-left'\n    }\n    return this.position\n  }\n\n  private getCssClassMap(): CssClassMap {\n    const effectiveVariant = this.isSmallScreen || this.needsSimpleMode ? 'simple' : this.variant\n    const effectivePosition = this.getEffectivePosition()\n\n    return {\n      'br-skiplink': true,\n      full: effectiveVariant === 'compound',\n      [effectivePosition]: true,\n      visible: this.isVisible,\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav part=\"container\" class={this.getCssClassMap()} id={this.customId} role=\"navigation\">\n          <br-list>\n            <slot></slot>\n          </br-list>\n        </nav>\n      </Host>\n    )\n  }\n}\n"]}