fix: prevent hydration error for overlays in elements not allowing <div> children

Replaces the container `<div>` with a custom element which is similar to svelte
changing to the `svelte-css-wrapper` (sveltejs/svelte#13499)
custom element when injecting component style props.

Author: sfriedel

src/lib/internal/Overlay.svelte

@@ -22,7 +22,7 @@
 	const { getTranslation } = getInternalFluentContext();
 
 	const applyTranslation: Action<
-		HTMLDivElement,
+		HTMLElement,
 		{ translation: Translation; templateNode?: HTMLTemplateElement }
 	> = (node, { translation, templateNode }) => {
 		const observer = new MutationObserver(() => updateContent(translation, templateNode));
@@ -72,7 +72,7 @@
 	<template bind:this={templateElem}>{@render children?.()}</template>
 </svelte:head>
 
-<div
+<svelte-fluent-overlay
 	style:display="contents"
 	use:applyTranslation={{ translation: getTranslation(id, args, true), templateNode: templateElem }}
-></div>
+></svelte-fluent-overlay>

src/lib/internal/OverlaySSR.ts

@@ -31,7 +31,7 @@ function OverlaySSR($$payload: Payload, $$props: Props) {
 	const headFragment = JSDOM.fragment($$payload.head.out);
 	const bodyFragment = JSDOM.fragment($$payload.out);
 	const templateNode = headFragment.firstElementChild as HTMLTemplateElement | null;
-	const rootNode = bodyFragment.firstElementChild as HTMLDivElement | null;
+	const rootNode = bodyFragment.firstElementChild as HTMLElement | null;
 	if (templateNode && rootNode && translation) {
 		rootNode.innerHTML = '';
 		rootNode.appendChild(templateNode.content.cloneNode(true));

src/tests/dom/__snapshots__/svelte@5/examples.test.js.snap

@@ -137,7 +137,7 @@ exports[`Example localized-legacy/attributes/App.svelte > should render 1`] = `
 
 exports[`Example overlay/dynamic-text/App.svelte > should render 1`] = `
 <div>
-  <div
+  <svelte-fluent-overlay
     style="display: contents;"
   >
     You can download "⁨Example Product⁩" by clicking
@@ -156,14 +156,14 @@ the
       release notes
     </a>
      to learn more.
-  </div>
+  </svelte-fluent-overlay>
   
 </div>
 `;
 
 exports[`Example overlay/static-text/App.svelte > should render 1`] = `
 <div>
-  <div
+  <svelte-fluent-overlay
     style="display: contents;"
   >
     Read the 
@@ -174,7 +174,7 @@ exports[`Example overlay/static-text/App.svelte > should render 1`] = `
       documentation
     </a>
      for more information.
-  </div>
+  </svelte-fluent-overlay>
   
 </div>
 `;

src/tests/ssr/__snapshots__/svelte@5/examples.test.js.snap

@@ -74,21 +74,21 @@ exports[`Example localized-legacy/attributes/App.svelte > should render 1`] = `
 
 exports[`Example overlay/dynamic-text/App.svelte > should render 1`] = `
 {
-  "body": "<!--[--><div style="display: contents;">You can download "⁨Example Product⁩" by clicking
+  "body": "<!--[--><svelte-fluent-overlay style="display: contents;">You can download "⁨Example Product⁩" by clicking
 on the <strong>Download</strong> button or read
-the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</div><!--]-->",
+the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</svelte-fluent-overlay><!--]-->",
   "head": "<!--[--><template><a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer"></a><!----></template><!--]-->",
-  "html": "<!--[--><div style="display: contents;">You can download "⁨Example Product⁩" by clicking
+  "html": "<!--[--><svelte-fluent-overlay style="display: contents;">You can download "⁨Example Product⁩" by clicking
 on the <strong>Download</strong> button or read
-the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</div><!--]-->",
+the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</svelte-fluent-overlay><!--]-->",
 }
 `;
 
 exports[`Example overlay/static-text/App.svelte > should render 1`] = `
 {
-  "body": "<!--[--><div style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</div><!--]-->",
+  "body": "<!--[--><svelte-fluent-overlay style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</svelte-fluent-overlay><!--]-->",
   "head": "<!--[--><template><a data-l10n-name="link" href="https://example.com/"></a><!----></template><!--]-->",
-  "html": "<!--[--><div style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</div><!--]-->",
+  "html": "<!--[--><svelte-fluent-overlay style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</svelte-fluent-overlay><!--]-->",
 }
 `;