@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/pages/scripts/pageLoader.js

@@ -0,0 +1,1422 @@
+const CONTENT_ELEMENT = document.getElementById('content');
+const COMPONENTS_FILTER = document.getElementById('components-filter');
+const CLEAR_COMPONENTS_FILTER = document.getElementById('clear-components-filter');
+
+let renderedFilesContent = {};
+let currentLoadedPath = null;
+const markdownParser = window.marked;
+const DEV_SERVER_CONNECTOR_IFRAME_RE =
+  /<iframe\b[^>]*title=["']Stencil Dev Server Connector[^"']*["'][\s\S]*?<\/iframe>/gi;
+let lzStringPromise;
+
+function loadLzString() {
+  if (window.LZString) return Promise.resolve(window.LZString);
+  if (!lzStringPromise) {
+    lzStringPromise = new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = `${getBaseUrl()}/assets/lz-string.min.js`;
+      script.onload = () => resolve(window.LZString);
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+  return lzStringPromise;
+}
+
+// Decode shared state from URL parameters on initialization
+(() => {
+  const params = new URLSearchParams(window.location.search);
+  const stateParam = params.get('pg_state');
+  if (stateParam) {
+    const decode = () => {
+      try {
+        const decompressed = window.LZString?.decompressFromEncodedURIComponent(stateParam);
+        if (decompressed) window.SHARED_STATE = JSON.parse(decompressed);
+      } catch (e) {
+        console.error('Error decoding shared state:', e);
+      }
+    };
+    if (window.LZString) decode();
+    else
+      loadLzString()
+        .then(decode)
+        .catch(() => console.error('Error loading shared state decoder.'));
+  }
+})();
+
+function getBaseUrl() {
+  // Se o Pages injetou um prefixo conhecido, usa-o (terminado com /)
+  if (typeof window.WWW_PREFIX === 'string' && window.WWW_PREFIX.length > 0) {
+    return window.WWW_PREFIX.replace(/\/+$/, '');
+  }
+  const baseUrl = window.location.pathname.split('/').slice(0, -1).join('/');
+  return baseUrl === '' ? '' : baseUrl;
+}
+
+function renderExamplePreview(previewElement, source, edgeToEdge = false) {
+  const frame = previewElement.querySelector('iframe');
+  if (!frame) return;
+
+  const baseUrl = getBaseUrl();
+  const componentBundleUrl = new URL(`${baseUrl}/build/webcomponents.esm.js`, window.location.href);
+  componentBundleUrl.searchParams.set('preview-version', String(Date.now()));
+  const componentBundle = componentBundleUrl.href;
+  const frameSource = stripDevServerConnector(source);
+
+  frame.srcdoc = `<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="${window.location.href}">
+    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/core.min.css`, window.location.href).href}">
+    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/fonts/rawline/400.css`, window.location.href).href}">
+    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/fonts/raleway/wght.css`, window.location.href).href}">
+    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/fonts/fontawesome/css/all.min.css`, window.location.href).href}">
+    <style>
+      * { font-family: Rawline, Raleway, sans-serif; }
+      html, body { margin: 0; min-height: 1px; overflow: visible; }
+      body { box-sizing: border-box; padding: 24px 16px; }
+      body.wbc-preview-edge-to-edge { padding: 0; }
+      br-cookiebar, br-scrim { inset: 0; position: absolute; pointer-events: none; z-index: 1000; }
+      br-scrim { --scrim-display-mode: parent; }
+    </style>
+  </head>
+  <body${edgeToEdge ? ' class="wbc-preview-edge-to-edge"' : ''}><main data-wbc-preview-content>${frameSource}</main>
+    <script type="module" src="${componentBundle}"></script>
+    <script>
+      (() => {
+        const overlayContentSelector =
+          '[part="open-panel"], [part="default-panel"], [part="body"], .cookiebar-body, .content, .br-modal';
+        const getOverlayHeight = (overlay) => {
+          const measuredHeight = Array.from(overlay.shadowRoot?.querySelectorAll(overlayContentSelector) || []).reduce(
+            (height, element) =>
+              Math.max(height, element.scrollHeight, element.clientHeight, element.getBoundingClientRect().height),
+            0,
+          );
+          if (measuredHeight > 0) return measuredHeight;
+
+          const modal = overlay.matches('br-scrim') ? overlay.querySelector('br-modal') : overlay;
+          return modal?.shadowRoot?.querySelector('.br-modal')?.getBoundingClientRect().height || 0;
+        };
+        const getElementsIncludingShadowRoots = (root = document) => {
+          const elements = [];
+          const visit = (tree) => {
+            tree.querySelectorAll('*').forEach((element) => {
+              elements.push(element);
+              if (element.shadowRoot) visit(element.shadowRoot);
+            });
+          };
+          visit(root);
+          return elements;
+        };
+        const getFloatingHeight = () => {
+          const bodyStyle = getComputedStyle(document.body);
+          const bottomPadding = parseFloat(bodyStyle.paddingBottom) || 0;
+          return getElementsIncludingShadowRoots().reduce((height, element) => {
+            if (element.matches('br-cookiebar, br-scrim, br-modal')) return height;
+            const style = getComputedStyle(element);
+            if (style.position !== 'absolute' && style.position !== 'fixed') return height;
+            if (style.display === 'none' || style.visibility === 'hidden') return height;
+            return Math.max(height, element.getBoundingClientRect().bottom + bottomPadding);
+          }, 0);
+        };
+        const sendHeight = () => {
+          const body = document.body;
+          const bodyStyle = getComputedStyle(body);
+          const overlayHeight = Array.from(document.querySelectorAll('br-cookiebar, br-scrim, br-modal')).reduce(
+            (height, overlay) => Math.max(height, getOverlayHeight(overlay)),
+            0,
+          );
+          const verticalPadding = parseFloat(bodyStyle.paddingTop) + parseFloat(bodyStyle.paddingBottom);
+          const height = Math.ceil(
+            Math.max(
+              body.scrollHeight,
+              body.offsetHeight,
+              body.getBoundingClientRect().height,
+              overlayHeight + verticalPadding,
+              getFloatingHeight(),
+            ),
+          );
+          parent.postMessage({ type: 'wbc-preview-height', height }, '*');
+        };
+        document.querySelectorAll('br-cookiebar, br-scrim').forEach((overlay) => {
+          overlay.setAttribute('data-wbc-preview-contained', '');
+          if (overlay.matches('br-scrim')) overlay.setAttribute('display-mode', 'parent');
+        });
+        const serialize = (value, seen = new WeakSet()) => {
+          if (value instanceof Element) return '<' + value.localName + '>';
+          if (value instanceof Event) return { type: value.type };
+          if (value && typeof value === 'object') {
+            if (seen.has(value)) return '[Circular]';
+            seen.add(value);
+            if (Array.isArray(value)) return value.map((item) => serialize(item, seen));
+            return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, serialize(item, seen)]));
+          }
+          return value;
+        };
+        const sendEvent = (event, dispatchedBy = event.target) => {
+          const target = dispatchedBy instanceof Element ? dispatchedBy : dispatchedBy?.host instanceof Element ? dispatchedBy.host : null;
+          parent.postMessage({
+            type: 'wbc-preview-event',
+            eventType: event.type,
+            custom: event instanceof CustomEvent,
+            detail: event instanceof CustomEvent ? serialize(event.detail) : undefined,
+            target: target ? target.localName + (target.id ? '#' + target.id : '') : 'window',
+          }, '*');
+        };
+        ['change', 'click', 'input', 'submit'].forEach((name) => document.addEventListener(name, sendEvent, true));
+        document.addEventListener('brInternalEvent', sendEvent, true);
+        const originalDispatchEvent = EventTarget.prototype.dispatchEvent;
+        EventTarget.prototype.dispatchEvent = function dispatchEvent(event) {
+          if (event instanceof CustomEvent) sendEvent(event, this);
+          return originalDispatchEvent.call(this, event);
+        };
+        let heightFrame = 0;
+        const scheduleHeight = () => {
+          cancelAnimationFrame(heightFrame);
+          heightFrame = requestAnimationFrame(sendHeight);
+        };
+        const resizeObserver = new ResizeObserver(scheduleHeight);
+        const observeOverlayContent = () => {
+          document.querySelectorAll('br-cookiebar, br-scrim, br-modal').forEach((overlay) => {
+            overlay.shadowRoot?.querySelectorAll(overlayContentSelector).forEach((element) => {
+              resizeObserver.observe(element);
+            });
+          });
+          getElementsIncludingShadowRoots().forEach((element) => {
+            const position = getComputedStyle(element).position;
+            if (position === 'absolute' || position === 'fixed') resizeObserver.observe(element);
+          });
+        };
+        resizeObserver.observe(document.documentElement);
+        resizeObserver.observe(document.body);
+        new MutationObserver(() =>
+          requestAnimationFrame(() => {
+            observeOverlayContent();
+            scheduleHeight();
+          }),
+        ).observe(document.body, { attributes: true, childList: true, subtree: true });
+        Promise.all(
+          [...document.querySelectorAll('*')]
+            .map((element) => element.localName)
+            .filter((tag, index, tags) => tag.includes('-') && tags.indexOf(tag) === index)
+            .map((tag) => customElements.whenDefined(tag)),
+        ).then(() =>
+          requestAnimationFrame(() =>
+            requestAnimationFrame(() => {
+              observeOverlayContent();
+              scheduleHeight();
+            }),
+          ),
+        );
+        addEventListener('load', scheduleHeight);
+        scheduleHeight();
+      })();
+    </script>
+  </body>
+</html>`;
+}
+
+function stripDevServerConnector(source) {
+  return String(source || '')
+    .replace(DEV_SERVER_CONNECTOR_IFRAME_RE, '')
+    .trim();
+}
+
+function getFrameworkCode(source, framework) {
+  const html = String(source || '').trim();
+  const components = Array.from(html.matchAll(/<\/?(br-[a-z0-9-]+)/gi), (match) => match[1]);
+  const imports = [...new Set(components)].map((tag) =>
+    tag
+      .split('-')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(''),
+  );
+  const importList = imports.length > 0 ? imports.join(', ') : 'BrButton';
+  const pascalMarkup = html.replace(/(<\/?)(br-[a-z0-9-]+)/gi, (_match, prefix, tag) => {
+    return `${prefix}${tag
+      .split('-')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('')}`;
+  });
+
+  if (framework === 'javascript') {
+    return `import { ${importList} } from '@govbr-ds/webcomponents';\n\nconst example = document.querySelector('${components[0] || 'br-button'}');\n\n// Use o exemplo renderizado para adicionar comportamento com JavaScript.\nconsole.log(example);`;
+  }
+  if (framework === 'css') {
+    return `/* Customize os componentes usando CSS Parts */
+/* Exemplo:
+br-${String(location.pathname).split('/').filter(Boolean).pop() || 'component'}::part(container) {
+  background-color: #f8f9fa;
+}
+*/`;
+  }
+  if (framework === 'angular') {
+    return `import { Component } from '@angular/core';\nimport { ${importList} } from '@govbr-ds/webcomponents-angular/standalone';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [${importList}],\n  template: \`${html.replace(/`/g, '\\`')}\`,\n})\nexport class AppComponent {}`;
+  }
+  if (framework === 'react') {
+    return `import { ${importList} } from '@govbr-ds/webcomponents-react';\n\nexport default function App() {\n  return (\n    <>\n      ${pascalMarkup.replace(/\n/g, '\n      ')}\n    </>\n  );\n}`;
+  }
+  return `<script setup lang="ts">\nimport { ${importList} } from '@govbr-ds/webcomponents-vue';\n</script>\n\n<template>\n  ${pascalMarkup.replace(/\n/g, '\n  ')}\n</template>`;
+}
+
+function getFrameworkFiles(source, framework) {
+  if (framework !== 'angular') return null;
+
+  const html = String(source || '').trim();
+  const components = Array.from(html.matchAll(/<\/?(br-[a-z0-9-]+)/gi), (match) => match[1]);
+  const imports = [...new Set(components)].map((tag) =>
+    tag
+      .split('-')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(''),
+  );
+  const importList = imports.length > 0 ? imports.join(', ') : 'BrButton';
+
+  return [
+    {
+      filename: 'app.component.ts',
+      language: 'typescript',
+      code: `import { Component } from '@angular/core'\nimport { ${importList} } from '@govbr-ds/webcomponents-angular/standalone'\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [${importList}],\n  templateUrl: './app.component.html',\n})\nexport class AppComponent {}`,
+    },
+    { filename: 'app.component.html', language: 'html', code: html },
+  ];
+}
+
+function createReadOnlyFrameworkTab(label, icon, tabId, source, framework) {
+  const tab = document.createElement('br-tab-item');
+  tab.setAttribute('label', label);
+  tab.setAttribute('icon', icon);
+  tab.setAttribute('icon-only', 'true');
+  tab.setAttribute('title', label);
+  tab.setAttribute('tab-item-id', tabId);
+  tab.dataset.framework = framework;
+
+  const files = getFrameworkFiles(source, framework);
+  tab._frameworkFiles = files;
+
+  if (files?.length > 1) {
+    const fileTabs = document.createElement('div');
+    fileTabs.className = 'wbc-framework-file-tabs';
+    fileTabs.setAttribute('role', 'tablist');
+    files.forEach((file, index) => {
+      const fileTab = document.createElement('button');
+      fileTab.className = `wbc-framework-file-tab${index === 0 ? ' is-active' : ''}`;
+      fileTab.type = 'button';
+      fileTab.dataset.filename = file.filename;
+      fileTab.setAttribute('aria-selected', String(index === 0));
+      fileTab.setAttribute('role', 'tab');
+      fileTab.textContent = file.filename;
+      fileTabs.appendChild(fileTab);
+    });
+    tab.appendChild(fileTabs);
+  }
+
+  const code = document.createElement('pre');
+  code.className = 'wbc-framework-code';
+  code.dataset.framework = framework;
+  code.dataset.filename = files?.[0]?.filename || '';
+  code.textContent = files?.[0]?.code || getFrameworkCode(source, framework);
+  tab.appendChild(code);
+  return tab;
+}
+
+async function getPreviewAxeContext(previewFrame) {
+  const previewDocument = previewFrame.contentDocument;
+  const previewWindow = previewFrame.contentWindow;
+  if (!previewDocument?.body || !previewWindow) {
+    throw new Error('O conteúdo do preview ainda não está disponível.');
+  }
+
+  if (!previewWindow.axe) {
+    const axeScriptUrl = new URL(`${getBaseUrl()}/assets/axe-core.min.js`, window.location.href).href;
+
+    const response = await fetch(axeScriptUrl);
+    if (!response.ok) throw new Error('Não foi possível carregar o Axe-Core no preview.');
+
+    const axeScript = previewDocument.createElement('script');
+    axeScript.textContent = await response.text();
+    previewDocument.head.appendChild(axeScript);
+  }
+
+  const previewContent = previewDocument.querySelector('[data-wbc-preview-content]');
+  if (!previewContent) throw new Error('Não foi possível localizar o conteúdo do exemplo.');
+
+  return { axe: previewWindow.axe, previewContent };
+}
+
+function getExampleHash(file) {
+  return `#${encodeURIComponent(file)}`;
+}
+
+function getRequestedExampleFile() {
+  if (!window.location.hash) return null;
+  try {
+    return decodeURIComponent(window.location.hash.slice(1));
+  } catch {
+    return window.location.hash.slice(1);
+  }
+}
+
+function createExampleElement(path, file, text, isExpanded = false, onOpen) {
+  text = stripDevServerConnector(text);
+  const contentDiv = document.createElement('br-item');
+  contentDiv.classList.add('file', 'wbc-example');
+  contentDiv.setAttribute('data-no-selection', '');
+  contentDiv.dataset.exampleFile = file;
+  const controlsScope = `wbc-example-${path}-${file}`.replace(/[^a-zA-Z0-9_-]/g, '-');
+  contentDiv.dataset.controlsScope = controlsScope;
+
+  const dropdown = document.createElement('br-dropdown');
+  dropdown.className = 'wbc-example-dropdown';
+  if (isExpanded) dropdown.setAttribute('is-open', '');
+  let initializeExample;
+  let isInitialized = false;
+
+  const preview = document.createElement('div');
+  preview.className = 'wbc-example-preview';
+  let previewFrame;
+
+  // --- EDITOR CONTAINER ---
+  const editorContainer = document.createElement('div');
+  editorContainer.className = 'wbc-example-editor-container';
+
+  const tabComponent = document.createElement('br-tab');
+  tabComponent.setAttribute('density', 'small');
+  tabComponent.setAttribute('active-tab-id', 'code-tab');
+
+  const codeTabItem = document.createElement('br-tab-item');
+  codeTabItem.setAttribute('label', 'HTML');
+  codeTabItem.setAttribute('icon', 'fab fa-html5');
+  codeTabItem.setAttribute('icon-only', 'true');
+  codeTabItem.setAttribute('title', 'HTML');
+  codeTabItem.setAttribute('tab-item-id', 'code-tab');
+  codeTabItem.setAttribute('active', 'true');
+  codeTabItem.setAttribute('is-active', 'true');
+
+  const eventsTabItem = document.createElement('br-tab-item');
+  eventsTabItem.setAttribute('label', 'Console');
+  eventsTabItem.setAttribute('icon', 'fas fa-terminal');
+  eventsTabItem.setAttribute('icon-only', 'true');
+  eventsTabItem.setAttribute('title', 'Console');
+  eventsTabItem.setAttribute('tab-item-id', 'events-tab');
+
+  const controlsTabItem = document.createElement('br-tab-item');
+  controlsTabItem.setAttribute('label', 'Controles');
+  controlsTabItem.setAttribute('icon', 'fas fa-sliders-h');
+  controlsTabItem.setAttribute('icon-only', 'true');
+  controlsTabItem.setAttribute('title', 'Controles');
+  controlsTabItem.setAttribute('tab-item-id', 'controls-tab');
+
+  const javascriptTabItem = createReadOnlyFrameworkTab('JS', 'fab fa-js', 'javascript-tab', text, 'javascript');
+  const cssTabItem = createReadOnlyFrameworkTab('CSS', 'fab fa-css3-alt', 'css-tab', text, 'css');
+  const angularTabItem = createReadOnlyFrameworkTab('Angular', 'fab fa-angular', 'angular-tab', text, 'angular');
+  const reactTabItem = createReadOnlyFrameworkTab('React', 'fab fa-react', 'react-tab', text, 'react');
+  const vueTabItem = createReadOnlyFrameworkTab('Vue', 'fab fa-vuejs', 'vue-tab', text, 'vue');
+  const frameworkTabItems = [javascriptTabItem, cssTabItem, angularTabItem, reactTabItem, vueTabItem];
+  const frameworkEditors = new Map();
+  const refreshFrameworkEditors = () => {
+    requestAnimationFrame(() => {
+      frameworkEditors.forEach((editor) => {
+        editor.refresh?.();
+      });
+    });
+  };
+  const getFrameworkEditorLanguage = (framework) => {
+    if (framework === 'css') return 'css';
+    if (framework === 'angular') return 'typescript';
+    if (framework === 'react') return 'tsx';
+    return 'html';
+  };
+
+  const selectFrameworkFile = (tab, filename, editor = frameworkEditors.get(tab)) => {
+    const files = tab._frameworkFiles || [];
+    const file = files.find((item) => item.filename === filename) || files[0];
+    if (!file) return;
+
+    tab.dataset.activeFilename = file.filename;
+    tab.querySelectorAll('.wbc-framework-file-tab').forEach((fileTab) => {
+      const isActive = fileTab.dataset.filename === file.filename;
+      fileTab.classList.toggle('is-active', isActive);
+      fileTab.setAttribute('aria-selected', String(isActive));
+    });
+
+    const code = tab.querySelector('.wbc-framework-code');
+    if (editor) {
+      editor.setLanguage?.(file.language);
+      editor.setValue(file.code);
+    } else if (code) {
+      code.dataset.filename = file.filename;
+      code.textContent = file.code;
+    }
+  };
+
+  const updateFrameworkCode = (source) => {
+    frameworkTabItems.forEach((tab) => {
+      const framework = tab.dataset.framework;
+      const files = getFrameworkFiles(source, framework);
+      tab._frameworkFiles = files;
+      const editor = frameworkEditors.get(tab);
+      if (files) {
+        selectFrameworkFile(tab, tab.dataset.activeFilename, editor);
+        return;
+      }
+
+      const value = getFrameworkCode(source, framework);
+      if (editor) editor.setValue(value);
+      else {
+        const code = tab.querySelector('.wbc-framework-code');
+        if (code) code.textContent = value;
+      }
+    });
+  };
+
+  const createActionButton = (iconClass, tooltipText, ariaLabel, onClick) => {
+    const tooltip = document.createElement('br-tooltip');
+    tooltip.setAttribute('position', 'bottom');
+
+    const button = document.createElement('br-button');
+    button.setAttribute('slot', 'trigger');
+    button.setAttribute('shape', 'circle');
+    button.setAttribute('density', 'small');
+    button.setAttribute('emphasis', 'secondary');
+    button.setAttribute('aria-label', ariaLabel);
+
+    const icon = document.createElement('i');
+    icon.className = iconClass;
+    button.appendChild(icon);
+
+    const tooltipContent = document.createElement('div');
+    tooltipContent.setAttribute('slot', 'content');
+    tooltipContent.textContent = tooltipText;
+
+    tooltip.appendChild(button);
+    tooltip.appendChild(tooltipContent);
+
+    button.addEventListener('click', onClick);
+
+    return { tooltip, button, icon, tooltipContent };
+  };
+
+  const editorState = { value: text };
+  let editorApi = null;
+  const getEditorValue = () => editorApi?.getValue() ?? editorState.value;
+  const refreshEditor = () => {
+    requestAnimationFrame(() => requestAnimationFrame(() => editorApi?.refresh?.()));
+  };
+
+  // 1. Copy Action
+  const copyAction = createActionButton('fas fa-copy', 'Copiar código', 'Copiar código', async () => {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(getEditorValue());
+      } else {
+        const fallback = document.createElement('textarea');
+        fallback.value = getEditorValue();
+        fallback.setAttribute('readonly', '');
+        fallback.style.position = 'fixed';
+        fallback.style.opacity = '0';
+        document.body.appendChild(fallback);
+        fallback.select();
+        document.execCommand('copy');
+        fallback.remove();
+      }
+      copyAction.icon.className = 'fas fa-check text-success';
+      copyAction.tooltipContent.textContent = 'Copiado!';
+    } catch {
+      copyAction.tooltipContent.textContent = 'Erro ao copiar';
+    }
+    setTimeout(() => {
+      copyAction.icon.className = 'fas fa-copy';
+      copyAction.tooltipContent.textContent = 'Copiar código';
+    }, 2000);
+  });
+
+  // 2. Share Action
+  const shareAction = createActionButton(
+    'fas fa-share-alt',
+    'Compartilhar exemplo',
+    'Compartilhar exemplo',
+    async () => {
+      try {
+        await loadLzString();
+      } catch {
+        alert('Biblioteca de compartilhamento não carregada.');
+        return;
+      }
+      const state = {
+        p: path,
+        f: file,
+        h: getEditorValue(),
+      };
+      try {
+        const json = JSON.stringify(state);
+        const encoded = window.LZString.compressToEncodedURIComponent(json);
+        const url = new URL(window.location.href);
+        url.searchParams.set('pg_state', encoded);
+        url.hash = getExampleHash(file);
+
+        await navigator.clipboard.writeText(url.toString());
+
+        shareAction.icon.className = 'fas fa-check text-success';
+        shareAction.tooltipContent.textContent = 'Link copiado!';
+        setTimeout(() => {
+          shareAction.icon.className = 'fas fa-share-alt';
+          shareAction.tooltipContent.textContent = 'Compartilhar exemplo';
+        }, 2000);
+      } catch (err) {
+        console.error(err);
+        shareAction.tooltipContent.textContent = 'Erro ao compartilhar';
+        setTimeout(() => {
+          shareAction.icon.className = 'fas fa-share-alt';
+          shareAction.tooltipContent.textContent = 'Compartilhar exemplo';
+        }, 2000);
+      }
+    },
+  );
+
+  // 3. Fullscreen Action
+  const fsAction = createActionButton('fas fa-expand-arrows-alt', 'Tela cheia', 'Tela cheia', () => {
+    const isFullscreen = contentDiv.classList.toggle('is-fullscreen');
+    if (isFullscreen) {
+      fsAction.icon.className = 'fas fa-compress-arrows-alt';
+      fsAction.tooltipContent.textContent = 'Fechar tela cheia';
+      requestAnimationFrame(() => editorApi?.refresh?.());
+    } else {
+      fsAction.icon.className = 'fas fa-expand-arrows-alt';
+      fsAction.tooltipContent.textContent = 'Tela cheia';
+    }
+  });
+
+  // --- EXAMPLE CARD HEADER ---
+  const header = document.createElement('div');
+  header.className = 'wbc-example-header';
+
+  const title = document.createElement('h3');
+  title.textContent = file;
+  header.appendChild(title);
+
+  // Group all actions and toggle on the right
+  const headerActions = document.createElement('div');
+  headerActions.className = 'wbc-example-header-actions';
+
+  const exampleToggleTooltip = document.createElement('br-tooltip');
+  exampleToggleTooltip.setAttribute('position', 'bottom');
+
+  const exampleToggle = document.createElement('br-button');
+  exampleToggle.className = 'wbc-example-toggle';
+  exampleToggle.setAttribute('density', 'small');
+  exampleToggle.setAttribute('emphasis', 'secondary');
+  exampleToggle.setAttribute('shape', 'circle');
+  exampleToggle.setAttribute('aria-label', isExpanded ? 'Recolher exemplo' : 'Expandir exemplo');
+  exampleToggle.setAttribute('slot', 'trigger');
+
+  const exampleIcon = document.createElement('i');
+  exampleIcon.className = `fas fa-chevron-${isExpanded ? 'up' : 'down'}`;
+  exampleToggle.appendChild(exampleIcon);
+
+  const exampleToggleTooltipContent = document.createElement('div');
+  exampleToggleTooltipContent.setAttribute('slot', 'content');
+  exampleToggleTooltipContent.setAttribute('position', 'bottom');
+  exampleToggleTooltipContent.textContent = isExpanded ? 'Recolher exemplo' : 'Expandir exemplo';
+
+  exampleToggleTooltip.append(exampleToggle, exampleToggleTooltipContent);
+
+  header.setAttribute('slot', 'trigger');
+  header.addEventListener('click', (event) => {
+    if (event.target.closest('.wbc-example-header-actions') && !event.target.closest('.wbc-example-toggle')) {
+      event.stopPropagation();
+    }
+  });
+
+  const updateExampleToggle = (open) => {
+    exampleIcon.className = `fas fa-chevron-${open ? 'up' : 'down'}`;
+    exampleToggle.setAttribute('aria-label', open ? 'Recolher exemplo' : 'Expandir exemplo');
+    exampleToggleTooltipContent.textContent = open ? 'Recolher exemplo' : 'Expandir exemplo';
+    if (open) requestAnimationFrame(() => editorApi?.refresh?.());
+  };
+
+  dropdown.addEventListener('brDropdownOpenChange', (event) => {
+    const open = event.detail.open;
+    updateExampleToggle(open);
+    if (open) {
+      if (!isInitialized) {
+        dropdown.append(preview, fullscreenBottomPanel);
+        initializeExample?.();
+        isInitialized = true;
+      }
+      onOpen?.(file, contentDiv);
+    } else if (window.location.hash === getExampleHash(file)) {
+      window.history.replaceState({}, '', `${window.location.pathname}${window.location.search}`);
+    }
+  });
+
+  headerActions.append(copyAction.tooltip, shareAction.tooltip, fsAction.tooltip, exampleToggleTooltip);
+  header.appendChild(headerActions);
+
+  const editorWrapper = document.createElement('div');
+  editorWrapper.className = 'wbc-example-editor-wrapper';
+
+  const eventsWrapper = document.createElement('div');
+  eventsWrapper.className = 'wbc-example-events-wrapper';
+
+  const eventsHeader = document.createElement('div');
+  eventsHeader.className = 'wbc-events-header';
+
+  const filterContainer = document.createElement('div');
+  filterContainer.className = 'wbc-events-filter-container';
+  filterContainer.style.display = 'flex';
+  filterContainer.style.gap = '8px';
+  filterContainer.style.alignItems = 'flex-end';
+  filterContainer.style.marginBottom = '8px';
+
+  const eventFilterInput = document.createElement('br-input');
+  eventFilterInput.setAttribute('placeholder', 'Filtrar eventos...');
+  eventFilterInput.setAttribute('density', 'small');
+  eventFilterInput.style.flex = '1';
+
+  const copyEventsAction = createActionButton(
+    'fas fa-copy',
+    'Copiar lista de eventos',
+    'Copiar lista de eventos',
+    async () => {
+      const visibleItems = Array.from(eventsList.querySelectorAll('li')).filter((li) => li.style.display !== 'none');
+      const textToCopy = visibleItems
+        .map((li) => {
+          const name = li.querySelector('.wbc-event-console-event-name').textContent;
+          const target = li.querySelector('.wbc-event-console-target').textContent;
+          const payload = li.querySelector('.wbc-event-console-detail')?.textContent || '';
+          return `${name}${target}${payload ? `\nPayload: ${payload}` : ''}`;
+        })
+        .join('\n---\n');
+
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(textToCopy);
+        }
+        copyEventsAction.icon.className = 'fas fa-check text-success';
+        copyEventsAction.tooltipContent.textContent = 'Copiado!';
+      } catch (err) {
+        console.error('Erro ao copiar eventos:', err);
+      }
+      setTimeout(() => {
+        copyEventsAction.icon.className = 'fas fa-copy';
+        copyEventsAction.tooltipContent.textContent = 'Copiar lista de eventos';
+      }, 2000);
+    },
+  );
+
+  filterContainer.append(eventFilterInput, copyEventsAction.tooltip);
+
+  const eventsHelp = document.createElement('p');
+  eventsHelp.className = 'wbc-events-help';
+  eventsHelp.textContent = 'Eventos emitidos pelo componente aparecem abaixo.';
+
+  const eventsActions = document.createElement('div');
+  eventsActions.className = 'wbc-events-actions';
+  eventsActions.style.display = 'flex';
+  eventsActions.style.gap = '5px';
+
+  const pauseBtn = document.createElement('br-button');
+  pauseBtn.setAttribute('density', 'small');
+  pauseBtn.setAttribute('emphasis', 'secondary');
+  pauseBtn.textContent = 'Pausar';
+
+  const clearBtn = document.createElement('br-button');
+  clearBtn.setAttribute('density', 'small');
+  clearBtn.setAttribute('emphasis', 'secondary');
+  clearBtn.textContent = 'Limpar';
+
+  eventsActions.append(pauseBtn, clearBtn);
+  eventsHeader.append(eventsHelp, filterContainer, eventsActions);
+
+  const eventsList = document.createElement('ol');
+  eventsList.className = 'wbc-events-list';
+
+  eventsWrapper.append(eventsHeader, eventsList);
+
+  const applyFilter = () => {
+    const val = String(eventFilterInput.value ?? '').toLowerCase();
+    Array.from(eventsList.children).forEach((li) => {
+      const text = li.textContent.toLowerCase();
+      li.style.display = text.includes(val) ? '' : 'none';
+    });
+  };
+
+  eventFilterInput.addEventListener('input', applyFilter);
+  eventFilterInput.addEventListener('valueChange', applyFilter);
+
+  let newEventsCount = 0;
+  let isPaused = false;
+
+  pauseBtn.addEventListener('click', () => {
+    isPaused = !isPaused;
+    pauseBtn.textContent = isPaused ? 'Continuar' : 'Pausar';
+  });
+
+  clearBtn.addEventListener('click', () => {
+    eventsList.replaceChildren();
+    eventsTabItem.setAttribute('label', 'Console');
+    newEventsCount = 0;
+  });
+
+  const serialize = (value) => {
+    if (value === undefined) return '';
+    try {
+      return JSON.stringify(
+        value,
+        (_key, nestedValue) => {
+          if (nestedValue instanceof Element) {
+            return `<${nestedValue.localName}>`;
+          }
+          if (nestedValue instanceof Event) {
+            return { type: nestedValue.type };
+          }
+          return nestedValue;
+        },
+        2,
+      );
+    } catch {
+      return String(value);
+    }
+  };
+
+  const describeTarget = (target) => {
+    if (!(target instanceof Element)) return 'window';
+    const id = target.id ? `#${target.id}` : '';
+    const classes = target.classList.length > 0 ? `.${Array.from(target.classList).slice(0, 2).join('.')}` : '';
+    return `${target.localName}${id}${classes}`;
+  };
+
+  const addEventEntry = (event, dispatchedBy, targetDescription) => {
+    if (isPaused) return;
+
+    const item = document.createElement('li');
+    const name = document.createElement('span');
+    const target = document.createElement('span');
+
+    name.className = 'wbc-event-console-event-name';
+    name.textContent = event.type;
+    target.className = 'wbc-event-console-target';
+    target.textContent = ` — ${targetDescription || describeTarget(event.target || dispatchedBy)}`;
+    item.append(name, target);
+
+    if (event instanceof CustomEvent && event.detail !== undefined && event.detail !== null) {
+      const detailsEl = document.createElement('details');
+      detailsEl.className = 'wbc-event-console-details-container';
+
+      const summaryEl = document.createElement('summary');
+      summaryEl.textContent = 'payload';
+
+      const preEl = document.createElement('pre');
+      preEl.className = 'wbc-event-console-detail';
+      preEl.textContent = serialize(event.detail);
+
+      detailsEl.append(summaryEl, preEl);
+      item.appendChild(detailsEl);
+    }
+
+    eventsList.prepend(item);
+    applyFilter(); // Garante que novos eventos respeitem o filtro atual
+
+    const maxEntries = 100;
+    while (eventsList.children.length > maxEntries) {
+      eventsList.lastElementChild?.remove();
+    }
+
+    const isActive = eventsTabItem.getAttribute('is-active') === 'true';
+    if (!isActive) {
+      newEventsCount++;
+      eventsTabItem.setAttribute('label', `Console (${newEventsCount})`);
+    }
+  };
+
+  window.WBCActiveRecorders = window.WBCActiveRecorders || [];
+  const recorder = {
+    preview,
+    addEvent: addEventEntry,
+  };
+  window.addEventListener('message', (event) => {
+    if (!previewFrame || event.source !== previewFrame.contentWindow || !event.data?.type?.startsWith('wbc-preview-'))
+      return;
+    if (event.data.type === 'wbc-preview-height') {
+      const maxHeight = contentDiv.classList.contains('is-fullscreen') ? Infinity : window.innerHeight * 0.75;
+      previewFrame.style.height = `${Math.max(1, Math.min(event.data.height, maxHeight))}px`;
+    } else if (event.data.type === 'wbc-preview-event') {
+      const bridgedEvent = event.data.custom
+        ? new CustomEvent(event.data.eventType, { detail: event.data.detail })
+        : new Event(event.data.eventType);
+      addEventEntry(bridgedEvent, previewFrame, event.data.target);
+    }
+  });
+  window.WBCActiveRecorders.push(recorder);
+  window.WBCRegisterNativeEventRecorder?.(recorder);
+
+  const setEditorValue = (value) => {
+    editorState.value = value;
+    editorApi?.setValue(value);
+    applyEditorValue(value);
+  };
+
+  tabComponent.addEventListener('brTabChange', (event) => {
+    const activeTabId = event.detail.tabId;
+    if (activeTabId !== 'code-tab') {
+      eventsTabItem.setAttribute('label', 'Console');
+      newEventsCount = 0;
+    }
+    if (frameworkTabItems.some((tab) => tab.getAttribute('tab-item-id') === activeTabId)) {
+      refreshFrameworkEditors();
+    }
+  });
+
+  codeTabItem.appendChild(editorWrapper);
+  eventsTabItem.appendChild(eventsWrapper);
+
+  // --- ACCESSIBILITY TAB ---
+  const a11yTabItem = document.createElement('br-tab-item');
+  a11yTabItem.setAttribute('label', 'Acessibilidade');
+  a11yTabItem.setAttribute('icon', 'fas fa-universal-access');
+  a11yTabItem.setAttribute('icon-only', 'true');
+  a11yTabItem.setAttribute('title', 'Acessibilidade');
+  a11yTabItem.setAttribute('tab-item-id', 'a11y-tab');
+
+  const a11yWrapper = document.createElement('div');
+  a11yWrapper.className = 'wbc-example-a11y-wrapper';
+
+  const a11yHeader = document.createElement('div');
+  a11yHeader.className = 'wbc-a11y-header';
+
+  const a11yHelp = document.createElement('p');
+  a11yHelp.className = 'wbc-a11y-help';
+  a11yHelp.textContent = 'Analisa a acessibilidade do exemplo acima usando o Axe-Core.';
+
+  a11yHeader.appendChild(a11yHelp);
+
+  const a11yResults = document.createElement('div');
+  a11yResults.className = 'wbc-a11y-results';
+
+  a11yWrapper.append(a11yHeader, a11yResults);
+  a11yTabItem.appendChild(a11yWrapper);
+
+  const runAccessibilityAudit = async () => {
+    if (!window.axe) {
+      a11yResults.innerHTML =
+        '<p class="text-danger mt-3">Axe-Core não está carregado. Verifique a conexão ou recarregue a página.</p>';
+      return;
+    }
+
+    a11yResults.innerHTML =
+      '<p class="mt-3"><i class="fas fa-spinner fa-spin mr-2"></i>Analisando acessibilidade...</p>';
+
+    try {
+      const { axe, previewContent } = await getPreviewAxeContext(previewFrame);
+      const results = await axe.run(previewContent);
+
+      if (results.violations.length === 0) {
+        a11yResults.innerHTML =
+          '<p class="text-success mt-3"><i class="fas fa-check-circle mr-2"></i>Nenhum problema de acessibilidade detectado!</p>';
+      } else {
+        a11yResults.innerHTML = '';
+
+        const violationsList = document.createElement('ul');
+        violationsList.className = 'wbc-a11y-violations-list mt-3';
+
+        results.violations.forEach((violation) => {
+          const item = document.createElement('li');
+          item.className = 'wbc-a11y-violation-item mb-3';
+
+          const title = document.createElement('div');
+          title.className = 'wbc-a11y-violation-title';
+
+          const impactBadge = document.createElement('span');
+          impactBadge.className = `badge-impact impact-${violation.impact}`;
+          impactBadge.textContent = violation.impact;
+
+          const helpText = document.createElement('span');
+          helpText.innerHTML = `<strong>${violation.help}</strong>`;
+
+          title.append(helpText, impactBadge);
+
+          const desc = document.createElement('p');
+          desc.className = 'wbc-a11y-violation-desc';
+          desc.textContent = violation.description;
+
+          const helpUrl = document.createElement('a');
+          helpUrl.href = violation.helpUrl;
+          helpUrl.target = '_blank';
+          helpUrl.className = 'wbc-a11y-violation-link';
+          helpUrl.textContent = 'Mais informações';
+
+          item.append(title, desc, helpUrl);
+          violationsList.appendChild(item);
+        });
+
+        a11yResults.appendChild(violationsList);
+      }
+    } catch (err) {
+      console.error(err);
+      a11yResults.innerHTML = `<p class="text-danger mt-3">Erro ao executar a análise: ${err.message}</p>`;
+    }
+  };
+
+  tabComponent.addEventListener('brTabChange', (event) => {
+    if (event.detail.tabId === 'a11y-tab') runAccessibilityAudit();
+    if (event.detail.tabId === 'code-tab') refreshEditor();
+  });
+
+  tabComponent.append(
+    codeTabItem,
+    controlsTabItem,
+    javascriptTabItem,
+    cssTabItem,
+    eventsTabItem,
+    angularTabItem,
+    reactTabItem,
+    vueTabItem,
+    a11yTabItem,
+  );
+  editorContainer.append(tabComponent);
+
+  let controlsCssSource = '';
+  const renderCurrentPreview = (source) => {
+    const managedStyle = controlsCssSource ? `<style data-playground-controls-css>${controlsCssSource}</style>` : '';
+    renderExamplePreview(preview, `${source}${managedStyle}`, path === 'templates');
+  };
+
+  const applyEditorValue = (source) => {
+    editorState.value = source;
+    updateFrameworkCode(source);
+    renderCurrentPreview(source);
+    renderedFilesContent[file] = { content: source.toLowerCase(), element: contentDiv };
+    // The example script lives in the preview iframe and is recreated with it.
+  };
+
+  const fullscreenBottomPanel = document.createElement('div');
+  fullscreenBottomPanel.className = 'wbc-example-fullscreen-bottom-panel';
+  fullscreenBottomPanel.appendChild(editorContainer);
+
+  preview.setAttribute('slot', 'target');
+  fullscreenBottomPanel.setAttribute('slot', 'target');
+  dropdown.appendChild(header);
+  contentDiv.appendChild(dropdown);
+
+  initializeExample = () => {
+    previewFrame = document.createElement('iframe');
+    previewFrame.className = 'wbc-example-preview-frame';
+    previewFrame.title = `Preview do exemplo ${file}`;
+    previewFrame.dataset.path = path;
+    previewFrame.setAttribute('loading', 'eager');
+    preview.appendChild(previewFrame);
+    renderCurrentPreview(text);
+
+    const editorReady = window.WBCCodeEditorReady || Promise.resolve(window.WBCCodeEditor);
+    editorReady.then(() => {
+      if (!editorContainer.closest('body')) return;
+      editorWrapper.textContent = '';
+      editorApi = window.WBCCodeEditor.create({
+        ariaLabel: `Código fonte do exemplo ${file}`,
+        onChange: applyEditorValue,
+        parent: editorWrapper,
+        value: editorState.value,
+        language: 'html',
+      });
+
+      const createFrameworkEditor = (tab) => {
+        const code = tab.querySelector('.wbc-framework-code');
+        if (!code) return;
+        const editorContainer = document.createElement('div');
+        editorContainer.className = 'wbc-framework-editor';
+        code.replaceWith(editorContainer);
+        const framework = code.dataset.framework;
+        const editor = window.WBCCodeEditor.create({
+          ariaLabel: `Código ${tab.getAttribute('label')}`,
+          onChange: () => {},
+          parent: editorContainer,
+          value: code.textContent || '',
+          language: getFrameworkEditorLanguage(framework),
+          readOnly: true,
+        });
+        frameworkEditors.set(tab, editor);
+        tab.querySelectorAll('.wbc-framework-file-tab').forEach((fileTab) => {
+          fileTab.addEventListener('click', () => selectFrameworkFile(tab, fileTab.dataset.filename, editor));
+        });
+        selectFrameworkFile(tab, tab.dataset.activeFilename, editor);
+      };
+      frameworkTabItems.forEach(createFrameworkEditor);
+      refreshEditor();
+      refreshFrameworkEditors();
+    });
+
+    customElements.whenDefined('br-tab').then(() => {
+      requestAnimationFrame(async () => {
+        await tabComponent.setActiveTab?.('code-tab');
+        refreshEditor();
+      });
+    });
+
+    window.WBCComponentControls?.enhance({
+      editorContainer,
+      controlsTabItem,
+      getCss: () => controlsCssSource,
+      getHtml: getEditorValue,
+      preferredTag: `br-${path}`,
+      scopeSelector: 'body',
+      setCss: (value) => {
+        controlsCssSource = value;
+        renderCurrentPreview(getEditorValue());
+      },
+      setHtml: (value) => {
+        setEditorValue(value);
+      },
+    });
+  };
+
+  renderedFilesContent[file] = { content: text.toLowerCase(), element: contentDiv };
+
+  return contentDiv;
+}
+
+function createComponentTags(metadata) {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'wbc-component-tags';
+  wrapper.setAttribute('aria-label', 'Classificação do componente');
+  const colors = { stable: 'var(--success)', beta: 'var(--warning)', deprecated: 'var(--danger)' };
+  const labels = { stable: 'Estável', beta: 'Beta', deprecated: 'Depreciado' };
+  (metadata?.categories || []).forEach((category) => {
+    const tag = document.createElement('br-tag');
+    tag.setAttribute('label', category);
+    tag.setAttribute('bg-color', 'var(--interactive)');
+    tag.className = 'wbc-component-category';
+    wrapper.appendChild(tag);
+  });
+  const status = metadata?.status || 'stable';
+  const statusTag = document.createElement('br-tag');
+  statusTag.setAttribute('label', labels[status] || labels.stable);
+  statusTag.setAttribute('bg-color', colors[status] || colors.stable);
+  statusTag.className = `wbc-component-status wbc-component-status--${status}`;
+  wrapper.appendChild(statusTag);
+  return wrapper;
+}
+
+function getInitialExampleFile(path, files) {
+  const requestedFile = getRequestedExampleFile();
+  if (files.includes(requestedFile)) return { initialFile: requestedFile, requestedFile };
+  if (window.SHARED_STATE?.p === path) return { initialFile: window.SHARED_STATE.f, requestedFile };
+  return { initialFile: 'default', requestedFile };
+}
+
+function createExamplesList(path, results, initialFile) {
+  let sharedElementToScroll = null;
+  const examples = document.createElement('br-list');
+  examples.className = 'wbc-examples-list';
+  examples.setAttribute('list-role', 'group');
+  examples.setAttribute('divider', '');
+  results.sort((a, b) => Number(b.file === 'default') - Number(a.file === 'default'));
+  results.forEach(({ file, text }, index) => {
+    const element = createExampleElement(
+      path,
+      file,
+      text,
+      file === initialFile || (!initialFile && index === 0),
+      (openedFile) => {
+        const hash = getExampleHash(openedFile);
+        if (window.location.hash !== hash) {
+          window.history.replaceState({}, '', `${window.location.pathname}${window.location.search}${hash}`);
+        }
+        examples.querySelectorAll('br-dropdown').forEach((other) => {
+          if (other !== element.querySelector('br-dropdown') && other.isOpen) other.isOpen = false;
+        });
+      },
+    );
+    examples.appendChild(element);
+    if (window.SHARED_STATE?.p === path && window.SHARED_STATE?.f === file) sharedElementToScroll = element;
+  });
+  return { examples, sharedElementToScroll };
+}
+
+function openInitialDropdown(examples, initialFile) {
+  const initialDropdown = initialFile
+    ? examples.querySelector(`[data-example-file="${CSS.escape(initialFile)}"] br-dropdown`)
+    : null;
+  if (!initialDropdown) return;
+  customElements.whenDefined('br-dropdown').then(() => {
+    initialDropdown.isOpen = false;
+    initialDropdown.open();
+  });
+}
+
+function scrollToInitialExample(examples, requestedFile, sharedElementToScroll) {
+  const hashElement = requestedFile
+    ? examples.querySelector(`[data-example-file="${CSS.escape(requestedFile)}"]`)
+    : null;
+  if (hashElement) setTimeout(() => hashElement.scrollIntoView({ behavior: 'smooth', block: 'center' }), 500);
+  if (sharedElementToScroll) {
+    setTimeout(() => {
+      sharedElementToScroll.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      sharedElementToScroll.classList.add('wbc-example-shared-highlight');
+    }, 500);
+  }
+}
+
+function renderLoadedPage(path, files, results) {
+  const metadata = window.MENU_ITEMS?.find((item) => item.path === path);
+  if (metadata) CONTENT_ELEMENT.appendChild(createComponentTags(metadata));
+  const { initialFile, requestedFile } = getInitialExampleFile(path, files);
+  const { examples, sharedElementToScroll } = createExamplesList(path, results, initialFile);
+  CONTENT_ELEMENT.appendChild(examples);
+  openInitialDropdown(examples, initialFile);
+  if (initialFile && files.includes(initialFile) && window.location.hash !== getExampleHash(initialFile)) {
+    window.history.replaceState(
+      {},
+      '',
+      `${window.location.pathname}${window.location.search}${getExampleHash(initialFile)}`,
+    );
+  }
+  scrollToInitialExample(examples, requestedFile, sharedElementToScroll);
+  currentLoadedPath = path;
+}
+
+function loadPage(path, files) {
+  window.WBCActiveRecorders = [];
+  CONTENT_ELEMENT.innerHTML = '';
+  renderedFilesContent = {};
+  if (COMPONENTS_FILTER) COMPONENTS_FILTER.value = ''; // Limpa o campo de busca ao trocar de página
+  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.style.display = 'none'; // Esconde o botão de limpar
+
+  const baseUrl = getBaseUrl();
+  const promises = files.map((file) => {
+    if (window.SHARED_STATE && window.SHARED_STATE.p === path && window.SHARED_STATE.f === file) {
+      return Promise.resolve({ file, text: stripDevServerConnector(window.SHARED_STATE.h) });
+    }
+    return fetch(`${baseUrl}/pages/components/${path}/${file}.html`).then((response) =>
+      response.text().then((text) => ({ file, text: stripDevServerConnector(text) })),
+    );
+  });
+
+  Promise.all(promises)
+    .then((results) => renderLoadedPage(path, files, results))
+    .catch((error) => {
+      console.log('Erro ao carregar a página:', error);
+    });
+}
+
+function loadMarkdown(path) {
+  CONTENT_ELEMENT.innerHTML = '';
+  renderedFilesContent = {};
+  if (COMPONENTS_FILTER) COMPONENTS_FILTER.value = ''; // Limpa o campo de busca ao trocar de página
+  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.style.display = 'none'; // Esconde o botão de limpar
+
+  const baseUrl = getBaseUrl();
+  fetch(`${baseUrl}/assets/stencil-generated-docs/${path}.md`)
+    .then((response) => response.text())
+    .then((text) => {
+      const contentDiv = document.createElement('div');
+      contentDiv.classList.add('file', 'mt-2', 'mb-5');
+      const parsedMarkdown = typeof markdownParser?.parse === 'function' ? markdownParser.parse(text) : text;
+      contentDiv.innerHTML = parsedMarkdown;
+      CONTENT_ELEMENT.appendChild(contentDiv);
+      currentLoadedPath = path;
+
+      renderedFilesContent[path] = { content: contentDiv.innerHTML.toLowerCase(), element: contentDiv };
+    })
+    .catch((error) => {
+      console.error('Erro ao carregar a página:', error);
+    });
+}
+
+function filterContent() {
+  const filterValue = (COMPONENTS_FILTER?.value || '').toLowerCase();
+  const normalizedFilterValue = filterValue.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+  Object.values(renderedFilesContent).forEach(({ content, element }) => {
+    const titleElement = element.querySelector('h3');
+    const titleText = titleElement ? titleElement.textContent.toLowerCase() : '';
+    const normalizedTitleText = titleText.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+    // Inicializa o conteúdo do shadow DOM para componentes personalizados
+    let shadowContent = '';
+
+    // Função para coletar o conteúdo dos slots de um custom element
+    const collectSlotContent = (customElement) => {
+      if (customElement.shadowRoot) {
+        const slots = customElement.shadowRoot.querySelectorAll('slot');
+        slots.forEach((slot) => {
+          const assignedNodes = slot.assignedNodes();
+          assignedNodes.forEach((node) => {
+            shadowContent += `${node.textContent.toLowerCase()} `;
+          });
+        });
+      }
+    };
+
+    // Procura todos os custom elements dentro do elemento
+    const customElements = element.querySelectorAll('*');
+    customElements.forEach((customElement) => {
+      if (customElement.tagName.includes('-')) {
+        // Identifica se é um custom element
+        collectSlotContent(customElement);
+      }
+    });
+
+    // Filtra o conteúdo
+    const combinedContent = `${content} ${shadowContent}`; // Combina conteúdo e shadow content
+
+    if (element.querySelector('table')) {
+      const rows = element.querySelectorAll('table tr');
+      rows.forEach((row, index) => {
+        if (index === 0) {
+          row.style.display = '';
+        } else {
+          const rowText = row.textContent
+            .toLowerCase()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+          row.style.display = rowText.includes(normalizedFilterValue) ? '' : 'none';
+        }
+      });
+    } else if (
+      normalizedFilterValue &&
+      (combinedContent.includes(normalizedFilterValue) || normalizedTitleText.includes(normalizedFilterValue))
+    ) {
+      element.style.display = ''; // Exibe o elemento se o conteúdo combinado inclui o valor filtrado
+    } else {
+      element.style.display = normalizedFilterValue ? 'none' : ''; // Oculta se não houver filtro
+    }
+  });
+
+  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.style.display = filterValue ? 'block' : 'none';
+}
+
+function processMenuItems(menuItems, menuBody, currentPath) {
+  if (!Array.isArray(menuItems)) return;
+  menuItems.forEach((page) => {
+    if (!page?.path) return;
+    const link = menuBody
+      ? Array.from(menuBody.children).find((item) => item.getAttribute('href') === `/${page.path}`)
+      : null;
+    if (page.path === currentPath) {
+      if (link) {
+        link.active = true;
+        link.classList.add('active');
+      }
+      if (Array.isArray(page.files)) loadPage(page.path, page.files);
+    }
+  });
+}
+
+function processStaticItems(staticItems, menuBody, currentPath) {
+  if (!Array.isArray(staticItems)) return;
+  staticItems.forEach((page) => {
+    if (!page?.path) return;
+    const link = menuBody
+      ? Array.from(menuBody.children).find((item) => item.getAttribute('href') === `/${page.path}`)
+      : null;
+    if (page.path === currentPath) {
+      if (link) {
+        link.active = true;
+        link.classList.add('active');
+      }
+      loadMarkdown(page.path);
+    }
+  });
+}
+
+// Liga eventos apenas se os elementos existirem
+if (COMPONENTS_FILTER) {
+  COMPONENTS_FILTER.addEventListener('input', filterContent);
+}
+
+if (CLEAR_COMPONENTS_FILTER) {
+  CLEAR_COMPONENTS_FILTER.addEventListener('click', () => {
+    if (COMPONENTS_FILTER) COMPONENTS_FILTER.value = '';
+    filterContent();
+  });
+}
+
+function loadPageFromURL() {
+  const baseUrl = getBaseUrl();
+  const currentPath = window.location.pathname.replace(baseUrl, '').split('/').filter(Boolean)[0] || '';
+
+  // Evita recarregar a mesma rota em chamadas repetidas
+  if (currentPath === currentLoadedPath) {
+    return;
+  }
+
+  const menuItems = Array.isArray(window.MENU_ITEMS) ? window.MENU_ITEMS : [];
+  const menuBody = typeof window.MENU_BODY !== 'undefined' ? window.MENU_BODY : null;
+
+  // Remove seleções antigas
+  if (menuBody) {
+    Array.from(menuBody.children).forEach((item) => {
+      item.active = false;
+      item.classList.remove('active');
+    });
+  }
+
+  processMenuItems(menuItems, menuBody, currentPath);
+  processStaticItems(window.MENU_STATIC_ITEMS, menuBody, currentPath);
+
+  if (currentPath.trim().length === 0 && menuItems.length > 0) {
+    const firstPage = menuItems.find((p) => p?.path && Array.isArray(p.files));
+    if (firstPage) {
+      loadPage(firstPage.path, firstPage.files);
+      const firstLink = menuBody
+        ? Array.from(menuBody.children).find((item) => item.getAttribute('href') === `/${firstPage.path}`)
+        : null;
+      if (firstLink) {
+        firstLink.active = true;
+        firstLink.classList.add('active');
+      }
+      window.history.pushState({}, '', `${baseUrl}/${firstPage.path}`);
+    }
+  }
+}
+
+// Aguarda DOM e dados do menu antes de tentar carregar a rota atual
+function isMenuReady() {
+  const hasItems =
+    (Array.isArray(window.MENU_ITEMS) && window.MENU_ITEMS.length > 0) ||
+    (Array.isArray(window.MENU_STATIC_ITEMS) && window.MENU_STATIC_ITEMS.length > 0);
+  return !!CONTENT_ELEMENT && hasItems;
+}
+
+function bootstrapRouting(attempt = 0) {
+  const maxAttempts = 200; // ~10s com 50ms
+  if (!isMenuReady()) {
+    if (attempt < maxAttempts) {
+      setTimeout(() => bootstrapRouting(attempt + 1), 50);
+    } else {
+      // Última tentativa mesmo sem menu (evita ficar em branco caso os itens não sejam necessários)
+      try {
+        loadPageFromURL();
+      } catch (err) {
+        console.warn('Falha ao carregar rota sem menu pronto:', err);
+      }
+    }
+    return;
+  }
+  loadPageFromURL();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => bootstrapRouting());
+} else {
+  bootstrapRouting();
+}
+
+// Garante atualização ao navegar com back/forward
+window.addEventListener('popstate', () => bootstrapRouting());
+
+window.addEventListener('hashchange', () => {
+  const file = getRequestedExampleFile();
+  const example = file ? document.querySelector(`br-item[data-example-file="${CSS.escape(file)}"]`) : null;
+  if (!example) return;
+
+  const dropdown = example.querySelector('br-dropdown');
+  if (dropdown) dropdown.isOpen = true;
+  document.querySelectorAll('.wbc-example-dropdown').forEach((other) => {
+    if (other !== dropdown) other.isOpen = false;
+  });
+  setTimeout(() => example.scrollIntoView({ behavior: 'smooth', block: 'center' }), 100);
+});