1.0.95

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.92",
+  "version": "1.0.95",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {
     ".": "./dist_ts_web/index.js",
-    "./demoTools": "./dist_ts_demotools"
+    "./demotools": "./dist_ts_demotools"
   },
   "type": "module",
   "scripts": {

readme.hints.md

@@ -30,22 +30,37 @@ A utility component for wrapping demo elements with post-render functionality.
 
 **Usage:**
 ```typescript
-import { DeesDemoWrapper } from '@design.estate/dees-wcctools/demoTools';
+import * as demoTools from '@design.estate/dees-wcctools/demotools';
 
 // In your demo function:
 demo: () => html`
-  <dees-demowrapper .runAfterRender=${(element) => {
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
-    // Do something with the rendered element
+    // Use querySelector for specific elements
-    element.setAttribute('data-demo', 'true');
+    const myElement = wrapper.querySelector('my-custom-element');
-    console.log('Element rendered:', element);
+    myElement?.setAttribute('data-demo', 'true');
+    
+    // Access all children
+    console.log('All children:', wrapper.children);
+    
+    // Use querySelectorAll for multiple elements
+    wrapper.querySelectorAll('div').forEach(div => {
+      console.log('Found div:', div);
+    });
+    
+    // Full DOM API available
+    const firstChild = wrapper.firstElementChild;
+    const hasClass = wrapper.querySelector('.my-class');
   }}>
     <my-custom-element></my-custom-element>
+    <div>Additional content</div>
   </dees-demowrapper>
 `
 ```
 
 **Features:**
 - Wraps demo elements without affecting layout (uses `display: contents`)
-- Provides access to the rendered element instance after mounting
+- Provides the wrapper element itself with full DOM API access
+- Use querySelector/querySelectorAll for powerful element selection
+- Access children via wrapper.children property
 - Supports async operations in runAfterRender callback
-- Automatically handles timing to ensure element is fully rendered
+- Automatically handles timing to ensure elements are fully rendered

readme.md

@@ -178,28 +178,34 @@ 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) => {
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
-      // Access the rendered component instance
+      // Use querySelector to find specific elements
-      console.log('Component mounted:', element);
+      const myComponent = wrapper.querySelector('my-component') as MyComponent;
+      console.log('Component found:', 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
-      element.value = 'Test value';
+      myComponent.value = 'Test value';
-      await element.updateComplete;
+      await myComponent.updateComplete;
       
-      // Trigger methods
+      // Work with all children
-      element.handleClick();
+      Array.from(wrapper.children).forEach((child, index) => {
-      
+        console.log(`Child ${index}:`, child.tagName);
-      // Assert component state
+      });
-      if (element.isValid) {
-        console.log('Component validation passed');
-      }
     }}>
       <my-component></my-component>
+      <div>Additional content</div>
     </dees-demowrapper>
   `;
 }
@@ -304,10 +310,18 @@ For complex property types, implement custom logic in your demo:
 
 ```typescript
 public static demo = () => html`
-  <dees-demowrapper .runAfterRender=${(el) => {
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
-    // Set up complex property handling
+    // Use querySelector to target specific elements
-    el.addEventListener('property-change', (e) => {
+    const component = wrapper.querySelector('my-component');
-      console.log('Property changed:', e.detail);
+    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>
@@ -346,8 +360,10 @@ Initialize the WCC Tools dashboard.
 ### DeesDemoWrapper
 Component for wrapping demos with post-render logic.
 
-- `runAfterRender`: Function called after the wrapped element renders
+- `runAfterRender`: Function called after the wrapped elements render
-- Receives the first child element as parameter
+- 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
 
 ## Browser Support

readme.plan.md

@@ -34,11 +34,11 @@ The properties panel has timing issues detecting rendered elements because:
 ## Created DeesDemoWrapper Component
 - Location: ts_demotools/demotools.ts
 - Allows wrapping demo elements with post-render functionality
-- Provides runAfterRender callback that receives the rendered element
+- Provides runAfterRender callback that receives ALL slotted elements as HTMLCollection
 - Uses display: contents to not affect layout
 - Handles timing automatically with 50ms delay after firstUpdated
 - Supports both sync and async callbacks
-- Exports available at @design.estate/dees-wcctools/demoTools
+- Exports available at @design.estate/dees-wcctools/demotools (lowercase)
 
 # Documentation Update (COMPLETED)
 
@@ -50,4 +50,15 @@ The properties panel has timing issues detecting rendered elements because:
 - Best practices and guidelines
 - API reference
 - Browser support information
-- Complete examples for all major features
+- Complete examples for all major features
+
+# Enhanced DemoWrapper (COMPLETED)
+
+## Modified runAfterRender callback:
+- Now receives the wrapper element itself instead of just children
+- Provides full DOM API access (querySelector, querySelectorAll, etc.)
+- querySelector works on slotted content (light DOM children)
+- Access children via wrapper.children property
+- Updated documentation with correct import path (lowercase 'demotools')
+- Examples show how to use querySelector for powerful element selection
+- Added clarifying comment about querySelector working on slotted content

ts_demotools/demotools.ts

@@ -3,7 +3,7 @@ import { DeesElement, customElement, html, css, property, type TemplateResult }
 @customElement('dees-demowrapper')
 export class DeesDemoWrapper extends DeesElement {
   @property({ attribute: false })
-  public runAfterRender: (element: HTMLElement) => void | Promise<void>;
+  public runAfterRender: (wrapperElement: DeesDemoWrapper) => void | Promise<void>;
 
   public static styles = [
     css`
@@ -25,14 +25,13 @@ export class DeesDemoWrapper extends DeesElement {
     // Wait a bit for slotted content to render
     await new Promise(resolve => setTimeout(resolve, 50));
     
-    // Find the first element child (excluding text nodes)
+    // Check if there are slotted elements and runAfterRender is defined
-    const slottedElements = this.children;
+    if (this.children.length > 0 && this.runAfterRender) {
-    if (slottedElements.length > 0 && this.runAfterRender) {
+      // Call the runAfterRender function with the wrapper element itself
-      const firstElement = slottedElements[0] as HTMLElement;
+      // Note: querySelector/querySelectorAll will work on slotted content
-      
+      // because slotted elements remain in the light DOM as children
-      // Call the runAfterRender function with the element
       try {
-        await this.runAfterRender(firstElement);
+        await this.runAfterRender(this);
       } catch (error) {
         console.error('Error in runAfterRender:', error);
       }