npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.35 → 0.0.37 - Mend

@epa-wg/custom-element-dist 0.0.35 → 0.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/src/custom-element/demo/for-each.html ADDED Viewed

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>for-each - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        table {
+            border-collapse: collapse;
+            margin: 1rem 0;
+        }
+        th, td {
+            border: 1px solid #ccc;
+            padding: 0.5rem;
+        }
+        th {
+            background: #f0f0f0;
+        }
+    </style>
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>for-each loop</h3>
+    <p>The <code>&lt;for-each&gt;</code> element iterates over a node-set selected by XPath expression
+        and renders its content for each node.</p>
+    <p><b>XHTML namespace use</b><br/>
+        HTML elements like <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code>
+        have strict content model rules - only specific child elements are permitted.
+        For example, <code>&lt;table&gt;</code> only allows <code>&lt;thead&gt;</code>,
+        <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code> as children; <code>&lt;tr&gt;</code>
+        only allows <code>&lt;th&gt;</code> or <code>&lt;td&gt;</code>.<br/>
+        When the browser parses HTML, it moves non-permitted elements (like <code>&lt;for-each&gt;</code>)
+        outside the table before JavaScript runs.<br/>
+        Using <code>xhtml:</code> namespace prefix (e.g., <code>&lt;xhtml:table&gt;</code>,
+        <code>&lt;xhtml:tr&gt;</code>) prevents the browser from recognizing these as standard HTML
+        elements during initial parsing, preserving the template structure for DCE to process correctly.
+        See examples 4 and 6.
+    </p>
+</nav>
+<html-demo-element legend="1. Simple for-each"
+                   description="Loop over inline XML data and render each item">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="fruits">
+                    <item>Apple</item>
+                    <item>Banana</item>
+                    <item>Cherry</item>
+                </xsl:variable>
+                <ul>
+                    <for-each select="exsl:node-set($fruits)/*">
+                        <li>{.}</li>
+                    </for-each>
+                </ul>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="2. for-each with position()"
+                   description="Using position() to number items in the loop">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="colors">
+                    <color hex="#ff0000">Red</color>
+                    <color hex="#00ff00">Green</color>
+                    <color hex="#0000ff">Blue</color>
+                </xsl:variable>
+                <for-each select="exsl:node-set($colors)/*">
+                    <div style="padding: 0.5rem; background: {@hex}; color: white;">
+                        {position()}. {.}
+                    </div>
+                </for-each>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="3. Conditional for-each"
+                   description="Initially empty, items shown when checkbox is checked">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="items">
+                    <item>First</item>
+                    <item>Second</item>
+                    <item>Third</item>
+                </xsl:variable>
+                <label>
+                    <input type="checkbox" slice="show-items" value="yes"/>
+                    Show items
+                </label>
+                <variable name="show" select="//show-items = 'yes'"></variable>
+                <div>
+                    BEFORE
+                    <for-each select="exsl:node-set($items)/*[$show]">
+                        <span style="margin: 0 0.25rem; padding: 0.25rem; background: #e0e0ff;">
+                            {position()}:{.}
+                        </span>
+                    </for-each>
+                    AFTER
+                </div>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="4. Nested for-each (Table)"
+                   description="Nested loops to render table rows and cells">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="table-data">
+                    <row><cell>A1</cell><cell>A2</cell><cell>A3</cell></row>
+                    <row><cell>B1</cell><cell>B2</cell><cell>B3</cell></row>
+                    <row><cell>C1</cell><cell>C2</cell><cell>C3</cell></row>
+                </xsl:variable>
+                <variable name="rows" select="exsl:node-set($table-data)/*"></variable>
+                <xhtml:table>
+                    <xhtml:thead>
+                        <xhtml:tr>
+                            <xhtml:th>Col 1</xhtml:th>
+                            <xhtml:th>Col 2</xhtml:th>
+                            <xhtml:th>Col 3</xhtml:th>
+                        </xhtml:tr>
+                    </xhtml:thead>
+                    <xhtml:tbody>
+                        <for-each select="$rows">
+                            <xhtml:tr>
+                                <for-each select="*">
+                                    <xhtml:td>{.}</xhtml:td>
+                                </for-each>
+                            </xhtml:tr>
+                        </for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="5. for-each with attributes"
+                   description="Access element attributes within the loop">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="users">
+                    <user id="1" role="admin">Alice</user>
+                    <user id="2" role="editor">Bob</user>
+                    <user id="3" role="viewer">Charlie</user>
+                </xsl:variable>
+                <for-each select="exsl:node-set($users)/*">
+                    <div style="padding: 0.5rem; margin: 0.25rem 0; border-left: 3px solid #007bff;">
+                        <strong>#{@id}</strong> {.}
+                        <em>({@role})</em>
+                    </div>
+                </for-each>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="6. Dynamic table with toggle"
+                   description="Table rows appear/disappear based on checkbox state">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="products">
+                    <product price="10">Widget</product>
+                    <product price="25">Gadget</product>
+                    <product price="15">Gizmo</product>
+                </xsl:variable>
+                <variable name="items" select="exsl:node-set($products)/*"></variable>
+                <label>
+                    <input type="checkbox" slice="show-products" value="yes"/>
+                    Show products
+                </label>
+                <variable name="visible" select="//show-products = 'yes'"></variable>
+                <xhtml:table>
+                    <xhtml:thead>
+                        <xhtml:tr>
+                            <xhtml:th>#</xhtml:th>
+                            <xhtml:th>Product</xhtml:th>
+                            <xhtml:th>Price</xhtml:th>
+                        </xhtml:tr>
+                    </xhtml:thead>
+                    <xhtml:tbody>
+                        <for-each select="$items[$visible]">
+                            <xhtml:tr>
+                                <xhtml:td>{position()}</xhtml:td>
+                                <xhtml:td>{.}</xhtml:td>
+                                <xhtml:td>${@price}</xhtml:td>
+                            </xhtml:tr>
+                        </for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+</body>
+</html>

