1.0.98

fix(properties-panel): improve element detection timing and value handling in properties panel
1.0.97
2025-06-16 17:57:37 +00:00 · 2025-06-16 17:56:14 +00:00 · 2025-06-16 16:03:28 +00:00 · 2025-06-16 15:56:12 +00:00 · 2025-06-16 15:05:47 +00:00 · 2025-06-16 15:05:43 +00:00
34 changed files with 8391 additions and 17823 deletions
--- a/.gitea/workflows/default_nottags.yaml
+++ b/.gitea/workflows/default_nottags.yaml
@ -0,0 +1,66 @@
+name: Default (not tags)
+
+on:
+  push:
+    tags-ignore:
+      - '**'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm and npmci
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+
+      - name: Run npm prepare
+        run: npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build
--- a/.gitea/workflows/default_tags.yaml
+++ b/.gitea/workflows/default_tags.yaml
@ -0,0 +1,124 @@
+name: Default (tags)
+
+on:
+  push:
+    tags:
+      - '*'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build
+
+  release:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Release
+        run: |
+          npmci node install stable
+          npmci npm publish
+
+  metadata:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+    continue-on-error: true
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Code quality
+        run: |
+          npmci command npm install -g typescript
+          npmci npm install
+
+      - name: Trigger
+        run: npmci trigger
+
+      - name: Build docs and upload artifacts
+        run: |
+          npmci node install stable
+          npmci npm install
+          pnpm install -g @git.zone/tsdoc
+          npmci command tsdoc
+        continue-on-error: true
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,140 +0,0 @@
-# gitzone ci_default
-image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-
-cache:
-  paths:
-    - .npmci_cache/
-  key: '$CI_BUILD_STAGE'
-
-stages:
-  - security
-  - test
-  - release
-  - metadata
-
-before_script:
-  - npm install -g @shipzone/npmci
-
-# ====================
-# security stage
-# ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-auditProductionDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci npm prepare
-    - npmci command npm install --production --ignore-scripts
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=prod --production
-  tags:
-    - docker
-  allow_failure: true
-
-auditDevDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci npm prepare
-    - npmci command npm install --ignore-scripts
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=dev
-  tags:
-    - docker
-  allow_failure: true
-
-# ====================
-# test stage
-# ====================
-
-testStable:
-  stage: test
-  script:
-    - npmci npm prepare
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm test
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-testBuild:
-  stage: test
-  script:
-    - npmci npm prepare
-    - npmci node install stable
-    - npmci npm install
-    - npmci command npm run build
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-release:
-  stage: release
-  script:
-    - npmci node install stable
-    - npmci npm publish
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-# ====================
-# metadata stage
-# ====================
-codequality:
-  stage: metadata
-  allow_failure: true
-  only:
-    - tags
-  script:
-    - npmci command npm install -g typescript
-    - npmci npm prepare
-    - npmci npm install
-  tags:
-    - lossless
-    - docker
-    - priv
-
-trigger:
-  stage: metadata
-  script:
-    - npmci trigger
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-pages:
-  stage: metadata
-  script:
-    - npmci node install lts
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
-    - npmci npm install
-    - npmci command tsdoc
-  tags:
-    - lossless
-    - docker
-    - notpriv
-  only:
-    - tags
-  artifacts:
-    expire_in: 1 week
-    paths:
-      - public
-  allow_failure: true
--- a/html/index.html
+++ b/html/index.html
@ -1,5 +1,5 @@
 <!--gitzone element-->
-<!-- made by Lossless GmbH -->
+<!-- made by Task Venture Capital GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
 <html lang="en">
  <head>
