1.0.97

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.91",
+  "version": "1.0.97",
   "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/index.js"
   },
   "type": "module",
   "scripts": {

readme.hints.md

@@ -12,10 +12,16 @@ The properties panel had timing issues detecting rendered elements because:
 1. Added a 100ms initial delay to allow render completion
 2. Implemented recursive element search that:
    - Searches through nested children up to 5 levels deep
-   - Checks shadow roots of elements
+   - Checks both light DOM and shadow DOM for all elements
-   - Handles complex DOM structures
+   - Handles complex DOM structures generically
+   - Works with any wrapper elements, not specific to dees-demowrapper
 3. Added retry mechanism with up to 5 attempts (200ms between retries)
 4. Improved error messages to show retry count
+5. Comprehensive error handling:
+   - Errors in element search don't break the update cycle
+   - Individual property errors don't prevent other properties from rendering
+   - scheduleUpdate always completes even if createProperties fails
+   - Clears warnings and property content appropriately on errors
 
 ### Code Flow
 1. Dashboard renders element demo into viewport using `render(anonItem.demo(), viewport)`
@@ -30,22 +36,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

@@ -1,101 +1,376 @@
 # @design.estate/dees-wcctools
-wcc tools for creating element catalogues
+Web Component Development Tools - A powerful framework for building, testing, and documenting web components
 
-## Install
+## Overview
-To install `@design.estate/dees-wcctools`, you can use npm:
+`@design.estate/dees-wcctools` provides a comprehensive development environment for web components, featuring:
+- 🎨 Interactive component catalogue with live preview
+- 🔧 Real-time property editing
+- 🌓 Theme switching (light/dark modes)
+- 📱 Responsive viewport testing
+- 🧪 Advanced demo tools for component testing
+- 🚀 Zero-config setup with TypeScript and Lit support
+
+## Installation
 
 ```bash
-npm install @design.estate/dees-wcctools --save
+# Using npm
+npm install @design.estate/dees-wcctools --save-dev
+
+# Using pnpm (recommended)
+pnpm add -D @design.estate/dees-wcctools
 ```
 
-## Usage
+## Quick Start
-The `@design.estate/dees-wcctools` package provides a set of tools for creating element catalogues using Web Components. It leverages LitElement for creating custom elements and provides a structured way to showcase and test these elements in various environments and themes.
 
-### Setting Up
+### 1. Create Your Component
-First, ensure that your project is set up to use TypeScript and ESM syntax. This guide assumes you have a basic understanding of TypeScript and modern JavaScript development practices.
-
-Start by importing the necessary tools from `@design.estate/dees-wcctools` in your main TypeScript file. 
 
 ```typescript
-import { setupWccTools } from '@design.estate/dees-wcctools';
+import { DeesElement, customElement, html, css, property } from '@design.estate/dees-element';
-```
 
-### Defining Custom Elements
+@customElement('my-button')
-Define your custom elements using LitElement. Here's a simple example of an element:
+export class MyButton extends DeesElement {
+  // Define a demo for the catalogue
+  public static demo = () => html`
+    <my-button .label=${'Click me!'} .variant=${'primary'}></my-button>
+  `;
 
-```typescript
-import { LitElement, html, customElement } from 'lit';
-
-@customElement('my-element')
-class MyElement extends LitElement {
-  render() {
-    return html`<p>Hello, world!</p>`;
-  }
-}
-```
-
-### Bootstrapping the WCCTools Dashboard
-To showcase your elements, `@design.estate/dees-wcctools` provides a handy way to bootstrap a dashboard where your elements can be registered and displayed.
-
-Create a bootstrap function in your main file or a separate module:
-
-```typescript
-async function bootstrapWCCTools() {
-  // Define your elements here
-  const elements = {
-    'my-element': MyElement, // Assuming MyElement is imported
-  };
-
-  // Optionally, define pages as functions returning Lit HTML Templates
-  const pages = {
-    home: () => html`<h1>Welcome to My Element Catalogue</h1>`,
-  };
-
-  // Setup the WCCTools dashboard
-  setupWccTools(elements, pages);
-}
-```
-
-Call this function to initialize your catalogue:
-
-```typescript
-bootstrapWCCTools();
-```
-
-### Configurations and Customizations
-The `setupWccTools` function accepts two arguments: `elements` and `pages`. 
-
-- `elements`: An object where keys are element tags (e.g., 'my-element') and values are the corresponding class definitions.
-- `pages`: An optional object where keys are page identifiers and values are functions returning Lit HTML templates.
-
-### Testing Elements
-Once the dashboard is set up, navigate to your project in a web browser. You'll see a sidebar listing all registered elements and pages. Clicking on an element name will display it in the main view, allowing you to interact with it and see it in action.
-
-### Theme and Environment Testing
-The dashboard also provides options for testing your elements in different environments (e.g., desktop, tablet) and themes (light or dark). This helps ensure that your elements are versatile and adaptable to varying conditions.
-
-### Expanding Your Catalogue
-To add more elements to your catalogue, simply extend the `elements` object and rerun `bootstrapWCCTools()`. This modular approach makes it easy to maintain and expand your element catalogue.
-
-### Leveraging TypeScript
-Using TypeScript allows you to enforce typing and build more reliable web components. Define properties with decorators, and use TypeScript's features to enhance your component development process.
-
-```typescript
-import { LitElement, property, html, customElement } from 'lit';
-
-@customElement('typed-element')
-class TypedElement extends LitElement {
   @property({ type: String })
-  name: string = 'World';
+  public label: string = 'Button';
 
-  render() {
+  @property({ type: String })
-    return html`<p>Hello, ${this.name}!</p>`;
+  public variant: 'primary' | 'secondary' = 'primary';
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      button {
+        padding: 8px 16px;
+        border-radius: 4px;
+        border: none;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s;
+      }
+      button.primary {
+        background: #007bff;
+        color: white;
+      }
+      button.secondary {
+        background: #6c757d;
+        color: white;
+      }
+      button:hover {
+        opacity: 0.9;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <button class="${this.variant}">
+        ${this.label}
+      </button>
+    `;
   }
 }
 ```
 
-### Conclusion
+### 2. Set Up Your Catalogue
-`@design.estate/dees-wcctools` provides a powerful, flexible platform for developing, showcasing, and testing web components. By leveraging modern development practices like TypeScript and LitElement, you can build a robust catalogue of reusable web components ready for any project.
+
+```typescript
+// catalogue.ts
+import { setupWccTools } from '@design.estate/dees-wcctools';
+import { html } from 'lit';
+
+// Import your components
+import './components/my-button.js';
+import './components/my-card.js';
+
+// Define elements for the catalogue
+const elements = {
+  'my-button': MyButton,
+  'my-card': MyCard,
+};
+
+// Optionally define pages
+const pages = {
+  'home': () => html`
+    <div style="padding: 20px;">
+      <h1>Welcome to My Component Library</h1>
+      <p>Browse components using the sidebar.</p>
+    </div>
+  `,
+  'getting-started': () => html`
+    <div style="padding: 20px;">
+      <h2>Getting Started</h2>
+      <p>Installation and usage instructions...</p>
+    </div>
+  `,
+};
+
+// Initialize the catalogue
+setupWccTools(elements, pages);
+```
+
+### 3. Create an HTML Entry Point
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Component Catalogue</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body style="margin: 0; padding: 0;">
+  <script type="module" src="./catalogue.js"></script>
+</body>
+</html>
+```
+
+## Features
+
+### 🎯 Live Property Editing
+The properties panel automatically detects and allows editing of:
+- **String** properties with text inputs
+- **Number** properties with number inputs
+- **Boolean** properties with checkboxes
+- **Enum** properties with select dropdowns
+- **Object** and **Array** properties (read-only display)
+
+### 📱 Viewport Testing
+Test your components across different screen sizes:
+- **Phone** (320px width)
+- **Phablet** (600px width)
+- **Tablet** (768px width)
+- **Desktop** (full width)
+
+### 🌓 Theme Support
+Components automatically adapt to light/dark themes using the `goBright` property:
+
+```typescript
+public render() {
+  return html`
+    <div class="${this.goBright ? 'light-theme' : 'dark-theme'}">
+      <!-- Your component content -->
+    </div>
+  `;
+}
+```
+
+Or use CSS custom properties:
+```typescript
+import { cssManager } from '@design.estate/dees-element';
+
+public static styles = [
+  css`
+    :host {
+      color: ${cssManager.bdTheme('#000', '#fff')};
+      background: ${cssManager.bdTheme('#fff', '#000')};
+    }
+  `
+];
+```
+
+### 🧪 Advanced Demo Tools
+
+The demo tools provide enhanced testing capabilities:
+
+```typescript
+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 (wrapper) => {
+      // Use querySelector to find specific elements
+      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
+      myComponent.value = 'Test value';
+      await myComponent.updateComplete;
+      
+      // Work with all children
+      Array.from(wrapper.children).forEach((child, index) => {
+        console.log(`Child ${index}:`, child.tagName);
+      });
+    }}>
+      <my-component></my-component>
+      <div>Additional content</div>
+    </dees-demowrapper>
+  `;
+}
+```
+
+### 🎭 Container Queries Support
+
+Components can respond to their container size:
+
+```typescript
+public static styles = [
+  css`
+    @container wccToolsViewport (min-width: 768px) {
+      :host {
+        flex-direction: row;
+      }
+    }
+    
+    @container wccToolsViewport (max-width: 767px) {
+      :host {
+        flex-direction: column;
+      }
+    }
+  `
+];
+```
+
+## Component Guidelines
+
+### Required for Catalogue Display
+1. Components must expose a static `demo` property returning a Lit template
+2. Use `@property()` decorators for properties you want to be editable
+3. Export component classes for proper detection
+
+### Best Practices
+```typescript
+@customElement('best-practice-component')
+export class BestPracticeComponent extends DeesElement {
+  // ✅ Static demo property
+  public static demo = () => html`
+    <best-practice-component 
+      .complexProp=${{ key: 'value' }}
+      simpleAttribute="test"
+    ></best-practice-component>
+  `;
+
+  // ✅ Typed properties with defaults
+  @property({ type: String })
+  public title: string = 'Default Title';
+
+  // ✅ Complex property without attribute
+  @property({ attribute: false })
+  public complexProp: { key: string } = { key: 'default' };
+
+  // ✅ Enum with proper typing
+  @property({ type: String })
+  public variant: 'small' | 'medium' | 'large' = 'medium';
+}
+```
+
+## URL Routing
+
+The catalogue uses URL routing for deep linking:
+```
+/wcctools-route/:type/:name/:viewport/:theme
+
+Example:
+/wcctools-route/element/my-button/desktop/dark
+/wcctools-route/page/home/tablet/bright
+```
+
+## Development Workflow
+
+### Build and Watch
+```json
+{
+  "scripts": {
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element",
+    "watch": "tswatch element",
+    "serve": "http-server ./dist"
+  }
+}
+```
+
+### Project Structure
+```
+my-components/
+├── src/
+│   ├── components/
+│   │   ├── my-button.ts
+│   │   └── my-card.ts
+│   └── catalogue.ts
+├── dist/
+├── index.html
+└── package.json
+```
+
+## Advanced Features
+
+### Custom Property Handlers
+For complex property types, implement custom logic in your demo:
+
+```typescript
+public static demo = () => html`
+  <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>
+  </dees-demowrapper>
+`;
+```
+
+### Responsive Testing Helpers
+```typescript
+import * as domtools from '@design.estate/dees-domtools';
+
+public static styles = [
+  // Media query helpers
+  domtools.breakpoints.cssForPhone(css`
+    :host { font-size: 14px; }
+  `),
+  
+  domtools.breakpoints.cssForTablet(css`
+    :host { font-size: 16px; }
+  `),
+  
+  domtools.breakpoints.cssForDesktop(css`
+    :host { font-size: 18px; }
+  `)
+];
+```
+
+## API Reference
+
+### setupWccTools(elements, pages?)
+Initialize the WCC Tools dashboard.
+
+- `elements`: Object mapping element names to element classes
+- `pages`: Optional object mapping page names to template functions
+
+### DeesDemoWrapper
+Component for wrapping demos with post-render logic.
+
+- `runAfterRender`: Function called after the wrapped elements render
+- 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
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile browsers with Web Components support
 
 ## License and Legal Information
 

readme.plan.md

@@ -34,8 +34,55 @@ 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)
+
+## Updated readme.md with:
+- Comprehensive overview with feature highlights
+- Quick start guide with code examples
+- Detailed feature documentation
+- Advanced demo tools usage
+- Best practices and guidelines
+- API reference
+- Browser support information
+- 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
+
+## Fixed Properties Panel Compatibility:
+- Made element search generic - works with any container elements
+- Searches both light DOM and shadow DOM recursively
+- Improved error handling to prevent breaking the update cycle
+- Errors in one property don't prevent others from rendering
+- Detection continues working even after errors occur
+- Maintains compatibility with all element structures
+
+# Test Elements Created (COMPLETED)
+
+## Created comprehensive test elements:
+1. **test-noprops** - Element with no @property decorators
+2. **test-complextypes** - Element with arrays, objects, dates, and complex nested data
+3. **test-withwrapper** - Element that uses dees-demowrapper in its demo
+4. **test-edgecases** - Element with edge cases (null, undefined, NaN, Infinity, circular refs)
+5. **test-nested** - Element with deeply nested structure to test recursive search
+
+These test various scenarios:
+- Properties panel handling of elements without properties
+- Complex data type display and editing
+- Element detection inside dees-demowrapper
+- Error handling for problematic values
+- Deep nesting and shadow DOM traversal

test/elements/index.ts

@@ -1 +1,6 @@
 export * from './test-demoelement.js';
+export * from './test-noprops.js';
+export * from './test-complextypes.js';
+export * from './test-withwrapper.js';
+export * from './test-edgecases.js';
+export * from './test-nested.js';

test/elements/test-complextypes.ts

@@ -0,0 +1,137 @@
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+interface IComplexData {
+  name: string;
+  age: number;
+  tags: string[];
+  metadata: {
+    created: Date;
+    modified: Date;
+    author: string;
+  };
+}
+
+@customElement('test-complextypes')
+export class TestComplexTypes extends DeesElement {
+  public static demo = () => html`
+    <test-complextypes 
+      .complexData=${{
+        name: 'Test User',
+        age: 25,
+        tags: ['developer', 'designer'],
+        metadata: {
+          created: new Date(),
+          modified: new Date(),
+          author: 'System'
+        }
+      }}
+    ></test-complextypes>
+  `;
+
+  @property({ type: Array })
+  public stringArray: string[] = ['apple', 'banana', 'cherry'];
+
+  @property({ type: Array })
+  public numberArray: number[] = [1, 2, 3, 4, 5];
+
+  @property({ attribute: false })
+  public complexData: IComplexData = {
+    name: 'Default Name',
+    age: 0,
+    tags: [],
+    metadata: {
+      created: new Date(),
+      modified: new Date(),
+      author: 'Unknown'
+    }
+  };
+
+  @property({ type: Object })
+  public simpleObject = {
+    key1: 'value1',
+    key2: 'value2',
+    key3: 123
+  };
+
+  @property({ attribute: false })
+  public functionProperty = () => {
+    console.log('This is a function property');
+  };
+
+  @property({ type: Date })
+  public dateProperty = new Date();
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #f5f5f5;
+        border: 2px solid #ddd;
+        border-radius: 8px;
+        font-family: monospace;
+      }
+      .section {
+        margin: 10px 0;
+        padding: 10px;
+        background: white;
+        border-radius: 4px;
+      }
+      .label {
+        font-weight: bold;
+        color: #333;
+      }
+      .value {
+        color: #666;
+        margin-left: 10px;
+      }
+      pre {
+        background: #f0f0f0;
+        padding: 8px;
+        border-radius: 4px;
+        overflow-x: auto;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="section">
+        <span class="label">String Array:</span>
+        <span class="value">${this.stringArray.join(', ')}</span>
+      </div>
+      
+      <div class="section">
+        <span class="label">Number Array:</span>
+        <span class="value">${this.numberArray.join(', ')}</span>
+      </div>
+      
+      <div class="section">
+        <span class="label">Complex Data:</span>
+        <pre>${JSON.stringify(this.complexData, null, 2)}</pre>
+      </div>
+      
+      <div class="section">
+        <span class="label">Simple Object:</span>
+        <pre>${JSON.stringify(this.simpleObject, null, 2)}</pre>
+      </div>
+      
+      <div class="section">
+        <span class="label">Date Property:</span>
+        <span class="value">${this.dateProperty.toLocaleString()}</span>
+      </div>
+      
+      <div class="section">
+        <span class="label">Function Property:</span>
+        <span class="value">${typeof this.functionProperty}</span>
+      </div>
+    `;
+  }
+}

