Recalculate grid for a slot change.

tests/utils/media-grid-controller.test.ts

@@ -63,7 +63,7 @@ const createSlotParent = (): HTMLElement => {
 const createSlotHost = (options?: {
   children?: HTMLElement[];
   parent?: HTMLElement;
-}): HTMLElement => {
+}): HTMLSlotElement => {
   const parent = options?.parent ?? createSlotParent();
   const slot = document.createElement('slot');
   parent.shadowRoot?.append(slot);
@@ -292,6 +292,32 @@ describe('MediaGridController', () => {
     expect(controller.getSelected()).toBeNull();
   });
 
+  it('should replace children of a slot when they change', () => {
+    const children = createChildren();
+    const slotParent = createSlotParent();
+    const host = createSlotHost({ children: children, parent: slotParent });
+
+    const controller = createController(host, { selected: '1' });
+
+    expect(controller.getSelected()).toBe('1');
+    expect(controller.getGridSize()).toBe(3);
+
+    children.forEach((child) => slotParent.removeChild(child));
+    const newChildren = createChildren(['one', 'two', 'three']);
+    newChildren.forEach((child) => slotParent.append(child));
+
+    host.dispatchEvent(new Event('slotchange'));
+
+    expect(controller.getGridContents()).toEqual(
+      new Map([
+        ['one', newChildren[0]],
+        ['two', newChildren[1]],
+        ['three', newChildren[2]],
+      ]),
+    );
+    expect(controller.getSelected()).toBeNull();
+  });
+
   it('should construct masonry correctly', () => {
     const children = createChildren();
     const host = createHost({ children: children });