@ -10,6 +10,10 @@
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+
    <style>
      body {
        margin: 0px;
--- a/html/index.ts
+++ b/html/index.ts
@ -1,6 +1,6 @@
 // dees tools
 import * as deesWccTools from '../ts_web/index.js';
-import * as deesDomTools from '@designestate/dees-domtools';
+import * as deesDomTools from '@design.estate/dees-domtools';

 // elements and pages
 import * as elements from '../test/elements/index.js';
--- a/npmextra.json
+++ b/npmextra.json
@ -2,17 +2,32 @@
  "gitzone": {
    "projectType": "wcc",
    "module": {
-      "githost": "gitlab.com",
+      "githost": "code.foss.global",
      "gitscope": "designestate",
      "gitrepo": "dees-wcctools",
-      "description": "wcc tools for creating element catalogues",
+      "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
      "npmPackagename": "@designestate/dees-wcctools",
      "license": "MIT",
-      "projectDomain": "design.estate"
+      "projectDomain": "design.estate",
+      "keywords": [
+        "web components",
+        "element catalogues",
+        "custom elements",
+        "documentation",
+        "typescript",
+        "lit",
+        "component development",
+        "design system",
+        "element testing",
+        "page development"
+      ]
    }
  },
  "npmci": {
    "npmGlobalTools": [],
    "npmAccessLevel": "public"
+  },
+  "tsdoc": {
+    "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,32 +1,34 @@
 {
-  "name": "@designestate/dees-wcctools",
-  "version": "1.0.73",
+  "name": "@design.estate/dees-wcctools",
+  "version": "1.0.98",
  "private": false,
-  "description": "wcc tools for creating element catalogues",
-  "main": "dist_ts_web/index.js",
-  "typings": "dist_ts_web/index.d.ts",
+  "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/index.js"
+  },
  "type": "module",
  "scripts": {
    "test": "(npm run build)",
-    "build": "(tsbuild element --web --allowimplicitany --skiplibcheck && tsbundle element)",
-    "watch": "tswatch element"
+    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element)",
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
  },
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@designestate/dees-domtools": "^2.0.1",
-    "@designestate/dees-element": "^2.0.4",
-    "@gitzone/tsrun": "^1.2.31",
-    "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartexpress": "^4.0.0"
+    "@design.estate/dees-domtools": "^2.0.57",
+    "@design.estate/dees-element": "^2.0.34",
+    "@push.rocks/smartdelay": "^3.0.5",
+    "lit": "^3.1.3"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.61",
-    "@gitzone/tsbundle": "^1.0.101",
-    "@gitzone/tswatch": "^1.0.73",
-    "@pushrocks/projectinfo": "^4.0.5",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.17.0"
+    "@api.global/typedserver": "^3.0.29",
+    "@git.zone/tsbuild": "^2.1.72",
+    "@git.zone/tsbundle": "^2.0.15",
+    "@git.zone/tsrun": "^1.2.44",
+    "@git.zone/tswatch": "^2.0.23",
+    "@push.rocks/projectinfo": "^5.0.2"
  },
  "files": [
    "ts/**/*",
@ -42,5 +44,18 @@
  ],
  "browserslist": [
    "last 1 Chrome versions"
-  ]
+  ],
+  "keywords": [
+    "web components",
+    "element catalogues",
+    "custom elements",
+    "documentation",
+    "typescript",
+    "lit",
+    "component development",
+    "design system",
+    "element testing",
+    "page development"
+  ],
+  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.hints.md
+++ b/readme.hints.md
@ -0,0 +1,74 @@
+# Project Hints and Findings
+
+## Properties Panel Element Detection Issue (Fixed)
+
+### Problem
+The properties panel had timing issues detecting rendered elements because:
+1. Elements are rendered asynchronously via lit's `render()` function in the dashboard component
+2. The properties panel tried to find elements immediately without waiting for render completion
+3. Element search only looked at direct children of the viewport, missing nested elements or those inside shadow DOM
+
+### Solution Implemented
+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 both light DOM and shadow DOM for all elements
+   - 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)`
+2. Properties panel waits 200ms for demo wrappers to run and set initial values
+3. Searches recursively for the element instance
+4. If not found, retries with delays to handle async rendering
+5. Once found, extracts and displays element properties
+6. Uses property binding (`.value=`) instead of attribute binding to prevent input events during initialization
+
+## Demo Tools
+
+### DeesDemoWrapper Component
+A utility component for wrapping demo elements with post-render functionality.
+
+**Usage:**
+```typescript
+import * as demoTools from '@design.estate/dees-wcctools/demotools';
+
+// In your demo function:
+demo: () => html`
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
+    // Use querySelector for specific elements
+    const myElement = wrapper.querySelector('my-custom-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 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 elements are fully rendered
--- a/readme.md
+++ b/readme.md
@ -1,41 +1,392 @@
-# @designestate/dees-wcctools
-wcc tools for creating element catalogues
+# @design.estate/dees-wcctools
+Web Component Development Tools - A powerful framework for building, testing, and documenting web components

-## Availabililty and Links
-* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-wcctools)
-* [gitlab.com (source)](https://gitlab.com/designestate/dees-wcctools)
-* [github.com (source mirror)](https://github.com/designestate/dees-wcctools)
-* [docs (typedoc)](https://designestate.gitlab.io/dees-wcctools/)
+## Overview
+`@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

-## Status for master
+## Installation

