Tree with multiple & lazy: three related bugs

Describe the bug

1. create a Tree with selection="multiple"
2. select a non-leaf tree item that is lazy

Bug 1: selecting the non-leaf lazy item causes it to expand

Bug 2: the children should all be selected, but they are all unselected

Bug 3: the sl-selection-change event doesn't fire again after loading the children. This is at least consistent with (2)

This is the code from the lazy-loading section of the docs, but with selection="multiple":

<sl-tree selection="multiple">
  <sl-tree-item lazy>Available Trees</sl-tree-item>
</sl-tree>

<script type="module">
  const lazyItem = document.querySelector('sl-tree-item[lazy]');

  lazyItem.addEventListener('sl-lazy-load', () => {
    // Simulate asynchronous loading
    setTimeout(() => {
      const subItems = ['Birch', 'Cedar', 'Maple', 'Pine'];

      for (const item of subItems) {
        const treeItem = document.createElement('sl-tree-item');
        treeItem.innerText = item;
        lazyItem.append(treeItem);
      }

      // Disable lazy mode once the content has been loaded
      lazyItem.lazy = false;
    }, 1000);
  });
</script>

Demo

You can recreate this on the docs page by running

document.querySelector('#lazy-loading ~ .code-preview sl-tree').setAttribute('selection', 'multiple')

and then checking the checkbox.

Screenshots

https://github.com/user-attachments/assets/3e1b8b9b-c966-4690-9a25-6a06eccf825d