@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/notification/notification.js

@@ -0,0 +1,838 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { getEventPath } from "../../shared/utils/event";
+import { listenForExternalBlockingSurface } from "../../shared/utils/floating-surface-dismiss";
+import { generateUniqueId } from "../../shared/utils/id";
+/**
+ * ## Design System
+ *
+ * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais,
+ * consulte o [Design System do GovBR](https://www.gov.br/ds/components/notification?tab=designer).
+ *
+ * @category Feedback
+ * @status stable
+ * @slot trigger - Elemento acionador externo responsável por abrir e fechar o painel.
+ * @slot header - Região superior do componente, para uso com subcomponentes de cabeçalho ou conteúdo customizado.
+ * @slot tabs - Região opcional para navegação por abas.
+ * @slot default - Região principal da lista de notificações.
+ * @slot footer - Região opcional para ações complementares, como "ver todas".
+ *
+ * @part base - Superfície principal do painel.
+ * @part header - Região superior do componente.
+ * @part body - Região principal do componente.
+ * @part tabs - Região de abas, quando existir.
+ * @part list - Região com rolagem onde os itens são exibidos.
+ * @part close-button - Botão de fechar do painel.
+ * @part divider - Divisor entre itens da lista.
+ */
+export class Notification {
+    constructor() {
+        this.hasFooter = false;
+        this.hasHeader = false;
+        this.hasTabs = false;
+        this.hasTrigger = false;
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Controla se o painel de notificações está aberto.
+         */
+        this.open = false;
+        /**
+         * Fecha o painel ao clicar fora da superfície.
+         */
+        this.closeOnOutsideClick = true;
+        /**
+         * Fecha o painel ao clicar novamente no acionador.
+         */
+        this.closeOnTriggerClick = true;
+        /**
+         * Faz o painel ocupar toda a largura disponível em viewports pequenas.
+         */
+        this.mobileFullscreen = true;
+        /**
+         * Habilita rolagem apenas na região de itens, preservando cabeçalho e abas fixos.
+         */
+        this.internalScroll = true;
+        /**
+         * Define o posicionamento do painel em relação ao acionador.
+         */
+        this.placement = 'bottom-end';
+        /**
+         * Define se o painel de notificações deve ser renderizado de forma estática (inline).
+         * Quando verdadeiro, o posicionamento absoluto é desativado. Ideal para centrais de notificações fixas ou documentação.
+         */
+        this.isStatic = false;
+        this.handleKeyDown = (event) => {
+            if (!this.isPanelVisible())
+                return;
+            if (event.key === 'Escape') {
+                this.hide('escape');
+                return;
+            }
+            if (event.key === 'Tab') {
+                this.handleFocusTrap(event);
+            }
+        };
+        this.handleOutsideClick = (event) => {
+            if (!this.isPanelVisible())
+                return;
+            const target = event.target;
+            const isClickInside = this.el.contains(target);
+            if (!isClickInside && this.closeOnOutsideClick) {
+                this.hide('outside-click');
+            }
+        };
+        this.windowListenersAttached = false;
+        this.pendingCloseReason = 'programmatic';
+        this.previousFocus = null;
+        this.getFocusableElements = () => {
+            const selector = [
+                'a[href]:not([tabindex="-1"])',
+                'button:not([disabled]):not([tabindex="-1"])',
+                'input:not([disabled]):not([tabindex="-1"])',
+                'select:not([disabled]):not([tabindex="-1"])',
+                'textarea:not([disabled]):not([tabindex="-1"])',
+                '[tabindex="0"]',
+            ].join(', ');
+            const collect = (root) => {
+                const found = [];
+                root.querySelectorAll(selector).forEach((el) => {
+                    found.push(el);
+                });
+                root.querySelectorAll('*').forEach((el) => {
+                    if (el.shadowRoot) {
+                        found.push(...collect(el.shadowRoot));
+                    }
+                });
+                return found;
+            };
+            const fromShadow = this.el.shadowRoot ? collect(this.el.shadowRoot) : [];
+            const fromLight = collect(this.el);
+            return [...new Set([...fromShadow, ...fromLight])].filter((el) => {
+                const style = window.getComputedStyle(el);
+                return style.display !== 'none' && style.visibility !== 'hidden';
+            });
+        };
+        this.handleFocusTrap = (event) => {
+            const focusable = this.getFocusableElements();
+            if (!focusable.length)
+                return;
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const path = getEventPath(event);
+            const activeIndex = focusable.findIndex((el) => path.includes(el));
+            if (activeIndex === -1)
+                return;
+            if (event.shiftKey && activeIndex === 0) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && activeIndex === focusable.length - 1) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        this.isPanelVisible = () => {
+            if (this.open)
+                return true;
+            if (!this.isStatic)
+                return false;
+            const panel = this.el.shadowRoot?.querySelector('.br-notification');
+            return panel ? panel.offsetWidth > 0 && panel.offsetHeight > 0 : false;
+        };
+        this.getTriggerElements = () => {
+            const triggerSlot = this.el.shadowRoot?.querySelector('slot[name="trigger"]');
+            if (!triggerSlot)
+                return [];
+            return triggerSlot.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);
+        };
+        this.updateTriggerAria = (expanded) => {
+            const triggers = this.getTriggerElements();
+            for (const trigger of triggers) {
+                trigger.setAttribute('aria-expanded', String(expanded));
+            }
+        };
+        this.getCssClassMap = () => {
+            return {
+                'br-notification': true,
+                'mobile-fullscreen': this.mobileFullscreen,
+                'internal-scroll': this.internalScroll,
+                'is-open': this.open,
+                'is-static': this.isStatic,
+                [`placement-${this.placement}`]: true,
+            };
+        };
+        this.checkSlotVisibility = (slotName) => {
+            const slot = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
+            if (!slot)
+                return;
+            const nodes = slot.assignedNodes();
+            const hasContent = nodes.some((node) => {
+                if (node.nodeType === Node.ELEMENT_NODE)
+                    return true;
+                if (node.nodeType === Node.TEXT_NODE)
+                    return node.textContent.trim() !== '';
+                return false;
+            });
+            if (slotName === 'header')
+                this.hasHeader = hasContent;
+            if (slotName === 'tabs')
+                this.hasTabs = hasContent;
+            if (slotName === 'footer')
+                this.hasFooter = hasContent;
+            if (slotName === 'trigger')
+                this.hasTrigger = hasContent;
+        };
+    }
+    handleOpenChange(newValue) {
+        this.brOpenChange.emit({ open: newValue });
+        this.updateTriggerAria(newValue);
+        if (newValue) {
+            this.attachBlockingSurfaceListener();
+            this.attachWindowListeners();
+            this.brNotificationOpen.emit();
+            this.previousFocus = document.activeElement;
+            requestAnimationFrame(() => {
+                const focusable = this.getFocusableElements();
+                focusable[0]?.focus();
+            });
+        }
+        else {
+            this.detachBlockingSurfaceListener();
+            this.detachWindowListeners();
+            this.brNotificationClose.emit({ reason: this.pendingCloseReason });
+            this.pendingCloseReason = 'programmatic';
+            this.previousFocus?.focus();
+            this.previousFocus = null;
+        }
+    }
+    componentDidLoad() {
+        this.checkSlotVisibility('header');
+        this.checkSlotVisibility('tabs');
+        this.checkSlotVisibility('footer');
+        this.checkSlotVisibility('trigger');
+        this.updateTriggerAria(this.open);
+        if (this.open) {
+            this.attachBlockingSurfaceListener();
+            this.attachWindowListeners();
+        }
+    }
+    disconnectedCallback() {
+        this.detachWindowListeners();
+        this.detachBlockingSurfaceListener();
+    }
+    attachBlockingSurfaceListener() {
+        this.cleanupBlockingSurfaceDismissal ?? (this.cleanupBlockingSurfaceDismissal = listenForExternalBlockingSurface(this.el, () => {
+            if (!this.isStatic)
+                void this.hide('programmatic');
+        }));
+    }
+    detachBlockingSurfaceListener() {
+        this.cleanupBlockingSurfaceDismissal?.();
+        this.cleanupBlockingSurfaceDismissal = undefined;
+    }
+    attachWindowListeners() {
+        if (this.windowListenersAttached)
+            return;
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('click', this.handleOutsideClick);
+        this.windowListenersAttached = true;
+    }
+    detachWindowListeners() {
+        if (!this.windowListenersAttached)
+            return;
+        window.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('click', this.handleOutsideClick);
+        this.windowListenersAttached = false;
+    }
+    handleNotificationItemSelect(event) {
+        this.brNotificationItemClick.emit({ itemId: event.detail?.itemId });
+    }
+    handleNotificationHeaderClose() {
+        this.hide('close-button');
+    }
+    handleNotificationTabChange(event) {
+        this.brNotificationTabChange.emit({ value: event.detail?.value });
+    }
+    /**
+     * Abre o painel de notificações.
+     */
+    async show() {
+        if (this.open)
+            return;
+        this.open = true;
+    }
+    /**
+     * Fecha o painel de notificações.
+     */
+    async hide(reason = 'programmatic') {
+        if (this.isStatic) {
+            this.brNotificationClose.emit({ reason });
+            const parentDropdown = this.el.closest('br-dropdown');
+            if (parentDropdown?.hide) {
+                await parentDropdown.hide();
+            }
+            return;
+        }
+        if (!this.open)
+            return;
+        this.pendingCloseReason = reason;
+        this.open = false;
+    }
+    /**
+     * Alterna o estado aberto/fechado.
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide('trigger-click');
+        }
+        else {
+            await this.show();
+        }
+    }
+    /**
+     * Move o foco de volta para o acionador.
+     */
+    async focusTrigger() {
+        const triggerSlot = this.el.shadowRoot?.querySelector('slot[name="trigger"]');
+        if (triggerSlot) {
+            const nodes = triggerSlot.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);
+            if (nodes.length > 0) {
+                nodes[0].focus();
+            }
+        }
+    }
+    /**
+     * Move o foco para o primeiro item interativo da lista.
+     */
+    async focusFirstItem() {
+        const firstItem = this.el.querySelector('br-notification-item[clickable]');
+        await firstItem?.callFocus?.();
+    }
+    render() {
+        const style = {};
+        if (this.width)
+            style.width = this.width;
+        if (this.maxWidth)
+            style['--notification-width'] = this.maxWidth;
+        if (this.maxHeight)
+            style['--notification-height'] = this.maxHeight;
+        return (h(Host, { key: 'a7fcc9ae9c1e1cdc0b88d0bb6db305cbbb4e6890', "mobile-fullscreen": this.mobileFullscreen, "internal-scroll": this.internalScroll, open: this.open, style: !this.isStatic ? { zIndex: 'var(--z-index-layer-1)' } : undefined }, h("div", { key: '380869cab4e10b463fea8db4f37fa4eff9755fd8', class: { 'br-notification__trigger': true, 'd-none': !this.hasTrigger }, role: "button", tabIndex: 0, onClick: () => this.toggle(), onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    this.toggle();
+                }
+            } }, h("slot", { key: 'b62966800264826e5ec3d0ed207111b5a966caf5', name: "trigger", onSlotchange: () => this.checkSlotVisibility('trigger') })), h("div", { key: '51644f60967640e10b3cf1042f24ff8e61e2cee0', class: this.getCssClassMap(), id: this.customId, style: style, part: "base", "aria-label": this.label, "aria-hidden": !this.open ? 'true' : null, role: "dialog", "aria-modal": "true" }, h("div", { key: '143b970dd46d04409f51d019a11220a026100e51', part: "header", class: { 'br-notification__header': true, 'd-none': !this.hasHeader } }, h("slot", { key: 'dbb0f9f4888f51c2850d7cefaa13aded21f77bd5', name: "header", onSlotchange: () => this.checkSlotVisibility('header') })), h("div", { key: 'd6d6d3cc55d97d4a35214100e78332c7ae1e45e4', part: "tabs", class: { 'br-notification__tabs': true, 'd-none': !this.hasTabs } }, h("slot", { key: '8e243f393e351e68f77ac96085d25b92309de3a1', name: "tabs", onSlotchange: () => this.checkSlotVisibility('tabs') })), h("div", { key: '2b627ef82f4c3ff6f1208df0d50348d558a23734', part: "body", class: "br-notification__body" }, h("slot", { key: 'f0168490a486c2436213ffd6097979335707dc1e' })), h("div", { key: '53938c47cb8c0dc6547d56d0fe218cb51c233465', part: "footer", class: { 'br-notification__footer': true, 'd-none': !this.hasFooter } }, h("slot", { key: 'a594a95fe233a415885ec0b2f5477b5313eab20c', name: "footer", onSlotchange: () => this.checkSlotVisibility('footer') })))));
+    }
+    static get is() { return "br-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome acess\u00EDvel do painel de notifica\u00E7\u00F5es. Exposto via `aria-label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla se o painel de notifica\u00E7\u00F5es est\u00E1 aberto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "closeOnOutsideClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fecha o painel ao clicar fora da superf\u00EDcie."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "close-on-outside-click",
+                "defaultValue": "true"
+            },
+            "closeOnTriggerClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fecha o painel ao clicar novamente no acionador."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "close-on-trigger-click",
+                "defaultValue": "true"
+            },
+            "mobileFullscreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Faz o painel ocupar toda a largura dispon\u00EDvel em viewports pequenas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mobile-fullscreen",
+                "defaultValue": "true"
+            },
+            "internalScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita rolagem apenas na regi\u00E3o de itens, preservando cabe\u00E7alho e abas fixos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "internal-scroll",
+                "defaultValue": "true"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NotificationPlacement",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "NotificationPlacement": {
+                            "location": "import",
+                            "path": "./notification.types",
+                            "id": "src/components/notification/notification.types.ts::NotificationPlacement",
+                            "referenceLocation": "NotificationPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o posicionamento do painel em rela\u00E7\u00E3o ao acionador."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'bottom-end'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura expl\u00EDcita do painel. Quando n\u00E3o definida, o painel dimensiona conforme o conte\u00FAdo,\nrespeitando o `max-width` definido por spec ou pelo prop `maxWidth`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "width"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sobrescreve o `max-width` do painel. Por padr\u00E3o, o CSS aplica `max-width: 50vw` em viewports \u2265576px\nconforme a especifica\u00E7\u00E3o do Design System."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-width"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sobrescreve a altura m\u00E1xima do painel.\nPor padr\u00E3o, o CSS aplica `calc(100vh - 86px)` via token `--notification-height`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-height"
+            },
+            "isStatic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o painel de notifica\u00E7\u00F5es deve ser renderizado de forma est\u00E1tica (inline).\nQuando verdadeiro, o posicionamento absoluto \u00E9 desativado. Ideal para centrais de notifica\u00E7\u00F5es fixas ou documenta\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-static",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "hasHeader": {},
+            "hasTabs": {},
+            "hasTrigger": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brOpenChange",
+                "name": "brOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Informa a mudan\u00E7a de estado aberto/fechado do painel."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "brNotificationOpen",
+                "name": "brNotificationOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Informa que o painel foi aberto."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brNotificationClose",
+                "name": "brNotificationClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Informa que o painel foi fechado."
+                },
+                "complexType": {
+                    "original": "NotificationCloseDetail",
+                    "resolved": "{ reason?: NotificationCloseReason; }",
+                    "references": {
+                        "NotificationCloseDetail": {
+                            "location": "import",
+                            "path": "./notification.types",
+                            "id": "src/components/notification/notification.types.ts::NotificationCloseDetail",
+                            "referenceLocation": "NotificationCloseDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brNotificationItemClick",
+                "name": "brNotificationItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Exp\u00F5e a intera\u00E7\u00E3o com um item da lista."
+                },
+                "complexType": {
+                    "original": "NotificationItemClickDetail",
+                    "resolved": "{ itemId?: string; }",
+                    "references": {
+                        "NotificationItemClickDetail": {
+                            "location": "import",
+                            "path": "./notification.types",
+                            "id": "src/components/notification/notification.types.ts::NotificationItemClickDetail",
+                            "referenceLocation": "NotificationItemClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brNotificationTabChange",
+                "name": "brNotificationTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Informa troca de aba quando o componente possuir navega\u00E7\u00E3o por tabs."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre o painel de notifica\u00E7\u00F5es.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "(reason?: NotificationCloseReason) => Promise<void>",
+                    "parameters": [{
+                            "name": "reason",
+                            "type": "\"close-button\" | \"outside-click\" | \"trigger-click\" | \"programmatic\" | \"escape\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NotificationCloseReason": {
+                            "location": "import",
+                            "path": "./notification.types",
+                            "id": "src/components/notification/notification.types.ts::NotificationCloseReason",
+                            "referenceLocation": "NotificationCloseReason"
+                        },
+                        "HTMLBrDropdownElement": {
+                            "location": "global",
+                            "id": "global::HTMLBrDropdownElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Fecha o painel de notifica\u00E7\u00F5es.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Alterna o estado aberto/fechado.",
+                    "tags": []
+                }
+            },
+            "focusTrigger": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLSlotElement": {
+                            "location": "global",
+                            "id": "global::HTMLSlotElement"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Move o foco de volta para o acionador.",
+                    "tags": []
+                }
+            },
+            "focusFirstItem": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLBrNotificationItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLBrNotificationItemElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Move o foco para o primeiro item interativo da lista.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "brNotificationItemSelect",
+                "method": "handleNotificationItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "brNotificationHeaderClose",
+                "method": "handleNotificationHeaderClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "brNotificationTabChange",
+                "method": "handleNotificationTabChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}