@govbr-ds/webcomponents 2.2.0 → 2.4.0

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

@@ -127,25 +127,7 @@ function getBaseUrl() {
   return baseUrl === '' ? '' : baseUrl;
 }
 
-function getPresetScriptUrl(path, script) {
-  if (typeof script !== 'string' || !/\.js$/i.test(script)) return '';
-
-  const componentSegments = String(path).replaceAll('\\', '/').split('/').filter(Boolean);
-  const scriptSegments = script.replaceAll('\\', '/').split('/');
-  if (
-    componentSegments.length === 0 ||
-    scriptSegments.some((segment) => !segment || segment === '.' || segment === '..')
-  ) {
-    return '';
-  }
-
-  const relativePath = [...componentSegments, ...scriptSegments].map(encodeURIComponent).join('/');
-  const scriptUrl = new URL(`${getBaseUrl()}/pages/components/${relativePath}`, window.location.href);
-  scriptUrl.searchParams.set('preview-version', String(Date.now()));
-  return scriptUrl.href;
-}
-
-function createExampleElement(path, file, text, presets = [], defaultPreset = '', exampleLabel = '', baseScript = '') {
+function createExampleElement(path, file, text, presets = [], defaultPreset = '', exampleLabel = '') {
   text = stripDevServerConnector(text);
   const contentDiv = document.createElement('br-item');
   contentDiv.classList.add('file', 'wbc-example');
@@ -177,42 +159,60 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   const editorContainer = document.createElement('div');
   editorContainer.className = 'wbc-example-editor-container';
 
+  // Ids nativos das abas, com o escopo do exemplo para não duplicar ids entre exemplos da página.
+  const tabIds = Object.fromEntries(
+    ['code', 'events', 'controls', 'a11y', 'javascript', 'css', 'angular', 'react', 'vue'].map((name) => [
+      name,
+      `${controlsScope}-${name}-tab`,
+    ]),
+  );
   const tabComponent = document.createElement('br-tab');
   tabComponent.setAttribute('density', 'small');
-  tabComponent.setAttribute('active-tab-id', 'code-tab');
+  // Ícones por classe (Font Awesome) em light DOM, pelo slot `icon-{id}` do br-tab.
+  const setTabIcon = (tabItem, iconClass) => {
+    const icon = document.createElement('i');
+    icon.slot = `icon-${tabItem.id}`;
+    icon.className = iconClass;
+    icon.setAttribute('aria-hidden', 'true');
+    tabComponent.appendChild(icon);
+  };
+  tabComponent.setAttribute('active-tab-id', tabIds.code);
   tabComponent.setAttribute('data-playground-badges', '');
 
   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', 'Editor HTML');
-  codeTabItem.setAttribute('tab-item-id', 'code-tab');
+  codeTabItem.id = tabIds.code;
   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: eventos e mensagens de runtime');
-  eventsTabItem.setAttribute('tab-item-id', 'events-tab');
+  eventsTabItem.id = tabIds.events;
 
   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 do componente');
-  controlsTabItem.setAttribute('tab-item-id', 'controls-tab');
+  controlsTabItem.id = tabIds.controls;
 
-  const javascriptTabItem = createFrameworkTab('JS', 'fab fa-js', 'javascript-tab', text, 'javascript', {
+  const javascriptTabItem = createFrameworkTab('JS', 'fab fa-js', tabIds.javascript, text, 'javascript', {
     editable: true,
   });
-  const cssTabItem = createFrameworkTab('CSS', 'fab fa-css3-alt', 'css-tab', text, 'css', { editable: true });
-  const angularTabItem = createFrameworkTab('Angular', 'fab fa-angular', 'angular-tab', text, 'angular');
-  const reactTabItem = createFrameworkTab('React', 'fab fa-react', 'react-tab', text, 'react');
-  const vueTabItem = createFrameworkTab('Vue', 'fab fa-vuejs', 'vue-tab', text, 'vue');
+  const cssTabItem = createFrameworkTab('CSS', 'fab fa-css3-alt', tabIds.css, text, 'css', { editable: true });
+  const angularTabItem = createFrameworkTab('Angular', 'fab fa-angular', tabIds.angular, text, 'angular');
+  const reactTabItem = createFrameworkTab('React', 'fab fa-react', tabIds.react, text, 'react');
+  const vueTabItem = createFrameworkTab('Vue', 'fab fa-vuejs', tabIds.vue, text, 'vue');
   const frameworkTabItems = [javascriptTabItem, cssTabItem, angularTabItem, reactTabItem, vueTabItem];
+  // Depois de os ids estarem definidos: o nome do slot depende do id da aba.
+  setTabIcon(codeTabItem, 'fab fa-html5');
+  setTabIcon(eventsTabItem, 'fas fa-terminal');
+  setTabIcon(controlsTabItem, 'fas fa-sliders-h');
+  frameworkTabItems.forEach((tab) => {
+    setTabIcon(tab, tab.dataset.icon);
+  });
   const frameworkEditors = new Map();
   const refreshFrameworkEditors = () => {
     requestAnimationFrame(() => {
@@ -327,7 +327,10 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   let overflowRedo;
   let overflowDiff;
   let editorApi = null;
-  const getEditorValue = () => editorApi?.getValue() ?? editorState.value;
+  // O editor é compartilhado pelas abas index.html/index.css/index.js; fora da
+  // aba HTML, o HTML vigente é o último valor aplicado.
+  const getEditorValue = () =>
+    activeVanillaFile === 'html' ? (editorApi?.getValue() ?? editorState.value) : editorState.value;
   const refreshEditor = () => {
     requestAnimationFrame(() => requestAnimationFrame(() => editorApi?.refresh?.()));
   };
@@ -387,8 +390,13 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
     presets.find(({ id, source }) => id === defaultPreset && Boolean(source)) ??
     presets.find(({ source }) => Boolean(source));
   const initialPresetId = initialPreset?.id || '';
-  const baseScriptUrl = getPresetScriptUrl(path, baseScript);
-  let activePresetScriptUrl = getPresetScriptUrl(path, initialPreset?.script);
+  const getPresetCss = (preset) => preset?.css || getFrameworkCode(editorState.value, 'css');
+  const getPresetJavascript = (preset) => preset?.javascript || '';
+  // Link compartilhado > rascunho local > arquivos do preset. O estado da URL não é confiável.
+  const sharedState = getSharedExampleState(path, file);
+  const pickSource = (...values) => values.find((value) => typeof value === 'string');
+  vanillaSources.css = pickSource(sharedState?.c, activeDraft?.css, getPresetCss(initialPreset));
+  vanillaSources.javascript = pickSource(sharedState?.j, activeDraft?.javascript, getPresetJavascript(initialPreset));
   presetOptions.forEach(({ id, label, source }) => {
     const option = document.createElement('br-select-option');
     option.value = id;
@@ -399,6 +407,33 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
     presetSelect.appendChild(option);
   });
   presetSelect.value = initialPresetId;
+
+  // Descrição do preset: linha de largura total entre o cabeçalho e o preview e, se houver,
+  // a explicação detalhada em <details>, recolhida a cada troca de preset. O parágrafo é uma
+  // região viva, então a troca é anunciada.
+  const presetDescription = document.createElement('div');
+  presetDescription.className = 'wbc-example-preset-description';
+  presetDescription.hidden = true;
+  const presetDescriptionText = document.createElement('p');
+  presetDescriptionText.className = 'wbc-example-preset-description__text';
+  presetDescriptionText.setAttribute('aria-live', 'polite');
+  const presetDetails = document.createElement('details');
+  presetDetails.className = 'wbc-example-preset-description__details';
+  const presetDetailsSummary = document.createElement('summary');
+  presetDetailsSummary.textContent = 'Explicação detalhada';
+  const presetDetailsBody = document.createElement('div');
+  presetDetailsBody.className = 'wbc-example-preset-description__body';
+  presetDetails.append(presetDetailsSummary, presetDetailsBody);
+  presetDescription.append(presetDescriptionText, presetDetails);
+  const updatePresetDescription = (preset) => {
+    presetDescription.hidden = !preset?.description;
+    presetDescriptionText.textContent = preset?.description ?? '';
+    presetDetails.open = false;
+    presetDetails.hidden = !preset?.details;
+    presetDetailsBody.textContent = preset?.details ?? '';
+  };
+  updatePresetDescription(initialPreset);
+
   let isApplyingPresetFromUrl = false;
   let title;
   const updateExampleLabel = (presetId = presetSelect.value) => {
@@ -409,13 +444,20 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   presetSelect.addEventListener('change', () => {
     const selectedPreset = presetOptions.find(({ id }) => id === presetSelect.value);
     updateExampleLabel(selectedPreset?.id);
+    updatePresetDescription(selectedPreset);
     if (selectedPreset?.source) {
       controlsCssSource = '';
       controlsApi?.reset?.();
-      activePresetScriptUrl = getPresetScriptUrl(path, selectedPreset.script);
       if (!isApplyingPresetFromUrl) updatePresetUrl(file, selectedPreset.id);
       comparisonBaseline = selectedPreset.source;
-      setEditorValue(selectedPreset.source);
+      vanillaSources.css = getPresetCss(selectedPreset);
+      vanillaSources.javascript = getPresetJavascript(selectedPreset);
+      activateVanillaFile('html');
+      // Presets com o mesmo HTML ainda podem trocar JS/CSS.
+      if (selectedPreset.source === editorState.value) {
+        renderCurrentPreview(editorState.value);
+        persistDraft();
+      } else setEditorValue(selectedPreset.source);
       updateDiff(getEditorValue());
     }
   });
@@ -750,6 +792,8 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
       p: path,
       f: file,
       h: getEditorValue(),
+      j: vanillaSources.javascript,
+      c: vanillaSources.css,
       // Mantém a associação do código compartilhado ao preset para links legados e edição posterior.
       presetId: presetSelect.value || undefined,
     };
@@ -1029,6 +1073,7 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   const updateToolbarLayout = () => {
     const isCompact = header.clientWidth > 0 && header.clientWidth < 840;
     header.classList.toggle('is-compact-toolbar', isCompact);
+    header.classList.toggle('is-stacked-toolbar', header.clientWidth > 0 && header.clientWidth < 576);
   };
   const headerResizeObserver = new ResizeObserver(updateToolbarLayout);
   headerResizeObserver.observe(header);
@@ -1193,7 +1238,6 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   };
 
   eventFilterInput.addEventListener('input', applyFilter);
-  eventFilterInput.addEventListener('valueChange', applyFilter);
   eventKindFilter.addEventListener('change', applyFilter);
 
   let newEventsCount = 0;
@@ -1205,7 +1249,7 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   };
 
   const markConsoleEntry = () => {
-    const isActive = eventsTabItem.getAttribute('is-active') === 'true';
+    const isActive = tabComponent.activeTabId === tabIds.events;
     if (!isActive) {
       newEventsCount++;
       eventsTabItem.setAttribute('label', `Console (${newEventsCount})`);
@@ -1475,15 +1519,25 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   };
 
   let vanillaFileTabs;
-  const setEditorValue = (value, { recordHistory = true } = {}) => {
-    const nextValue = String(value ?? '');
-    if (nextValue === editorState.value) return;
-    activeVanillaFile = 'html';
-    vanillaFileTabs?.querySelectorAll('.wbc-framework-file-tab').forEach((item, index) => {
-      const active = index === 0;
+  function activateVanillaFile(target) {
+    if (target === activeVanillaFile) return;
+    activeVanillaFile = target;
+    vanillaFileTabs?.querySelectorAll('.wbc-framework-file-tab').forEach((item) => {
+      const active = item.dataset.vanillaFile === target;
       item.classList.toggle('is-active', active);
       item.setAttribute('aria-selected', String(active));
     });
+    if (!editorApi) return;
+    isSwitchingVanillaFile = true;
+    editorApi.setLanguage?.(target);
+    editorApi.setValue(vanillaSources[target]);
+    isSwitchingVanillaFile = false;
+  }
+
+  const setEditorValue = (value, { recordHistory = true } = {}) => {
+    const nextValue = String(value ?? '');
+    if (nextValue === editorState.value) return;
+    activateVanillaFile('html');
     isApplyingEditorValue = true;
     editorApi?.setValue(nextValue);
     isApplyingEditorValue = false;
@@ -1492,11 +1546,11 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
 
   tabComponent.addEventListener('brTabChange', (event) => {
     const activeTabId = event.detail.tabId;
-    if (activeTabId !== 'code-tab') {
+    if (activeTabId !== tabIds.code) {
       eventsTabItem.setAttribute('label', 'Console');
       newEventsCount = 0;
     }
-    if (frameworkTabItems.some((tab) => tab.getAttribute('tab-item-id') === activeTabId)) {
+    if (frameworkTabItems.some((tab) => tab.id === activeTabId)) {
       refreshFrameworkEditors();
     }
   });
@@ -1517,20 +1571,10 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
     fileTab.setAttribute('role', 'tab');
     fileTab.setAttribute('aria-selected', String(index === 0));
     fileTab.textContent = filename;
+    fileTab.dataset.vanillaFile = target;
     fileTab.addEventListener('click', () => {
       if (target === activeVanillaFile) return;
-      vanillaSources[activeVanillaFile] = getEditorValue();
-      activeVanillaFile = target;
-      vanillaFileTabs.querySelectorAll('.wbc-framework-file-tab').forEach((item, itemIndex) => {
-        const active = itemIndex === vanillaFiles.findIndex(([value]) => value === target);
-        item.classList.toggle('is-active', active);
-        item.setAttribute('aria-selected', String(active));
-      });
-      if (!editorApi) return;
-      isSwitchingVanillaFile = true;
-      editorApi.setLanguage?.(target === 'html' ? 'html' : target === 'css' ? 'css' : 'javascript');
-      editorApi.setValue(vanillaSources[target]);
-      isSwitchingVanillaFile = false;
+      activateVanillaFile(target);
       refreshEditor();
     });
     vanillaFileTabs.appendChild(fileTab);
@@ -1542,10 +1586,10 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   // --- 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', 'Auditoria de acessibilidade');
-  a11yTabItem.setAttribute('tab-item-id', 'a11y-tab');
+  a11yTabItem.id = tabIds.a11y;
+  setTabIcon(a11yTabItem, 'fas fa-universal-access');
 
   const a11yWrapper = document.createElement('div');
   a11yWrapper.className = 'wbc-example-a11y-wrapper';
@@ -1639,8 +1683,8 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   };
 
   tabComponent.addEventListener('brTabChange', (event) => {
-    if (event.detail.tabId === 'a11y-tab') runAccessibilityAudit();
-    if (event.detail.tabId === 'code-tab') refreshEditor();
+    if (event.detail.tabId === tabIds.a11y) runAccessibilityAudit();
+    if (event.detail.tabId === tabIds.code) refreshEditor();
   });
 
   tabComponent.append(
@@ -1655,8 +1699,21 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   editorContainer.append(tabComponent);
 
   let controlsCssSource = '';
+  let vanillaAssetsPreviewTimer;
+  const persistDraft = () => {
+    writePlaygroundDraft(path, file, {
+      html: editorState.value,
+      css: vanillaSources.css,
+      javascript: vanillaSources.javascript,
+      baselineHtml: comparisonBaseline,
+      presetId: presetSelect.value || undefined,
+    });
+  };
   const renderCurrentPreview = (source) => {
     const managedStyle = controlsCssSource ? `<style data-playground-controls-css>${controlsCssSource}</style>` : '';
+    const exampleStyle = vanillaSources.css.trim()
+      ? `<style data-playground-css>${escapeInlineCode(vanillaSources.css, 'style')}</style>`
+      : '';
     if (previewFrame) {
       previewFrame.classList.remove('wbc-preview-animate');
       void previewFrame.offsetWidth;
@@ -1664,10 +1721,9 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
     }
     renderExamplePreview(
       preview,
-      `${source}${managedStyle}`,
-      path === 'templates',
-      baseScriptUrl,
-      activePresetScriptUrl,
+      `${source}${exampleStyle}${managedStyle}`,
+      path === 'templates' || path === 'templates-ai',
+      vanillaSources.javascript,
       previewChannelId,
     );
     updatePreviewResizeA11y();
@@ -1676,7 +1732,17 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   const handleEditorChange = (source) => {
     if (isSwitchingVanillaFile) return;
     vanillaSources[activeVanillaFile] = String(source ?? '');
-    if (activeVanillaFile === 'html' && !isApplyingEditorValue) applyEditorValue(source);
+    if (activeVanillaFile === 'html') {
+      if (!isApplyingEditorValue) applyEditorValue(source);
+      return;
+    }
+    // CSS/JS recriam o preview com debounce para não reexecutar o script a cada tecla.
+    window.clearTimeout(vanillaAssetsPreviewTimer);
+    vanillaAssetsPreviewTimer = window.setTimeout(() => {
+      renderCurrentPreview(editorState.value);
+      scheduleAccessibilityAudit();
+      persistDraft();
+    }, 600);
   };
 
   const applyEditorValue = (source, { recordHistory = true } = {}) => {
@@ -1688,11 +1754,7 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
     renderCurrentPreview(source);
     scheduleAccessibilityAudit();
     renderedFilesContent[file] = { content: source.toLowerCase(), element: contentDiv };
-    writePlaygroundDraft(path, file, {
-      html: source,
-      baselineHtml: comparisonBaseline,
-      presetId: presetSelect.value || undefined,
-    });
+    persistDraft();
     updateHistoryActions();
     updateDiff(source);
     if (!isUpdatingFromControls) {
@@ -1706,7 +1768,7 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
   fullscreenBottomPanel.className = 'wbc-example-fullscreen-bottom-panel';
   fullscreenBottomPanel.appendChild(editorContainer);
 
-  contentDiv.append(header, preview, fullscreenBottomPanel);
+  contentDiv.append(header, presetDescription, preview, fullscreenBottomPanel);
 
   initializeExample = () => {
     previewFrame = document.createElement('iframe');
@@ -1765,7 +1827,7 @@ function createExampleElement(path, file, text, presets = [], defaultPreset = ''
 
     customElements.whenDefined('br-tab').then(() => {
       requestAnimationFrame(async () => {
-        await tabComponent.setActiveTab?.('code-tab');
+        await tabComponent.setActiveTab?.(tabIds.code);
         refreshEditor();
       });
     });
@@ -1891,14 +1953,7 @@ function getInitialExampleFile(path, files) {
   return { initialFile: 'default', requestedFile };
 }
 
-function createExamplesList(
-  path,
-  results,
-  presets = [],
-  exampleConfigs = [],
-  initialFile = 'default',
-  baseScript = '',
-) {
+function createExamplesList(path, results, presets = [], exampleConfigs = [], initialFile = 'default') {
   let sharedElementToScroll = null;
   let initialPresetId = '';
   const examples = document.createElement('br-list');
@@ -1929,7 +1984,6 @@ function createExamplesList(
       availablePresets.map(({ source, ...preset }) => ({ ...preset, source: source?.text ?? null })),
       selectedPresetId,
       config?.label || file,
-      baseScript,
     );
     element.dataset.defaultPreset =
       fallbackPreset?.id || availablePresets.find((preset) => getPresetSource(preset))?.id || '';
@@ -1954,7 +2008,7 @@ function scrollToInitialExample(examples, requestedFile, sharedElementToScroll)
   }
 }
 
-function renderLoadedPage(path, examples, results, presets = [], baseScript = '') {
+function renderLoadedPage(path, examples, results, presets = []) {
   const metadata = window.MENU_ITEMS?.find((item) => item.path === path);
   if (metadata) {
     CONTENT_ELEMENT.appendChild(createComponentHeading(metadata));
@@ -1966,7 +2020,7 @@ function renderLoadedPage(path, examples, results, presets = [], baseScript = ''
     examples: examplesList,
     initialPresetId,
     sharedElementToScroll,
-  } = createExamplesList(path, results, presets, examples, initialFile, baseScript);
+  } = createExamplesList(path, results, presets, examples, initialFile);
   CONTENT_ELEMENT.appendChild(examplesList);
   if (initialFile && exampleIds.includes(initialFile)) {
     const targetHash = getExampleHash(initialFile, initialPresetId || undefined);
@@ -2030,7 +2084,7 @@ async function fetchPlaygroundSource(path, source) {
   throw lastError;
 }
 
-function loadPage(path, examples, presets = [], baseScript = '') {
+function loadPage(path, examples, presets = [], baseScript = '', baseStyle = '') {
   const loadGeneration = ++pageLoadGeneration;
   cleanupExamples();
   window.WBCActiveRecorders = [];
@@ -2051,6 +2105,26 @@ function loadPage(path, examples, presets = [], baseScript = '') {
         console.warn(`Não foi possível carregar o preset ${path}/${source}:`, error);
       }),
   );
+  // JS e CSS do preset ficam em arquivos irmãos do HTML; `index.js`/`index.css`
+  // valem para todos os presets do componente e vêm antes do arquivo do preset.
+  const assetSources = new Map();
+  const uniqueAssetSources = [
+    ...new Set([baseScript, baseStyle, ...presets.flatMap(({ script, style }) => [script, style])].filter(Boolean)),
+  ];
+  const assetPromises = uniqueAssetSources.map((source) =>
+    fetchPlaygroundSource(path, source)
+      .then((text) => {
+        assetSources.set(source, text.trim());
+      })
+      .catch((error) => {
+        console.warn(`Não foi possível carregar ${path}/${source}:`, error);
+      }),
+  );
+  const joinAssets = (...sources) =>
+    sources
+      .map((source) => assetSources.get(source))
+      .filter(Boolean)
+      .join('\n\n');
   const promises = pageExamples.map((example) => {
     const selectedPreset = getPresetForExample(path, example, presets);
     const source = getPresetSource(selectedPreset);
@@ -2061,7 +2135,7 @@ function loadPage(path, examples, presets = [], baseScript = '') {
     return fetchPlaygroundSource(path, source).then((text) => ({ file: example.id, text }));
   });
 
-  Promise.all([Promise.all(promises), Promise.all(presetPromises)])
+  Promise.all([Promise.all(promises), Promise.all(presetPromises), Promise.all(assetPromises)])
     .then(([results]) => {
       if (loadGeneration !== pageLoadGeneration) return;
       const loadedPresets = presets.map((preset) => ({
@@ -2069,8 +2143,10 @@ function loadPage(path, examples, presets = [], baseScript = '') {
         source: presetSources.has(preset.source)
           ? { text: presetSources.get(preset.source), path: preset.source }
           : null,
+        javascript: joinAssets(baseScript, preset.script),
+        css: joinAssets(baseStyle, preset.style),
       }));
-      renderLoadedPage(path, pageExamples, results, loadedPresets, baseScript);
+      renderLoadedPage(path, pageExamples, results, loadedPresets);
     })
     .catch((error) => {
       console.log('Erro ao carregar a página:', error);
@@ -2179,7 +2255,8 @@ function processMenuItems(menuItems, menuBody, currentPath) {
         link.active = true;
         link.classList.add('active');
       }
-      if (Array.isArray(page.examples)) loadPage(page.path, page.examples, page.presets, page.baseScript);
+      if (Array.isArray(page.examples))
+        loadPage(page.path, page.examples, page.presets, page.baseScript, page.baseStyle);
     }
   });
 }
@@ -2255,7 +2332,7 @@ function loadPageFromURL() {
   if (currentPath.trim().length === 0 && menuItems.length > 0) {
     const firstPage = menuItems.find((p) => p?.path && Array.isArray(p.examples));
     if (firstPage) {
-      loadPage(firstPage.path, firstPage.examples, firstPage.presets, firstPage.baseScript);
+      loadPage(firstPage.path, firstPage.examples, firstPage.presets, firstPage.baseScript, firstPage.baseStyle);
       const firstLink = menuBody
         ? Array.from(menuBody.children).find((item) => item.getAttribute('href') === `/${firstPage.path}`)
         : null;

package/dist/collection/pages/scripts/pageloader-preview.js

@@ -6,6 +6,8 @@
  * `pageLoader.js` — a divisão é puramente física, sem mudança de comportamento.
  */
 
+const OWN_MAIN_LANDMARK_PATTERN = /<main\b|\brole\s*=\s*["']?main\b/i;
+
 // Usado só por `renderExamplePreview` (abaixo).
 const DEV_SERVER_CONNECTOR_IFRAME_RE =
   /<iframe\b[^>]*title=["']Stencil Dev Server Connector[^"']*["'][\s\S]*?<\/iframe>/gi;
@@ -13,12 +15,12 @@ const DEV_SERVER_CONNECTOR_IFRAME_RE =
 // Cache do fonte do axe-core; privado de `loadAxeSource`.
 let axeSourcePromise;
 
-function escapeHtmlAttribute(value) {
-  return String(value)
-    .replaceAll('&', '&amp;')
-    .replaceAll('"', '&quot;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;');
+/**
+ * Impede que o conteúdo editado feche a tag `<script>`/`<style>` em que é
+ * incorporado no `srcdoc` do preview.
+ */
+function escapeInlineCode(value, tagName) {
+  return String(value).replace(new RegExp(`</(${tagName})`, 'gi'), '<\\/$1');
 }
 
 function removePresetScripts(previewFrame) {
@@ -27,14 +29,7 @@ function removePresetScripts(previewFrame) {
   });
 }
 
-function renderExamplePreview(
-  previewElement,
-  source,
-  edgeToEdge = false,
-  baseScriptUrl = '',
-  presetScriptUrl = '',
-  previewChannelId = '',
-) {
+function renderExamplePreview(previewElement, source, edgeToEdge = false, javascript = '', previewChannelId = '') {
   const frame = previewElement.querySelector('iframe');
   if (!frame) return;
 
@@ -47,11 +42,11 @@ function renderExamplePreview(
   componentBundleUrl.searchParams.set('preview-version', String(Date.now()));
   const componentBundle = componentBundleUrl.href;
   const frameSource = rewritePreviewAssetPaths(stripDevServerConnector(source), baseUrl);
-  const baseScript = baseScriptUrl
-    ? `\n    <script type="module" data-wbc-base-script src="${escapeHtmlAttribute(baseScriptUrl)}"></script>`
-    : '';
-  const presetScript = presetScriptUrl
-    ? `\n    <script type="module" data-wbc-preset-script src="${escapeHtmlAttribute(presetScriptUrl)}"></script>`
+  // Templates de página já declaram o próprio <main>; não aninha outro landmark principal.
+  const previewRootTag = OWN_MAIN_LANDMARK_PATTERN.test(frameSource) ? 'div' : 'main';
+  // Executado depois do bundle, como `index.js` + `<preset>.js` exibidos na aba JS.
+  const presetScript = javascript.trim()
+    ? `\n    <script type="module" data-wbc-preset-script>${escapeInlineCode(javascript, 'script')}</script>`
     : '';
 
   frame.srcdoc = `<!doctype html>
@@ -59,6 +54,7 @@ function renderExamplePreview(
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Preview do exemplo - GovBR-DS</title>
     <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}">
@@ -82,7 +78,7 @@ function renderExamplePreview(
       html[data-wbc-reduced-motion='true'] *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
     </style>
   </head>
-  <body${edgeToEdge ? ' class="wbc-preview-edge-to-edge"' : ''}><main data-wbc-preview-content>${frameSource}</main>
+  <body${edgeToEdge ? ' class="wbc-preview-edge-to-edge"' : ''}><${previewRootTag} data-wbc-preview-content>${frameSource}</${previewRootTag}>
     <style id="wbc-preview-reduced-motion">
       @media (prefers-reduced-motion: reduce) {
         *, *::before, *::after {
@@ -93,7 +89,6 @@ function renderExamplePreview(
       }
     </style>
     <script type="module" src="${componentBundle}"></script>
-    ${baseScript}
     ${presetScript}
     <script>
       (() => {
@@ -102,6 +97,21 @@ function renderExamplePreview(
         window.addEventListener('keydown', (event) => {
           if (event.key === 'Escape') sendToParent({ type: 'wbc-preview-exit-fullscreen' });
         });
+        // O <base> aponta para a página do playground; sem isto, links "#ancora" (inclusive os
+        // renderizados no Shadow DOM dos componentes) navegariam o iframe para fora do exemplo.
+        window.addEventListener('click', (event) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return;
+          const anchor = event.composedPath().find((node) => node instanceof HTMLAnchorElement && node.hasAttribute('href'));
+          const href = anchor?.getAttribute('href') || '';
+          if (!href.startsWith('#')) return;
+          event.preventDefault();
+          const id = decodeURIComponent(href.slice(1));
+          location.hash = href;
+          const target = id ? document.getElementById(id) : null;
+          target?.scrollIntoView();
+          if (target && !target.matches('a[href], button, input, select, textarea, [tabindex]')) target.setAttribute('tabindex', '-1');
+          target?.focus({ preventScroll: true });
+        }, true);
         const overlayContentSelector =
           '[part="open-panel"], [part="default-panel"], [part="body"], .cookiebar-body, .content, .br-modal';
         const getOverlayHeight = (overlay) => {
@@ -449,7 +459,7 @@ function renderExamplePreview(
           if (mode === 'dark') document.documentElement.dataset.wbcTheme = value ? 'dark' : 'light';
           scheduleHeight();
         };
-        const stateAttributes = ['disabled', 'loading', 'state', 'status', 'selected', 'active', 'invalid'];
+        const stateAttributes = ['disabled', 'loading', 'state', 'selected', 'active', 'invalid'];
         const stateSnapshots = new WeakMap();
         const applyState = (state) => {
           getAllElements().filter((element) => element.localName.includes('-')).forEach((element) => {
@@ -465,10 +475,8 @@ function renderExamplePreview(
             });
             if (state === 'disabled') element.setAttribute('disabled', '');
             if (state === 'loading') element.setAttribute('loading', '');
-            if (state === 'error') {
-              element.setAttribute('state', 'error');
-              element.setAttribute('status', 'error');
-            }
+            // Estado de erro canônico dos componentes (BrFeedbackState).
+            if (state === 'error') element.setAttribute('state', 'danger');
             if (state === 'selected') {
               element.setAttribute('selected', '');
               element.setAttribute('active', '');
@@ -623,10 +631,11 @@ function getFrameworkFiles(source, framework) {
 function createFrameworkTab(label, icon, tabId, source, framework, { editable = false } = {}) {
   const tab = document.createElement('br-tab-item');
   tab.setAttribute('label', label);
-  tab.setAttribute('icon', icon);
+  // O ícone por classe vai no slot `icon-{id}` do br-tab (aplicado por setTabIcon no pageLoader).
+  tab.dataset.icon = icon;
   tab.setAttribute('icon-only', 'true');
   tab.setAttribute('title', `Código ${label}`);
-  tab.setAttribute('tab-item-id', tabId);
+  tab.id = tabId;
   tab.dataset.framework = framework;
   tab.dataset.editable = String(editable);