-Status Category | Status Badge
-- | --
-GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-wcctools/badges/master/pipeline.svg)](https://lossless.cloud)
-GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-wcctools/badges/master/coverage.svg)](https://lossless.cloud)
-npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-wcctools)](https://lossless.cloud)
-Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-wcctools)](https://lossless.cloud)
-TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
-node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
-PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-wcctools)](https://lossless.cloud)
-PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-wcctools)](https://lossless.cloud)
-BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-wcctools)](https://lossless.cloud)
-Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
+```bash
+# Using npm
+npm install @design.estate/dees-wcctools --save-dev

-## Usage
+# Using pnpm (recommended)
+pnpm add -D @design.estate/dees-wcctools
+```

-## Contribution
+## Quick Start

-We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
+### 1. Create Your Component

-## Contribution
+```typescript
+import { DeesElement, customElement, html, css, property } from '@design.estate/dees-element';

-We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
+@customElement('my-button')
+export class MyButton extends DeesElement {
+  // Define a demo for the catalogue
+  public static demo = () => html`
+    <my-button .label=${'Click me!'} .variant=${'primary'}></my-button>
+  `;

-For further information read the linked docs at the top of this readme.
+  @property({ type: String })
+  public label: string = 'Button';

-> MIT licensed | **&copy;** [Lossless GmbH](https://lossless.gmbh)
-| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
+  @property({ type: String })
+  public variant: 'primary' | 'secondary' = 'primary';

-[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)
+  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>
+    `;
+  }
+}
+```
+
+### 2. Set Up Your Catalogue
+
+```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
+
+This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. 
+
+**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
+
+### Trademarks
+
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
+
+### Company Information
+
+Task Venture Capital GmbH  
+Registered at District court Bremen HRB 35230 HB, Germany
+
+For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
+
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
--- a/readme.plan.md
+++ b/readme.plan.md
@ -0,0 +1,100 @@
+# Fix Properties Panel Element Detection (COMPLETED)
+
+To fix the element detection issue, reread CLAUDE.md first.
+
+## Problem Analysis
+The properties panel has timing issues detecting rendered elements because:
+1. Elements are rendered asynchronously via lit's `render()` in the dashboard
+2. Properties panel tries to find elements immediately without waiting for render completion
+3. Element search only looks at direct children, missing nested/shadow DOM elements
+
+## Implementation Plan
+
+### 1. Add proper synchronization ✅
+- Add a delay or await render completion before element detection
+- Use MutationObserver or lit's updateComplete promises
+
+### 2. Improve element search algorithm ✅
+- Search recursively through all descendants, not just direct children
+- Handle shadow DOM boundaries properly
+- Support elements wrapped in containers
+
+### 3. Add retry mechanism ✅
+- If element not found, retry after a delay
+- Add maximum retry attempts to prevent infinite loops
+- Clear error state when element is eventually found
+
+## Code Changes Required
+1. Modify `wcc-properties.ts` createProperties() method ✅
+2. Add element search utility function ✅
+3. Improve error handling and user feedback ✅
+
+# Demo Wrapper Implementation (COMPLETED)
+
+## Created DeesDemoWrapper Component
+- Location: ts_demotools/demotools.ts
+- Allows wrapping demo elements with post-render functionality
+- 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 (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
+
+# Fixed Demo Value Overwriting (COMPLETED)
+
+## Issue:
+Properties panel was overwriting values set by demo functions
+
+## Solution:
+1. Changed from attribute binding (`value=`) to property binding (`.value=`)
+2. This prevents browser from firing input events during initialization
+3. Added proper number parsing for number inputs
+4. Increased initial wait to 200ms for demo wrappers to complete
+5. Simplified select element handling to use property binding
--- a/test/elements/index.ts
+++ b/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';
--- a/test/elements/test-complextypes.ts
+++ b/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>
+    `;
+  }
+}
--- a/test/elements/test-demoelement.ts
+++ b/test/elements/test-demoelement.ts
@ -1,14 +1,14 @@
 import {
  DeesElement,
  customElement,
-  TemplateResult,
+  type TemplateResult,
  html,
  property,
  css,
  cssManager,
-} from '@designestate/dees-element';
+} from '@design.estate/dees-element';

-import * as domtools from '@designestate/dees-domtools';
+import * as domtools from '@design.estate/dees-domtools';

 enum ETestEnum {
  'first' = 'first',
--- a/test/elements/test-edgecases.ts
+++ b/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>
+    `;
+  }
+}
--- a/test/elements/test-nested.ts
+++ b/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>
+    `;
+  }
+}
--- a/test/elements/test-noprops.ts
+++ b/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>
+    `;
+  }
+}
--- a/test/elements/test-withwrapper.ts
+++ b/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>
+    `;
+  }
+}
--- a/ts_demotools/demotools.ts
+++ b/ts_demotools/demotools.ts
@ -0,0 +1,40 @@
+import { DeesElement, customElement, html, css, property, type TemplateResult } from '@design.estate/dees-element';
+
+@customElement('dees-demowrapper')
+export class DeesDemoWrapper extends DeesElement {
+  @property({ attribute: false })
+  public runAfterRender: (wrapperElement: DeesDemoWrapper) => void | Promise<void>;
+
+  public static styles = [
+    css`
+      :host {
+        display: contents;
+      }
+    `
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.updateComplete;
+    
+    // Wait a bit for slotted content to render
+    await new Promise(resolve => setTimeout(resolve, 50));
+    
+    // Check if there are slotted elements and runAfterRender is defined
+    if (this.children.length > 0 && this.runAfterRender) {
+      // Call the runAfterRender function with the wrapper element itself
+      // Note: querySelector/querySelectorAll will work on slotted content
+      // because slotted elements remain in the light DOM as children
+      try {
+        await this.runAfterRender(this);
+      } catch (error) {
+        console.error('Error in runAfterRender:', error);
+      }
+    }
+  }
+}
--- a/ts_demotools/index.ts
+++ b/ts_demotools/index.ts
@ -0,0 +1 @@
+export * from './demotools.js';
--- a/ts_demotools/plugins.ts
+++ b/ts_demotools/plugins.ts
@ -0,0 +1,5 @@
+import * as deesElement from '@design.estate/dees-element';
+
+export {
+  deesElement
+};
--- a/ts_demotools/tspublish.json
+++ b/ts_demotools/tspublish.json
@ -0,0 +1,3 @@
+{
+  "order": 2
+}
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/dees-wcctools',
+  version: '1.0.90',
+  description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
+}
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, TemplateResult, queryAsync } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult, queryAsync, render, domtools } from '@design.estate/dees-element';

 import * as plugins from '../wcctools.plugins.js';

@ -6,9 +6,9 @@ import * as plugins from '../wcctools.plugins.js';
 import './wcc-frame.js';
 import './wcc-sidebar.js';
 import './wcc-properties.js';
-import { TTheme } from './wcc-properties.js';
-import { TElementType } from './wcc-sidebar.js';
-import { breakpoints } from '@designestate/dees-domtools';
+import { type TTheme } from './wcc-properties.js';
+import { type TElementType } from './wcc-sidebar.js';
+import { breakpoints } from '@design.estate/dees-domtools';
 import { WccFrame } from './wcc-frame.js';

@customElement('wcc-dashboard')
@ -61,7 +61,6 @@ export class WccDashboard extends DeesElement {
    return html`
      <style>
        :host {
-          font-family: 'Roboto', sans-serif;
          background: #fcfcfc;
          display: block;
          box-sizing: border-box;
@ -98,32 +97,6 @@ export class WccDashboard extends DeesElement {
        }}
      ></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
