fix(demotools): enhance runAfterRender to provide full DOM API access and improve element selection

readme.md

@@ -183,23 +183,24 @@ 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 (children: HTMLCollection) => {
-      // Access all slotted elements
-      console.log('Slotted elements:', children.length);
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
+      // Use querySelector to find specific elements
+      const myComponent = wrapper.querySelector('my-component') as MyComponent;
+      console.log('Component found:', myComponent);
       
-      // Access specific element (e.g., first child)
-      const myComponent = children[0] as MyComponent;
-      console.log('Component mounted:', myComponent);
+      // Access all children via wrapper.children
+      console.log('Total children:', wrapper.children.length);
+      
+      // Use querySelectorAll for multiple elements
+      const allDivs = wrapper.querySelectorAll('div');
+      console.log('Found divs:', allDivs.length);
       
       // Simulate user interactions
       myComponent.value = 'Test value';
       await myComponent.updateComplete;
       
-      // Trigger methods
-      myComponent.handleClick();
-      
-      // Work with multiple elements if present
-      Array.from(children).forEach((child, index) => {
+      // Work with all children
+      Array.from(wrapper.children).forEach((child, index) => {
         console.log(`Child ${index}:`, child.tagName);
       });
     }}>
@@ -309,12 +310,18 @@ For complex property types, implement custom logic in your demo:
 
 ```typescript
 public static demo = () => html`
-  <dees-demowrapper .runAfterRender=${(children) => {
-    // Set up complex property handling for all children
-    Array.from(children).forEach(child => {
-      child.addEventListener('property-change', (e) => {
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
+    // Use querySelector to target specific elements
+    const component = wrapper.querySelector('my-component');
+    if (component) {
+      component.addEventListener('property-change', (e) => {
         console.log('Property changed:', e.detail);
       });
+    }
+    
+    // Or handle all elements of a type
+    wrapper.querySelectorAll('my-component').forEach(el => {
+      el.addEventListener('click', () => console.log('Clicked!'));
     });
   }}>
     <my-component></my-component>
@@ -354,9 +361,10 @@ Initialize the WCC Tools dashboard.
 Component for wrapping demos with post-render logic.
 
 - `runAfterRender`: Function called after the wrapped elements render
-- Receives the complete HTMLCollection of all slotted elements
+- Receives the wrapper element itself, providing full DOM API access
+- Use `wrapper.querySelector()` and `wrapper.querySelectorAll()` for element selection
+- Access children via `wrapper.children` property
 - Supports async operations
-- Access individual elements via array index or Array.from()
 
 ## Browser Support
 - Chrome/Edge (latest)