package/src/custom-element/ide/web-types-dce.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.35",
+    "version": "0.0.37",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/custom-element/ide/web-types-xsl.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.35",
+    "version": "0.0.37",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/custom-element/index.html CHANGED Viewed

@@ -54,7 +54,8 @@
         <a href="./demo/attributes.html"        >attributes         </a> |
         <a href="./demo/data-slices.html"       >data slices/events </a> |
         <a href="./demo/form.html"              >Form validation    </a> |
-        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a><br/>
+        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a> |
+        <a href="./demo/for-each.html"         >for-each loop in TABLE       </a><br/>
         <a href="./demo/npm-versions-demo.html">npm version         </a>
     </section>
 </nav>

package/src/material/theme/colors-native.html CHANGED Viewed

@@ -6,6 +6,8 @@
     <style>
         figure>table {
+            background-color: lightgreen;
+            caption{ background-color: Canvas; color: CanvasText; }
             tbody>tr {
                 background-image: repeating-linear-gradient(45deg, transparent, transparent 0.25em, grey 0.25em, green 0.5em);
                 td{ background-image: linear-gradient(to right, lightgreen, lightyellow); }
@@ -19,7 +21,36 @@
 <figure class="table-container">
     <figcaption><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/system-color"> Native browser colors </a>
     </figcaption>
-    <table class="dashed-diagonal-background" style="background-color: lightgreen; ">
+    <table class="dashed-diagonal-background" style="color-scheme: light;">
+        <caption>Light mode</caption>
+        <thead>
+        <tr>
+            <th>Sample</th><th>background  </th><th>text color </th><th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr><td style="background-color: AccentColor;      color:AccentColorText    " >AccentColor     </td><td><code>AccentColor     </code></td><td><code> AccentColorText  </code></td> <td>Background of accented user interface controls.               </td> </tr>
+        <tr><td style="background-color: AccentColorText;  color:AccentColor        " >AccentColorText </td><td><code>AccentColorText </code></td><td><code> AccentColor      </code></td><td>Text of accented user interface controls.                      </td></tr>
+        <tr><td style="background-color: ActiveText;       color:Canvas             " >ActiveText      </td><td><code>ActiveText      </code></td><td><code> Canvas           </code></td><td>Text of active links.                                          </td></tr>
+        <tr><td style="background-color: Highlight;        color:HighlightText      " >Highlight       </td><td><code>Highlight       </code></td><td><code> HighlightText    </code></td><td>Background of selected items.                                       </td></tr>
+        <tr><td style="background-color: LinkText;         color:Canvas             " >LinkText        </td><td><code>LinkText        </code></td><td><code> Canvas           </code></td><td>Text of non-active, non-visited links.                              </td></tr>
+        <tr><td style="background-color: SelectedItem;     color:SelectedItemText   " >SelectedItem    </td><td><code>SelectedItem    </code></td><td><code> SelectedItemText </code></td><td>Background of selected items, for example, a selected checkbox.                      </td></tr>
+        <tr><td style="background-color: VisitedText;      color:Canvas             " >VisitedText     </td><td><code>VisitedText     </code></td><td><code> Canvas           </code></td><td>Text of visited links.                                          </td></tr>
+        <tr><td style="background-color: Mark;             color:MarkText           " >Mark            </td><td><code>Mark            </code></td><td><code> MarkText         </code></td><td>Background of text that has been specially marked (such as by the HTML <code>mark</code> element).                                          </td></tr>
+        <tr><td style="background-color: CanvasText;       color:Canvas             " >CanvasText      </td><td><code>CanvasText      </code></td><td><code> Canvas           </code></td><td>Text color in application content or documents.                </td></tr>
+        <tr><td style="background-color: ButtonText;       color:Canvas             " >ButtonText      </td><td><code>ButtonText      </code></td><td><code> Canvas           </code></td><td>Text color of controls.                                        </td></tr>
+        <tr><td style="background-color: FieldText;        color:Canvas             " >FieldText       </td><td><code>FieldText       </code></td><td><code> Canvas           </code></td><td>Text in input fields.                                          </td></tr>
+        <tr><td style="background-color: MarkText;         color:Mark               " >MarkText        </td><td><code>MarkText        </code></td><td><code> Mark             </code></td><td>Text that has been specially marked (such as by the HTML <code>mark</code> element). </td></tr>
+        <tr><td style="background-color: ButtonBorder;     color:Canvas             " >ButtonBorder    </td><td><code>ButtonBorder    </code></td><td><code> Canvas           </code></td><td>Base border color of controls.                                 </td></tr>
+        <tr><td style="background-color: GrayText;         color:ButtonFace         " >GrayText        </td><td><code>GrayText        </code></td><td><code> ButtonFace       </code></td><td>Text color for disabled items (for example, a disabled control).    </td></tr>
+        <tr><td style="background-color: ButtonFace;       color:CanvasText         " >ButtonFace      </td><td><code>ButtonFace      </code></td><td><code> CanvasText       </code></td><td>Background color of controls.                                  </td></tr>
+        <tr><td style="background-color: Canvas;           color:CanvasText         " >Canvas          </td><td><code>Canvas          </code></td><td><code> CanvasText       </code></td><td>Background of application content or documents.                </td></tr>
+        <tr><td style="background-color: Field;            color:CanvasText         " >Field           </td><td><code>Field           </code></td><td><code> CanvasText       </code></td><td>Background of input fields.                                    </td></tr>
+        <tr><td style="background-color: HighlightText;    color:Highlight          " >HighlightText   </td><td><code>HighlightText   </code></td><td><code> Highlight        </code></td><td>Text color of selected items.                                       </td></tr>
+        <tr><td style="background-color: SelectedItemText; color:SelectedItem       " >SelectedItemText</td><td><code>SelectedItemText</code></td><td><code> SelectedItem     </code></td><td>Text of selected items.                                             </td></tr>
+        </tbody></table>
+    <table class="dashed-diagonal-background" style="color-scheme: dark;">
+        <caption>Dark mode</caption>
         <thead>
         <tr>
             <th>Sample</th><th>background  </th><th>text color </th><th>Description</th>

package/src/mocks/versions.mock.ts CHANGED Viewed

@@ -3,7 +3,7 @@ export default {
     "_rev": "5-df363ab4a2b9c478c01e021bde4fbafe",
     "name": "@epa-wg/custom-element-dist",
     "dist-tags": {
-        "latest": "0.0.35"
+        "latest": "0.0.37"
     },
     "versions": {
         "0.0.1": {

package/src/stories/__screenshots__/http-request.test.ts/http-request-http-request-headers-and-response-status-and-headers-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/http-request.test.ts/http-request-http-request-with-delayed--5-seconds-response-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/http-request.test.ts/http-request-http-request-with-error-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/http-request.test.ts/http-request-url-and-slice-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/slots.test.stories.ts/slots-slots-TemplateWithAttributesAndCondition-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-BooleanAndCondition-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-BooleanOrCondition-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-ChooseNoAttribute-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-ChooseOtherwise-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-ChooseSecondWhen-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-ChooseWhenOtherwise-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-IfFalse-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-IfNotExists-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-IfTrue-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-MultipleIfOrderingIssue-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-MultipleInstances-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-NestedConditions-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-NestedConditionsInactive-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-NumericComparison-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-NumericComparisonLow-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-for-each.test.stories.ts/xslt-for-each-xslt-for-each-MultipleIfOrderingIssue-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/xslt-if.test.stories.ts/xslt-if-xslt-if-MultipleIfOrderingIssue-1.png ADDED Viewed

Binary file

package/src/stories/attributes.test.stories.ts CHANGED Viewed

@@ -25,6 +25,7 @@ const meta =
 {        title: 'attributes'
 // ,         tags: ['autodocs']
 ,       render
+,   parameters: { test:{ dangerouslyIgnoreUnhandledErrors: true}}
 };
 export default meta;
@@ -290,6 +291,7 @@ export const AttributesPropagationUp:Story  =
         t3.querySelector('input')?.focus();
         await userEvent.keyboard('DCE');
+        await canvas.findByText('//from-input: DCE')
         await expect( t3 ).toHaveAttribute('p3','DCE');
     },

package/src/stories/dom-merge.test.stories.ts CHANGED Viewed

@@ -30,6 +30,7 @@ function render(args: TProps)
 const meta =
 {   title:      'dom-merge'
 ,   render
+,   parameters: { test:{ dangerouslyIgnoreUnhandledErrors: true}}
 };
 export default meta;

package/src/stories/external-template.test.stories.ts CHANGED Viewed

@@ -24,6 +24,7 @@ function render(args: TProps)
 const meta =
 {   title:      'external-templates'
 ,   render
+,   parameters: { test:{ dangerouslyIgnoreUnhandledErrors: true}}
 };
 export default meta;
@@ -151,6 +152,7 @@ export const ExternalHtmlFileInline:Story  =
         const canvas = within(canvasElement);
         await canvas.findByText(ExternalHtmlFileInline.args!.title as string);
         await canvas.findByText('👋');
+        await canvas.findByText('👌');
         const t5 = canvasElement.innerHTML;
         expect(t5).to.include('👋');
         expect(t5).to.include('👌');
@@ -169,7 +171,7 @@ export const HtmlWithinHtmlFile:Story  =
     {
         const canvas = within(canvasElement);
         await canvas.findByText(HtmlWithinHtmlFile.args!.title as string);
-        expect(await canvas.findByText('👋')).toBeInTheDocument();
+        await expect(await canvas.findByText('👋')).toBeInTheDocument();
     },
 };
@@ -183,7 +185,7 @@ export const SvgWithinHtmlFile:Story  =
     {
         const canvas = within(canvasElement);
         await canvas.findByText(SvgWithinHtmlFile.args!.title as string);
-        expect(await canvas.findByTestId('svg-test')).toBeInTheDocument();
+        await expect(await canvas.findByTestId('svg-test')).toBeInTheDocument();
     },
 };
@@ -199,7 +201,7 @@ export const MathMLWithinHtmlFile:Story  =
         const frCanvas = await frameCanvas('fr',canvas);
         const ml = await frCanvas.findByTestId('ml-test');
-        expect(ml.firstElementChild.localName).toEqual('mrow');
+        await expect(ml.firstElementChild.localName).toEqual('mrow');
     },
 };