test/elements/test-edgecases.ts

@@ -0,0 +1,195 @@
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-edgecases')
+export class TestEdgeCases extends DeesElement {
+  public static demo = () => html`<test-edgecases></test-edgecases>`;
+
+  // Property with null value
+  @property({ type: String })
+  public nullableString: string | null = null;
+
+  // Property with undefined value
+  @property({ type: Number })
+  public undefinedNumber: number | undefined = undefined;
+
+  // Very long string
+  @property({ type: String })
+  public longString: string = 'Lorem ipsum '.repeat(50);
+
+  // Property with special characters
+  @property({ type: String })
+  public specialChars: string = '!@#$%^&*()_+-=[]{}|;\':",./<>?`~';
+
+  // Property that could cause rendering issues
+  @property({ type: String })
+  public htmlString: string = '<script>alert("test")</script><b>Bold text</b>';
+
+  // Numeric edge cases
+  @property({ type: Number })
+  public infinityNumber: number = Infinity;
+
+  @property({ type: Number })
+  public nanNumber: number = NaN;
+
+  @property({ type: Number })
+  public veryLargeNumber: number = Number.MAX_SAFE_INTEGER;
+
+  @property({ type: Number })
+  public verySmallNumber: number = Number.MIN_SAFE_INTEGER;
+
+  @property({ type: Number })
+  public floatNumber: number = 3.14159265359;
+
+  // Boolean-like values
+  @property({ type: String })
+  public booleanString: string = 'false';
+
+  @property({ type: Number })
+  public booleanNumber: number = 0;
+
+  // Empty values
+  @property({ type: String })
+  public emptyString: string = '';
+
+  @property({ type: Array })
+  public emptyArray: any[] = [];
+
+  @property({ type: Object })
+  public emptyObject: {} = {};
+
+  // Circular reference (should not break properties panel)
+  @property({ attribute: false })
+  public circularRef: any = (() => {
+    const obj: any = { name: 'circular' };
+    obj.self = obj;
+    return obj;
+  })();
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #fff3e0;
+        border: 2px solid #ff9800;
+        border-radius: 8px;
+        font-family: monospace;
+        font-size: 12px;
+      }
+      .warning {
+        background: #ffe0b2;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+        color: #e65100;
+      }
+      .property {
+        margin: 5px 0;
+        padding: 5px;
+        background: white;
+        border-radius: 2px;
+        word-break: break-all;
+      }
+      .label {
+        font-weight: bold;
+        color: #f57c00;
+      }
+      .value {
+        color: #666;
+      }
+      .special {
+        background: #ffccbc;
+        padding: 2px 4px;
+        border-radius: 2px;
+      }
+    `
+  ];
+
+  private formatValue(value: any): string {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (value === Infinity) return 'Infinity';
+    if (Number.isNaN(value)) return 'NaN';
+    if (typeof value === 'string' && value.length > 50) {
+      return value.substring(0, 50) + '...';
+    }
+    if (typeof value === 'object') {
+      try {
+        return JSON.stringify(value);
+      } catch (e) {
+        return '[Circular Reference]';
+      }
+    }
+    return String(value);
+  }
+
+  public render() {
+    return html`
+      <div class="warning">
+        ⚠️ This element tests edge cases and problematic values
+      </div>
+      
+      <div class="property">
+        <span class="label">Nullable String:</span>
+        <span class="value special">${this.formatValue(this.nullableString)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Undefined Number:</span>
+        <span class="value special">${this.formatValue(this.undefinedNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Long String:</span>
+        <span class="value">${this.formatValue(this.longString)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Special Characters:</span>
+        <span class="value">${this.specialChars}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">HTML String (escaped):</span>
+        <span class="value">${this.htmlString}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Infinity:</span>
+        <span class="value special">${this.formatValue(this.infinityNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">NaN:</span>
+        <span class="value special">${this.formatValue(this.nanNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Very Large Number:</span>
+        <span class="value">${this.veryLargeNumber}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Float Number:</span>
+        <span class="value">${this.floatNumber}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Empty String:</span>
+        <span class="value special">[empty]</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Circular Reference:</span>
+        <span class="value special">${this.formatValue(this.circularRef)}</span>
+      </div>
+    `;
+  }
+}

test/elements/test-nested.ts

@@ -0,0 +1,127 @@
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+// Helper component for nesting
+@customElement('test-nested-wrapper')
+class TestNestedWrapper extends DeesElement {
+  public render() {
+    return html`
+      <div style="border: 1px dashed #ccc; padding: 10px; margin: 5px;">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// The actual test element deeply nested
+@customElement('test-nested-target')
+class TestNestedTarget extends DeesElement {
+  @property({ type: String })
+  public message: string = 'I am deeply nested!';
+
+  @property({ type: Number })
+  public depth: number = 0;
+
+  @property({ type: Boolean })
+  public found: boolean = false;
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 15px;
+        background: #e1f5fe;
+        border: 2px solid #0288d1;
+        border-radius: 4px;
+        margin: 5px;
+      }
+      .info {
+        font-family: monospace;
+        color: #01579b;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="info">
+        <strong>Nested Target Element</strong><br>
+        Message: ${this.message}<br>
+        Depth: ${this.depth}<br>
+        Found by properties panel: ${this.found ? '✅' : '❌'}
+      </div>
+    `;
+  }
+}
+
+@customElement('test-nested')
+export class TestNested extends DeesElement {
+  public static demo = () => html`
+    <test-nested></test-nested>
+  `;
+
+  @property({ type: String })
+  public testId: string = 'nested-test';
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #f5f5f5;
+        border: 2px solid #999;
+        border-radius: 8px;
+      }
+      .explanation {
+        background: #fff;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+      .structure {
+        background: #f0f0f0;
+        padding: 10px;
+        border-radius: 4px;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="explanation">
+        <h3>Nested Structure Test</h3>
+        <p>The actual element with properties is nested deep inside multiple layers:</p>
+      </div>
+      
+      <div class="structure">
+        <test-nested-wrapper>
+          <div style="padding: 10px; background: #ffe;">
+            <test-nested-wrapper>
+              <div style="padding: 10px; background: #efe;">
+                <test-nested-wrapper>
+                  <div style="padding: 10px; background: #eef;">
+                    <!-- The target element is here, 3 levels deep -->
+                    <test-nested-target
+                      .message=${'Found me at depth 3!'}
+                      .depth=${3}
+                    ></test-nested-target>
+                  </div>
+                </test-nested-wrapper>
+              </div>
+            </test-nested-wrapper>
+          </div>
+        </test-nested-wrapper>
+      </div>
+      
+      <div style="margin-top: 10px; font-style: italic; color: #666;">
+        Properties panel should find the test-nested-target element despite the deep nesting.
+      </div>
+    `;
+  }
+}

test/elements/test-noprops.ts

@@ -0,0 +1,37 @@
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-noprops')
+export class TestNoProps extends DeesElement {
+  public static demo = () => html`<test-noprops></test-noprops>`;
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #f0f0f0;
+        border: 2px solid #ccc;
+        border-radius: 8px;
+      }
+      .message {
+        font-family: monospace;
+        color: #666;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="message">
+        This element has no @property decorators.
+        Properties panel should handle this gracefully.
+      </div>
+    `;
+  }
+}

test/elements/test-withwrapper.ts

@@ -0,0 +1,111 @@
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+// Import from local demotools
+import '../../ts_demotools/demotools.js';
+
+@customElement('test-withwrapper')
+export class TestWithWrapper extends DeesElement {
+  public static demo = () => html`
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
+      console.log('DemoWrapper: Found wrapper element', wrapper);
+      
+      const testElement = wrapper.querySelector('test-withwrapper');
+      if (testElement) {
+        console.log('DemoWrapper: Found test-withwrapper element');
+        testElement.dynamicValue = 'Set by demo wrapper!';
+        testElement.counter = 100;
+        
+        // Test querySelector functionality
+        const innerDiv = wrapper.querySelector('.inner-content');
+        console.log('DemoWrapper: Found inner div:', innerDiv);
+        
+        // Test querySelectorAll
+        const allButtons = wrapper.querySelectorAll('button');
+        console.log(`DemoWrapper: Found ${allButtons.length} buttons`);
+      }
+    }}>
+      <test-withwrapper></test-withwrapper>
+      <div style="margin-top: 10px; padding: 10px; background: #e0e0e0;">
+        This div is also inside the wrapper
+      </div>
+    </dees-demowrapper>
+  `;
+
+  @property({ type: String })
+  public dynamicValue: string = 'Initial value';
+
+  @property({ type: Number })
+  public counter: number = 0;
+
+  @property({ type: Boolean })
+  public isActive: boolean = false;
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #e8f5e9;
+        border: 2px solid #4caf50;
+        border-radius: 8px;
+      }
+      .wrapper-info {
+        background: #c8e6c9;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+      .inner-content {
+        background: white;
+        padding: 15px;
+        border-radius: 4px;
+        margin: 10px 0;
+      }
+      button {
+        background: #4caf50;
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+      button:hover {
+        background: #45a049;
+      }
+      .status {
+        margin-top: 10px;
+        font-family: monospace;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="wrapper-info">
+        This element is wrapped with dees-demowrapper in its demo
+      </div>
+      
+      <div class="inner-content">
+        <h3>Dynamic Value: ${this.dynamicValue}</h3>
+        <p>Counter: ${this.counter}</p>
+        <p>Active: ${this.isActive ? 'Yes' : 'No'}</p>
+        
+        <button @click=${() => this.counter++}>Increment</button>
+        <button @click=${() => this.isActive = !this.isActive}>Toggle Active</button>
+        <button @click=${() => this.dynamicValue = 'Clicked!'}>Change Value</button>
+      </div>
+      
+      <div class="status">
+        Properties panel should detect this element inside the wrapper
+      </div>
+    `;
+  }
+}

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);
       }

ts_web/elements/wcc-properties.ts

@@ -229,6 +229,7 @@ export class WccProperties extends DeesElement {
   private async findElementRecursively(container: Element, elementClass: any, maxDepth: number = 5): Promise<HTMLElement | null> {
     if (maxDepth <= 0) return null;
     
+    try {
       // Check direct children
       for (const child of Array.from(container.children)) {
         if (child instanceof elementClass) {
@@ -236,16 +237,20 @@ export class WccProperties extends DeesElement {
         }
       }
       
-    // Check shadow roots of children
+      // Search in all children recursively
       for (const child of Array.from(container.children)) {
-      if (child.shadowRoot) {
+        // First, always check the light DOM children
-        const found = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
-        if (found) return found;
-      }
-      
-      // Also check nested children
         const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
         if (found) return found;
+        
+        // Also check shadow root if it exists
+        if (child.shadowRoot) {
+          const shadowFound = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
+          if (shadowFound) return shadowFound;
+        }
+      }
+    } catch (error) {
+      console.error('Error in findElementRecursively:', error);
     }
     
     return null;
@@ -254,6 +259,9 @@ export class WccProperties extends DeesElement {
   public async createProperties() {
     console.log('creating properties for:');
     console.log(this.selectedItem);
+    
+    // Clear any previous warnings
+    this.warning = null;
     const isEnumeration = (propertyArg): boolean => {
       const keys = Object.keys(propertyArg.type);
       const values = [];
@@ -315,15 +323,20 @@ export class WccProperties extends DeesElement {
       let retries = 0;
       while (!firstFoundInstantiatedElement && retries < 5) {
         await new Promise(resolve => setTimeout(resolve, 200));
+        try {
           firstFoundInstantiatedElement = await this.findElementRecursively(
             viewport,
             this.selectedItem as any
           );
+        } catch (error) {
+          console.error('Error during element search retry:', error);
+        }
         retries++;
       }
       
       if (!firstFoundInstantiatedElement) {
         this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
+        this.propertyContent = [];
         return;
       }
       const classProperties: Map<string, any> = anonItem.elementProperties;
@@ -337,6 +350,7 @@ export class WccProperties extends DeesElement {
         if (key === 'goBright' || key === 'domtools') {
           continue;
         }
+        try {
           const property = classProperties.get(key);
           const propertyTypeString = await determinePropertyType(property);
           propertyArray.push(
@@ -392,6 +406,10 @@ export class WccProperties extends DeesElement {
             </div>
           `
         );
+        } catch (error) {
+          console.error(`Error processing property ${key}:`, error);
+          // Continue with next property even if this one fails
+        }
       }
       this.propertyContent = propertyArray;
     } else {
@@ -413,7 +431,14 @@ export class WccProperties extends DeesElement {
   }
 
   public async scheduleUpdate() {
+    try {
       await this.createProperties();
+    } catch (error) {
+      console.error('Error creating properties:', error);
+      // Clear property content on error to show clean state
+      this.propertyContent = [];
+    }
+    // Always call super.scheduleUpdate to ensure component updates
     super.scheduleUpdate();
   }