Handle paired conditionals across sibling branches in UnclosedHTMLElement

Add a cross-identifier balancing pass that matches unmatched opens from one conditional against unmatched closes from a sibling conditional within the same grandparent. This handles patterns like the bento-grid where forloop.first opens a div and forloop.last closes it — different conditions but semantically paired.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: graygilmore

packages/theme-check-common/src/checks/unclosed-html-element/index.spec.ts

@@ -188,6 +188,61 @@ describe('Module: UnclosedHTMLElement', () => {
     expect(highlightedOffenses(file, offenses)).to.include('</summary>');
   });
 
+  it('should not report for paired conditional open/close in for-loop boundary conditions', async () => {
+    const testCases = [
+      // Bento-grid pattern: open on forloop.first, close on forloop.last
+      `
+        {% for item in items %}
+          {% if forloop.first or item_modulo == 1 %}
+            <div class="bento-box">
+          {% endif %}
+
+          <div class="bento-box__item">{{ item }}</div>
+
+          {% if forloop.last or item_modulo == 0 %}
+            </div>
+          {% endif %}
+        {% endfor %}
+      `,
+      // Simpler variant: different conditions but balanced open/close in same grandparent
+      `
+        <div>
+          {% if condition_a %}
+            <section>
+          {% endif %}
+
+          {% if condition_b %}
+            </section>
+          {% endif %}
+        </div>
+      `,
+    ];
+
+    for (const file of testCases) {
+      const offenses = await runLiquidCheck(UnclosedHTMLElement, file);
+      expect(offenses, file).to.have.length(0);
+    }
+  });
+
+  it('should still report when cross-identifier tags do not balance by name', async () => {
+    const file = `
+      <div>
+        {% if condition_a %}
+          <section>
+        {% endif %}
+
+        {% if condition_b %}
+          </article>
+        {% endif %}
+      </div>
+    `;
+
+    const offenses = await runLiquidCheck(UnclosedHTMLElement, file);
+    expect(offenses).to.have.length(2);
+    expect(highlightedOffenses(file, offenses)).to.include('<section>');
+    expect(highlightedOffenses(file, offenses)).to.include('</article>');
+  });
+
   it('should report offenses when conditions do not match', async () => {
     const file = `
       <div>

packages/theme-check-common/src/checks/unclosed-html-element/index.ts

@@ -139,6 +139,13 @@ export const UnclosedHTMLElement: LiquidCheckDefinition = {
 
       async onCodePathEnd() {
         for (const [grandparent, stacks] of stacksByGrandparent) {
+          // First pass: match opens/closes within each condition identifier.
+          // Collect unmatched nodes with their identifier for cross-identifier balancing.
+          const unmatchedByIdentifier = new Map<
+            ConditionIdentifer,
+            (HtmlElement | HtmlDanglingMarkerClose)[]
+          >();
+
           for (const identifier of stacks.identifiers) {
             const openNodes = stacks.open.get(identifier) ?? [];
             const closeNodes = stacks.close.get(identifier) ?? [];
@@ -170,8 +177,44 @@ export const UnclosedHTMLElement: LiquidCheckDefinition = {
               }
             }
 
-            // At the end, whatever is left in the stack is a reported offense.
-            for (const node of stack) {
+            unmatchedByIdentifier.set(identifier, stack);
+          }
+
+          // Second pass: try to balance unmatched opens from one condition
+          // identifier against unmatched closes from sibling condition identifiers
+          // within the same grandparent.
+          //
+          // This handles patterns like the bento-grid where an open tag is inside
+          // `{% if forloop.first %}` and the matching close is inside
+          // `{% if forloop.last %}` -- different conditions but semantically paired.
+          const allUnmatched = ([] as (HtmlElement | HtmlDanglingMarkerClose)[])
+            .concat(...unmatchedByIdentifier.values())
+            .sort((a, b) => a.position.start - b.position.start);
+
+          const crossBalancedStack = [] as (HtmlElement | HtmlDanglingMarkerClose)[];
+          for (const node of allUnmatched) {
+            if (node.type === NodeTypes.HtmlElement) {
+              crossBalancedStack.push(node);
+            } else if (
+              crossBalancedStack.length > 0 &&
+              getName(node) === getName(crossBalancedStack.at(-1)!) &&
+              crossBalancedStack.at(-1)!.type === NodeTypes.HtmlElement &&
+              node.type === NodeTypes.HtmlDanglingMarkerClose
+            ) {
+              crossBalancedStack.pop();
+            } else {
+              crossBalancedStack.push(node);
+            }
+          }
+
+          // Build a set of nodes that were resolved by cross-identifier balancing
+          // so we can skip reporting them.
+          const crossBalancedRemaining = new Set(crossBalancedStack);
+
+          for (const [identifier, unmatched] of unmatchedByIdentifier) {
+            for (const node of unmatched) {
+              if (!crossBalancedRemaining.has(node)) continue;
+
               if (node.type === NodeTypes.HtmlDanglingMarkerClose) {
                 context.report({
                   message: `Closing tag does not have a matching opening tag for condition \`${identifier}\` in ${