package/src/stories/http-request.stories.ts CHANGED Viewed

@@ -77,7 +77,8 @@ const meta =
             await story.play({canvasElement: document.body.firstElementChild as HTMLElement});
             resolve(0);
         }, 0));
-    },
+    }
+,   parameters: { test:{ dangerouslyIgnoreUnhandledErrors: true}}
 };
 export default meta;

package/src/stories/module-url.test.stories.ts CHANGED Viewed

@@ -30,6 +30,7 @@ function render(args: TProps)
 const meta =
 {   title:      'module-url'
 ,   render
+,   parameters: { test:{ dangerouslyIgnoreUnhandledErrors: true}}
 };
 export default meta;

package/src/stories/slice-events.test.stories.ts CHANGED Viewed

@@ -226,6 +226,7 @@ export const CheckboxUnchecked:Story  =
         await userEvent.click ( cb );
         await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();
         await userEvent.click ( cb );
+        await expect( await canvas.findByText('slice:')).toBeInTheDocument();
         await expect( p.textContent).toEqual('slice: ');
     },
@@ -250,6 +251,8 @@ export const CheckboxSliceValue:Story  =
         await userEvent.click ( cb );
         await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();
         await userEvent.click ( cb );
+        await expect( await canvas.findByText('slice:')).toBeInTheDocument();
         await expect( p.textContent).toEqual('slice: ');
     },

