fix(demotools): update DeesDemoWrapper to handle multiple slotted elements in runAfterRender callback

readme.md

@@ -178,28 +178,33 @@ public static styles = [
 The demo tools provide enhanced testing capabilities:
 
 ```typescript
-import * as demoTools from '@design.estate/dees-wcctools/demoTools';
+import * as demoTools from '@design.estate/dees-wcctools/demotools';
 
 @customElement('my-component')
 export class MyComponent extends DeesElement {
   public static demo = () => html`
-    <dees-demowrapper .runAfterRender=${async (element: MyComponent) => {
-      // Access the rendered component instance
-      console.log('Component mounted:', element);
+    <dees-demowrapper .runAfterRender=${async (children: HTMLCollection) => {
+      // Access all slotted elements
+      console.log('Slotted elements:', children.length);
+      
+      // Access specific element (e.g., first child)
+      const myComponent = children[0] as MyComponent;
+      console.log('Component mounted:', myComponent);
       
       // Simulate user interactions
-      element.value = 'Test value';
-      await element.updateComplete;
+      myComponent.value = 'Test value';
+      await myComponent.updateComplete;
       
       // Trigger methods
-      element.handleClick();
+      myComponent.handleClick();
       
-      // Assert component state
-      if (element.isValid) {
-        console.log('Component validation passed');
-      }
+      // Work with multiple elements if present
+      Array.from(children).forEach((child, index) => {
+        console.log(`Child ${index}:`, child.tagName);
+      });
     }}>
       <my-component></my-component>
+      <div>Additional content</div>
     </dees-demowrapper>
   `;
 }
@@ -304,10 +309,12 @@ For complex property types, implement custom logic in your demo:
 
 ```typescript
 public static demo = () => html`
-  <dees-demowrapper .runAfterRender=${(el) => {
-    // Set up complex property handling
-    el.addEventListener('property-change', (e) => {
-      console.log('Property changed:', e.detail);
+  <dees-demowrapper .runAfterRender=${(children) => {
+    // Set up complex property handling for all children
+    Array.from(children).forEach(child => {
+      child.addEventListener('property-change', (e) => {
+        console.log('Property changed:', e.detail);
+      });
     });
   }}>
     <my-component></my-component>
@@ -346,9 +353,10 @@ Initialize the WCC Tools dashboard.
 ### DeesDemoWrapper
 Component for wrapping demos with post-render logic.
 
-- `runAfterRender`: Function called after the wrapped element renders
-- Receives the first child element as parameter
+- `runAfterRender`: Function called after the wrapped elements render
+- Receives the complete HTMLCollection of all slotted elements
 - Supports async operations
+- Access individual elements via array index or Array.from()
 
 ## Browser Support
 - Chrome/Edge (latest)