-        ${(() => {
-          if (this.selectedType === 'page' && this.selectedItem) {
-            if (typeof this.selectedItem === 'function') {
-              console.log('slotting page.');
-              return this.selectedItem();
-            } else {
-              console.error('The selected item looks strange:');
-              console.log(this.selectedItem);
-            }
-          } else if (this.selectedType === 'element' && this.selectedItem) {
-            console.log('slotting element.');
-            const anonItem: any = this.selectedItem;
-            if (!anonItem.demo) {
-              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
-              return;
-            }
-            if (!(typeof anonItem.demo === 'function')) {
-              this.setWarning(
-                `component ${anonItem.name} has demo property, but it is not of type function`
-              );
-              return;
-            }
-            this.setWarning(null);
-            return html`${anonItem.demo()}`;
-          }
-        })()}
      </wcc-frame>
    `;
  }
@ -160,24 +133,43 @@ export class WccDashboard extends DeesElement {
    );
  }

-  private updating = false;
-  public async updated() {
-    if (this.updating) {
-      return;
-    }
+  public async updated(changedPropertiesArg: Map<string, any>) {
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
    await this.domtools.router._handleRouteState();
-    this.updating = true;
    const storeElement = this.selectedItem;
-    setTimeout(async () => {
-      this.selectedItem = null;
-      setTimeout(async () => {
-        this.selectedItem = storeElement;
-        setTimeout(() => {
-          this.updating = false;
-        }, 0);
-      });
-    }, 0);
+    const wccFrame: WccFrame = this.shadowRoot.querySelector('wcc-frame');
+
+    if (changedPropertiesArg.has('selectedItemName')) {
+      document.title = this.selectedItemName;
+    };
+
+    if (this.selectedType === 'page' && this.selectedItem) {
+      if (typeof this.selectedItem === 'function') {
+        console.log('slotting page.');
+        const viewport = await wccFrame.getViewportElement();
+        render(this.selectedItem(), viewport);
+        console.log('rendered page.');
+      } else {
+        console.error('The selected item looks strange:');
+        console.log(this.selectedItem);
+      }
+    } else if (this.selectedType === 'element' && this.selectedItem) {
+      console.log('slotting element.');
+      const anonItem: any = this.selectedItem;
+      if (!anonItem.demo) {
+        this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
+        return;
+      }
+      if (!(typeof anonItem.demo === 'function')) {
+        this.setWarning(
+          `component ${anonItem.name} has demo property, but it is not of type function`
+        );
+        return;
+      }
+      this.setWarning(null);
+      const viewport = await wccFrame.getViewportElement();
+      render(anonItem.demo(), viewport);;
+    }
  }

  public buildUrl() {
--- a/ts_web/elements/wcc-frame.ts
+++ b/ts_web/elements/wcc-frame.ts
@ -1,25 +1,46 @@
-import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';

-import * as domtools from '@designestate/dees-domtools';
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wcc-frame': WccFrame;
+  }
+}

@customElement('wcc-frame')
 export class WccFrame extends DeesElement {
  @property()
  public viewport: string;

+  public static styles = [
+    css`
+      :host {
+        border: 10px solid #ffaeaf;
+        position: absolute;
+        background: ${cssManager.bdTheme('#333', '#000')};
+        left: 200px;
+        right: 0px;
+        top: 0px;
+        bottom: 100px;
+        overflow-y: auto;
+        overflow-x: auto;
+        overscroll-behavior: contain;
+      }
+
+      .viewport {
+        container-type: inline-size;
+        container-name: wccToolsViewport;
+        position: relative;
+        min-height: 100%;
+      }
+    `,
+  ]
+
  public render(): TemplateResult {
    return html`
      <style>
        :host {
-          border: 10px solid #ffaeaf;
-          position: absolute;
-          background: ${this.goBright ? '#333': '#000'};
-          left: 200px;
-          right: 0px;
-          top: 0px;
-          bottom: 100px;
-          overflow-y: auto;
-          overflow-x: auto;
          ${(() => {
          switch (this.viewport) {
            case 'desktop':
@ -45,19 +66,17 @@ export class WccFrame extends DeesElement {
                  }px;
                `;
          }
-        })()}
+          })()}
        }
-        
+
        .viewport {
-          container-type: inline-size;
-          container-name: wccToolsViewport;
-          position: relative;
          ${this.viewport !== 'desktop'
-          ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
-          : html``}
-          min-height: 100%;
+            ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
+            : html``
+          }
          background:
-            ${this.goBright ? `
+          ${
+            this.goBright ? `
              radial-gradient(#CCCCCC 3px, transparent 4px),
              radial-gradient(#CCCCCC 3px, transparent 4px),
              linear-gradient(#eeeeee 4px, transparent 0),
@ -75,11 +94,12 @@ export class WccFrame extends DeesElement {
              #222222;
              background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
              background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
-            `}
+            `
+          }
        }
      </style>
      <div class="viewport">
-        <slot></slot>
+        
      </div>
    `;
  }
@ -89,4 +109,8 @@ export class WccFrame extends DeesElement {
    const slottedContent = this.children;
    console.log(slottedContent);
  }
+
+  public async getViewportElement(): Promise<HTMLElement> {
+    return this.shadowRoot.querySelector('.viewport') as HTMLElement;
+  }
 }
--- a/ts_web/elements/wcc-properties.ts
+++ b/ts_web/elements/wcc-properties.ts
@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, TemplateResult, state } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
 import { WccDashboard } from './wcc-dashboard.js';

 export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
@ -36,7 +36,6 @@ export class WccProperties extends DeesElement {

  public render(): TemplateResult {
    return html`
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
      <style>
        :host {
          font-family: 'Roboto', sans-serif;
@ -62,6 +61,21 @@ export class WccProperties extends DeesElement {
          grid-template-columns: 33% 33% 33%;
        }

+        .material-symbols-outlined {
+          font-family: 'Material Symbols Outlined';
+          font-weight: normal;
+          font-style: normal;
+          font-size: 24px;  /* Preferred icon size */
+          display: inline-block;
+          line-height: 1;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+        }
+
        .properties .property {
          padding: 5px;
          background: #444;
@ -97,7 +111,6 @@ export class WccProperties extends DeesElement {
          transition: all 0.2s;
        }
        .button:hover {
-          cursor: pointer;
          color: #333;
          background: #fff;
        }
@ -107,7 +120,6 @@ export class WccProperties extends DeesElement {
        }

        .button.selected:hover {
-          cursor: pointer;
          color: #ffffff;
          background: #455a64;
        }
@ -125,7 +137,6 @@ export class WccProperties extends DeesElement {
        }

        .docs:hover {
-          cursor: pointer;
          color: #333;
          background: #fff;
        }
@ -157,7 +168,7 @@ export class WccProperties extends DeesElement {
                this.selectTheme('dark');
              }}
            >
-              Dark<br /><i class="material-icons">brightness_3</i>
+              Dark<br /><i class="material-symbols-outlined">brightness_3</i>
            </div>
            <div
              class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@ -165,7 +176,7 @@ export class WccProperties extends DeesElement {
                this.selectTheme('bright');
              }}
            >
-              Bright<br /><i class="material-icons">flare</i>
+              Bright<br /><i class="material-symbols-outlined">flare</i>
            </div>
          </div>
        </div>
@ -178,7 +189,7 @@ export class WccProperties extends DeesElement {
                this.selectViewport('phone');
              }}
            >
-              Phone<br /><i class="material-icons">smartphone</i>
+              Phone<br /><i class="material-symbols-outlined">smartphone</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@ -186,7 +197,7 @@ export class WccProperties extends DeesElement {
                this.selectViewport('phablet');
              }}
            >
-              Phablet<br /><i class="material-icons">smartphone</i>
+              Phablet<br /><i class="material-symbols-outlined">smartphone</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@ -194,7 +205,7 @@ export class WccProperties extends DeesElement {
                this.selectViewport('tablet');
              }}
            >
-              Tablet<br /><i class="material-icons">tablet</i>
+              Tablet<br /><i class="material-symbols-outlined">tablet</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'desktop' ||
@ -205,7 +216,7 @@ export class WccProperties extends DeesElement {
                this.selectViewport('native');
              }}
            >
-              Desktop<br /><i class="material-icons">desktop_windows</i>
+              Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
            </div>
          </div>
        </div>
@ -215,9 +226,42 @@ 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) {
+          return child as HTMLElement;
+        }
+      }
+      
+      // Search in all children recursively
+      for (const child of Array.from(container.children)) {
+        // First, always check the light DOM 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;
+  }
+
  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 = [];
@ -243,7 +287,7 @@ export class WccProperties extends DeesElement {
      });
      return enumValues;
    };
-    const determinePropertyType = (propertyArg: any): TPropertyType => {
+    const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
      const typeName: any | undefined = propertyArg.type.name;
      if (typeName) {
        return typeName;
@ -264,15 +308,35 @@ export class WccProperties extends DeesElement {
      }
      console.log(anonItem.elementProperties);
      const wccFrame = await this.dashboardRef.wccFrame;
-      let firstFoundInstantiatedElement: HTMLElement;
-      for (const element of Array.from(wccFrame.children)) {
-        if (element instanceof (this.selectedItem as any)) {
-          firstFoundInstantiatedElement = element as HTMLElement;
-          break;
+      
+      // Wait for render to complete and any demo wrappers to run
+      await new Promise(resolve => setTimeout(resolve, 200));
+      
+      // Try to find the element with recursive search
+      const viewport = await wccFrame.getViewportElement();
+      let firstFoundInstantiatedElement: HTMLElement = await this.findElementRecursively(
+        viewport, 
+        this.selectedItem as any
+      );
+      
+      // Retry logic if element not found
+      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}<<`;
+        this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
+        this.propertyContent = [];
        return;
      }
      const classProperties: Map<string, any> = anonItem.elementProperties;
@ -286,9 +350,10 @@ export class WccProperties extends DeesElement {
        if (key === 'goBright' || key === 'domtools') {
          continue;
        }
-        const property = classProperties.get(key);
-        const propertyTypeString = determinePropertyType(property);
-        propertyArray.push(
+        try {
+          const property = classProperties.get(key);
+          const propertyTypeString = await determinePropertyType(property);
+          propertyArray.push(
          html`
            <div class="property">
              ${key} / ${propertyTypeString}<br />
@ -305,7 +370,7 @@ export class WccProperties extends DeesElement {
                  case 'String':
                    return html`<input
                      type="text"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                      @input="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                      }}"
@ -313,14 +378,15 @@ export class WccProperties extends DeesElement {
                  case 'Number':
                    return html`<input
                      type="number"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] ?? ''}
                      @input="${(eventArg: any) => {
-                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = parseFloat(eventArg.target.value) || 0;
                      }}"
                    />`;
                  case 'Enum':
                    const enumValues: any[] = getEnumValues(property);
                    return html`<select
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                      @change="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                      }}"
@ -328,8 +394,7 @@ export class WccProperties extends DeesElement {
                      ${enumValues.map((valueArg) => {
                        return html`
                          <option
-                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
-                            name="${valueArg}"
+                            value="${valueArg}"
                          >
                            ${valueArg}
                          </option>
@ -341,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 {
@ -362,7 +431,14 @@ export class WccProperties extends DeesElement {
  }

  public async scheduleUpdate() {
-    await this.createProperties();
+    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();
  }

--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@ -1,14 +1,11 @@
 import * as plugins from '../wcctools.plugins.js';
-import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
 import { WccDashboard } from './wcc-dashboard.js';

 export type TElementType = 'element' | 'page';

@customElement('wcc-sidebar')
 export class WccSidebar extends DeesElement {
-  @property({type: Array})
-  public websites: string[] = [];
-
  @property({ attribute: false })
  public selectedItem: DeesElement | (() => TemplateResult);

@ -25,7 +22,8 @@ export class WccSidebar extends DeesElement {
        :host {
          display: block;
          border-right: 1px solid #999;
-          font-family: 'Roboto', sans-serif;
+          font-family: 'Roboto', 'Inter', sans-serif;
+          font-size: 12px;
          box-sizing: border-box;
          position: absolute;
          left: 0px;
@ -39,21 +37,23 @@ export class WccSidebar extends DeesElement {
          padding: 5px;
        }

-        .heading {
-          font-size: 24px;
-          text-align: center;        
-          margin: 20px 5px 5px 5px;
+        .material-symbols-outlined {
+          font-family: 'Material Symbols Outlined';
+          font-weight: normal;
+          font-style: normal;
+          font-size: 24px;  /* Preferred icon size */
+          display: inline-block;
+          line-height: 1;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
        }

-        .heading a {
-          text-decoration: none;
-          color: #fff;
-        }
-
-        .subheading {
-          text-align: center;
-        }
        .selectOption {
+          user-select: none;
          position: relative;
          line-height: 24px;
          padding: 5px;
@ -62,7 +62,6 @@ export class WccSidebar extends DeesElement {
          grid-template-columns: 28px auto;
        }
        .selectOption:hover {
-          cursor: pointer;
          padding: 5px;
          color: #333;
          background: #fff;
@ -73,18 +72,17 @@ export class WccSidebar extends DeesElement {
        }

        .selectOption.selected:hover {
-          cursor: pointer;
          color: #ffffff;
          background: #455A64;
        }

-        .selectOption .material-icons {
+        .selectOption .material-symbols-outlined {
          color: #666;
          display: block;
          transition: all 0.2s;
        }

-        .selectOption.selected .material-icons {
+        .selectOption.selected .material-symbols-outlined {
          color: #000;
        }

@ -97,17 +95,7 @@ export class WccSidebar extends DeesElement {

        
      </style>
-      <div class="heading">
-        <a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
-      </div>
-      <div class="subheading">
-        by Lossless GmbH
-      </div>
      <div class="menu">
-        <h3>Live Websites</h3>
-        ${this.websites.map(website => {
-          return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
-        })}
        <h3>Pages</h3>
        ${(() => {
          const pages = Object.keys(this.dashboardRef.pages);
@ -121,7 +109,7 @@ export class WccSidebar extends DeesElement {
                  this.selectItem('page', pageName, item);
                }}
              >
-                <i class="material-icons">insert_drive_file</i>
+                <i class="material-symbols-outlined">insert_drive_file</i>
                <div class="text">${pageName}</div>
              </div>
            `;
@ -140,13 +128,13 @@ export class WccSidebar extends DeesElement {
                  this.selectItem('element', elementName, item);
                }}
              >
-                <i class="material-icons">featured_video</i>
+                <i class="material-symbols-outlined">featured_video</i>
                <div class="text">${elementName}</div>
              </div>
            `;
          });
        })()}
-      </menu>
+      </div>
    `;
  }

--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -1,5 +1,5 @@
 import { WccDashboard } from './elements/wcc-dashboard.js';
-import { LitElement, TemplateResult } from 'lit-element';
+import { LitElement, type TemplateResult } from 'lit';

 const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
  let hasRun = false;
--- a/ts_web/tsconfig.json
+++ b/ts_web/tsconfig.json
@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
-    "declaration": true,
-    "inlineSources": true,
-    "inlineSourceMap": true,
-    "noUnusedLocals": true,
-    "noFallthroughCasesInSwitch": true,
-    "outDir": "dist/",
-    "skipLibCheck": true,
-    "experimentalDecorators": true
-  }
-}
--- a/ts_web/tspublish.json
+++ b/ts_web/tspublish.json
@ -0,0 +1,3 @@
+{
+  "order": 1
+}
--- a/ts_web/wcctools.plugins.ts
+++ b/ts_web/wcctools.plugins.ts
@ -1,10 +1,10 @@
-import * as smartdelay from '@pushrocks/smartdelay';
+import * as smartdelay from '@push.rocks/smartdelay';

 export {
  smartdelay
 };

-import * as deesDomtools from '@designestate/dees-domtools';
+import * as deesDomtools from '@design.estate/dees-domtools';

 export {
  deesDomtools
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,14 @@
 {
  "compilerOptions": {
    "experimentalDecorators": true,
-    "target": "ES2017",
-    "moduleResolution": "Node"
-  }
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
 }
--- a/tslint.json
+++ b/tslint.json
@ -1,17 +0,0 @@
-{
-  "extends": ["tslint:latest", "tslint-config-prettier"],
-  "rules": {
-    "semicolon": [true, "always"],
-    "no-console": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "member-ordering": {
-      "options":{
-        "order": [
-          "static-method"
-        ]
-      }
-    }
-  },
-  "defaultSeverity": "warning"
-}
Author	SHA1	Message	Date
Juergen Kunz	e11f0df950	1.0.98 Some checks failed Default (tags) / security (push) Failing after 40s Details Default (tags) / test (push) Failing after 35s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 17:57:37 +00:00
Juergen Kunz	c64b106569	fix(properties-panel): improve element detection timing and value handling in properties panel	2025-06-16 17:56:14 +00:00
Juergen Kunz	3d1948b93e	1.0.97 Some checks failed Default (tags) / security (push) Failing after 41s Details Default (tags) / test (push) Failing after 37s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 16:03:28 +00:00
Juergen Kunz	21b7158a35	fix(properties-panel): enhance element detection and error handling for nested structures	2025-06-16 15:56:12 +00:00
Juergen Kunz	992af2668e	1.0.96 Some checks failed Default (tags) / security (push) Failing after 42s Details Default (tags) / test (push) Failing after 39s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 15:05:47 +00:00
Juergen Kunz	0cd84b28b4	fix(package): correct path for demotools export in package.json	2025-06-16 15:05:43 +00:00
Juergen Kunz	0709267bd5	1.0.95 Some checks failed Default (tags) / security (push) Failing after 45s Details Default (tags) / test (push) Failing after 40s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 14:45:28 +00:00
Juergen Kunz	d4fce8a939	fix(demotools): enhance runAfterRender to provide full DOM API access and improve element selection	2025-06-16 14:45:19 +00:00
Juergen Kunz	578f87a8f9	1.0.94 Some checks failed Default (tags) / security (push) Failing after 46s Details Default (tags) / test (push) Failing after 40s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 14:36:44 +00:00
Juergen Kunz	0acf341071	1.0.93 Some checks failed Default (tags) / security (push) Failing after 48s Details Default (tags) / test (push) Failing after 40s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 14:35:32 +00:00
Juergen Kunz	87bbf0bbdc	fix(demotools): update DeesDemoWrapper to handle multiple slotted elements in runAfterRender callback	2025-06-16 14:35:28 +00:00
Juergen Kunz	bed41da573	1.0.92 Some checks failed Default (tags) / security (push) Failing after 50s Details Default (tags) / test (push) Failing after 35s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 14:24:07 +00:00
Juergen Kunz	48f77e7ba2	docs(readme): update documentation with comprehensive overview, quick start guide, and detailed feature descriptions	2025-06-16 14:24:02 +00:00
Juergen Kunz	f7bc113b6c	1.0.91 Some checks failed Default (tags) / security (push) Failing after 52s Details Default (tags) / test (push) Failing after 27s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 13:18:55 +00:00
Juergen Kunz	05934132a7	feat(demo): add DeesDemoWrapper component for enhanced demo element handling	2025-06-16 13:18:13 +00:00
Juergen Kunz	6bdb8c78b7	fix(properties): enhance element detection in properties panel with recursive search and retry mechanism	2025-06-16 13:10:12 +00:00
Juergen Kunz	fca47b87fb	Refactor code structure for improved readability and maintainability	2025-06-16 12:30:12 +00:00
Philipp Kunz	595620af4b	1.0.90	2024-05-07 01:38:47 +02:00
Philipp Kunz	8c3a116943	fix(core): update	2024-05-07 01:38:46 +02:00
Philipp Kunz	269b90c64c	1.0.89	2024-05-07 01:38:11 +02:00
Philipp Kunz	6d74bdfb51	fix(core): update	2024-05-07 01:38:11 +02:00
Philipp Kunz	6aa1e9bc2a	1.0.88	2024-05-07 01:32:45 +02:00
Philipp Kunz	3f83bb9fba	fix(core): update	2024-05-07 01:32:45 +02:00
Philipp Kunz	57bbca6b28	update documentation	2024-04-20 23:19:59 +02:00
Philipp Kunz	51382611cf	1.0.87	2024-01-17 13:36:37 +01:00
Philipp Kunz	3094c0b815	fix(core): update	2024-01-17 13:36:37 +01:00
Philipp Kunz	f5273b6b82	1.0.86	2024-01-17 13:34:34 +01:00
Philipp Kunz	9c51d93418	fix(core): update	2024-01-17 13:34:33 +01:00
Philipp Kunz	5a769ef7e2	1.0.85	2023-12-10 16:30:18 +01:00
Philipp Kunz	8f71d1afde	fix(core): update	2023-12-10 16:30:17 +01:00
Philipp Kunz	6f7dace5da	1.0.84	2023-12-10 16:22:01 +01:00
Philipp Kunz	4008a5ab62	fix(core): update	2023-12-10 16:22:01 +01:00
Philipp Kunz	13f1d4698f	1.0.83	2023-12-10 16:21:09 +01:00
Philipp Kunz	d93e183db1	fix(core): update	2023-12-10 16:21:08 +01:00
Philipp Kunz	bff3b1f567	1.0.82	2023-12-10 16:20:32 +01:00
Philipp Kunz	39fb873aec	fix(core): update	2023-12-10 16:20:31 +01:00
Philipp Kunz	a2f2605241	1.0.81	2023-10-08 13:11:01 +02:00
Philipp Kunz	8dfb876988	fix(core): update	2023-10-08 13:11:00 +02:00
Philipp Kunz	5db7fc9a3b	1.0.80	2023-10-05 14:26:47 +02:00
Philipp Kunz	690b85f057	fix(core): update	2023-10-05 14:26:46 +02:00
Philipp Kunz	eea091cb56	1.0.79	2023-10-05 14:25:40 +02:00
Philipp Kunz	8d725ef303	fix(core): update	2023-10-05 14:25:39 +02:00
Philipp Kunz	4aa2708f24	1.0.78	2023-08-07 18:54:39 +02:00
Philipp Kunz	d1848f31a7	fix(core): update	2023-08-07 18:54:39 +02:00
Philipp Kunz	5aba0a7fa5	1.0.77	2023-08-07 18:20:17 +02:00
Philipp Kunz	134774b870	fix(core): update	2023-08-07 18:20:17 +02:00
Philipp Kunz	43897f0fb5	1.0.76	2023-01-07 14:14:12 +01:00
Philipp Kunz	2e57176dcc	fix(core): update	2023-01-07 14:14:12 +01:00
Philipp Kunz	d1fe66f1ba	1.0.75	2023-01-07 14:05:26 +01:00
Philipp Kunz	8ea7c53154	fix(core): update	2023-01-07 14:05:25 +01:00
Philipp Kunz	ea0858fd27	1.0.74	2022-04-14 16:56:04 +02:00
Philipp Kunz	03c00919df	fix(core): update	2022-04-14 16:56:04 +02:00