package/src/stories/xslt-for-each.test.stories.ts CHANGED Viewed

@@ -27,7 +27,12 @@ function render(args: TProps) {
 const meta = {
     title: 'xslt/for-each',
-    render
+    render,
+    parameters: {
+        test: {
+            dangerouslyIgnoreUnhandledErrors: true,
+        },
+    },
 };
 export default meta;
@@ -324,6 +329,99 @@ export const ForEach_0_2_N: Story = {
 };
+const Table3x3Data = `
+<rows>
+    <r id="1"><d>A1</d><d>A2</d><d>A3</d></r>
+    <r id="2"><d>B1</d><d>B2</d><d>B3</d></r>
+    <r id="3"><d>C1</d><d>C2</d><d>C3</d></r>
+</rows>`;
+export const ForEach_Table_3x3: Story = {
+    args: {
+        title: 'Table 3x3: initially empty, rows shown by checkbox, content stays inside table',
+        tag: 'for-each-table-3x3',
+        template: `
+            <xsl:variable name="rows-data">${Table3x3Data}</xsl:variable>
+            <variable name="rows" select="exsl:node-set($rows-data)/*/*"></variable>
+            <label><input type="checkbox" data-testid="toggle-rows" slice="show-rows" value="yes" /> Show rows</label>
+            <variable name="show-rows" select="//show-rows = 'yes'"></variable>
+<pre data-testid="just-text">
+JUST_TEXT_BEFORE
+    <for-each select="$rows[$show-rows]">
+        <for-each select="*">
+            {.} #
+        </for-each>
+    </for-each>
+JUST_TEXT_AFTER
+</pre>
+            <div data-testid="container">
+                TEXT_BEFORE
+                <xhtml:table data-testid="the-table">
+                    <xhtml:thead>
+                        <xhtml:tr><xhtml:th>Col A</xhtml:th><xhtml:th>Col B</xhtml:th><xhtml:th>Col C</xhtml:th></xhtml:tr>
+                    </xhtml:thead>
+                    <xhtml:tbody data-testid="table-body">
+                        <for-each select="$rows[$show-rows]">
+                            <xhtml:tr data-testid="row-{@id}">
+                                <for-each select="*">
+                                    <xhtml:td>{.}</xhtml:td>
+                                </for-each>
+                            </xhtml:tr>
+                        </for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
+                TEXT_AFTER
+            </div>
+        `,
+        payload: `
+            <for-each-table-3x3></for-each-table-3x3>
+        `
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const justTextContainer = await canvas.findByTestId('just-text');
+        expect(justTextContainer.textContent).toMatch(/JUST_TEXT_BEFORE[\s\S]*JUST_TEXT_AFTER/);
+        const container = await canvas.findByTestId('container');
+        const table = await canvas.findByTestId('the-table');
+        const tbody = await canvas.findByTestId('table-body');
+        // Initially no rows visible
+        expect(tbody.querySelectorAll('tr').length).toBe(0);
+        // TEXT_BEFORE ... TEXT_AFTER with table in between (but no row content)
+        expect(container.textContent).toMatch(/TEXT_BEFORE[\s\S]*Col A[\s\S]*TEXT_AFTER/);
+        // Toggle checkbox to show rows
+        await fireEvent.click(await canvas.findByTestId('toggle-rows'));
+        // Now 3 rows should be visible
+        expect(await canvas.findByTestId('row-1')).toBeInTheDocument();
+        expect(await canvas.findByTestId('row-2')).toBeInTheDocument();
+        expect(await canvas.findByTestId('row-3')).toBeInTheDocument();
+        expect(tbody.querySelectorAll('tr').length).toBe(3);
+        expect(justTextContainer.textContent).toMatch(/JUST_TEXT_BEFORE[\s\S]*A1 #/);
+        expect(justTextContainer.textContent).toMatch(/C3 #[\s\S]*JUST_TEXT_AFTER/);
+        // Verify rows are inside the table (TR should be children of TBODY)
+        const rows = tbody.querySelectorAll('tr');
+        rows.forEach(row => {
+            expect(row.parentElement).toBe(tbody);
+        });
+        // Verify table content is between TEXT_BEFORE and TEXT_AFTER
+        expect(container.textContent).toMatch(/TEXT_BEFORE[\s\S]*?Col A[\s\S]*?Col B[\s\S]*?Col C[\s\S]*?A1[\s\S]*?A2[\s\S]*?A3[\s\S]*?B1[\s\S]*?B2[\s\S]*?B3[\s\S]*?C1[\s\S]*?C2[\s\S]*?C3[\s\S]*?TEXT_AFTER/);
+        // Verify no content leaked outside the table
+        const tableHtml = table.outerHTML;
+        expect(tableHtml).toContain('A1');
+        expect(tableHtml).toContain('C3');
+    }
+};
 //#region unit tests
 /* istanbul ignore else -- @preserve */
 if ('test' === import.meta.env.MODE &&