feat(demo): add demoGroup metadata to components and update related dependencies

2026-01-04 17:09:18 +00:00
parent aafdb4af72
commit 9bd1734d09
52 changed files with 136 additions and 86 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
 # Changelog

+## 2026-01-04 - 3.32.0 - feat(demo)
+add demoGroup metadata to components and update related dependencies
+
+- Add public static demoGroup properties to many components to categorize demos (groups added: App UI, Button, Chart, Data View, Form, Input, PDF, Simple, Workspace).
+- Bump package deps/devDeps: @design.estate/dees-domtools -> ^2.3.7, @design.estate/dees-element -> ^2.1.5, @design.estate/dees-wcctools -> ^3.7.1.
+- Clean up package.json deps (removed duplicate entries and removed 'lit' dependency).
+- Refactor dees-pdf-viewer to use consolidated directives import (directives.keyed and directives.repeat) instead of separate keyed/repeat imports.
+
 ## 2026-01-04 - 3.31.0 - feat(dees-input-list)
 enhance drag-and-drop reordering for dees-input-list and migrate tests to chromium runner

--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
  "author": "Lossless GmbH",
  "license": "MIT",
  "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-domtools": "^2.3.7",
+    "@design.estate/dees-element": "^2.1.5",
    "@fortawesome/fontawesome-svg-core": "^7.1.0",
    "@fortawesome/free-brands-svg-icons": "^7.1.0",
    "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -25,6 +25,7 @@
    "@push.rocks/smarti18n": "^1.0.4",
    "@push.rocks/smartpromise": "^4.2.0",
    "@push.rocks/smartstring": "^4.1.0",
+    "@tempfix/webcontainer__api": "1.6.1",
    "@tiptap/core": "^2.23.0",
    "@tiptap/extension-link": "^2.23.0",
    "@tiptap/extension-text-align": "^2.23.0",
@@ -32,11 +33,9 @@
    "@tiptap/extension-underline": "^2.23.0",
    "@tiptap/starter-kit": "^2.23.0",
    "@tsclass/tsclass": "^9.3.0",
-    "@tempfix/webcontainer__api": "1.6.1",
    "apexcharts": "^5.3.6",
    "highlight.js": "11.11.1",
    "ibantools": "^4.5.1",
-    "lit": "^3.3.1",
    "lucide": "^0.562.0",
    "monaco-editor": "0.55.1",
    "pdfjs-dist": "^4.10.38",
@@ -44,7 +43,7 @@
    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
-    "@design.estate/dees-wcctools": "^3.4.0",
+    "@design.estate/dees-wcctools": "^3.7.1",
    "@git.zone/tsbuild": "^4.0.2",
    "@git.zone/tsbundle": "^2.6.3",
    "@git.zone/tstest": "^3.1.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,11 +9,11 @@ importers:
  .:
    dependencies:
      '@design.estate/dees-domtools':
-        specifier: ^2.3.6
-        version: 2.3.6
+        specifier: ^2.3.7
+        version: 2.3.7
      '@design.estate/dees-element':
-        specifier: ^2.1.3
-        version: 2.1.3
+        specifier: ^2.1.5
+        version: 2.1.5
      '@fortawesome/fontawesome-svg-core':
        specifier: ^7.1.0
        version: 7.1.0
@@ -68,9 +68,6 @@ importers:
      ibantools:
        specifier: ^4.5.1
        version: 4.5.1
-      lit:
-        specifier: ^3.3.1
-        version: 3.3.1
      lucide:
        specifier: ^0.562.0
        version: 0.562.0
@@ -88,8 +85,8 @@ importers:
        version: 0.8.0(xterm@5.3.0)
    devDependencies:
      '@design.estate/dees-wcctools':
-        specifier: ^3.4.0
-        version: 3.4.0
+        specifier: ^3.7.1
+        version: 3.7.1
      '@git.zone/tsbuild':
        specifier: ^4.0.2
        version: 4.0.2
@@ -328,17 +325,17 @@ packages:
  '@design.estate/dees-comms@1.0.30':
    resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}

-  '@design.estate/dees-domtools@2.3.6':
-    resolution: {integrity: sha512-cKaPNtSpp/ZuuXVx2dXO3K2FU3/HjC4ZkqtXb8Kl6yy9rNDbgtjcI4PuOk9Ux1SJzw7FgcxqVh7OSEV60htbmg==}
+  '@design.estate/dees-domtools@2.3.7':
+    resolution: {integrity: sha512-MXoDBrP7JTOpni8b12aFXHJKnKBoQppM8cYBuL9cesRmCVGdB7p39XMRQ7dRyMhmmyr66L3cOczhiCV6febCwg==}

-  '@design.estate/dees-element@2.1.3':
-    resolution: {integrity: sha512-TjXWxVcdSPaT1IOk31ckfxvAZnJLuTxhFGsNCKoh63/UE2FVf6slp8//UFvN+ADigiA9ZsY0azkY99XbJCwDDA==}
+  '@design.estate/dees-element@2.1.5':
+    resolution: {integrity: sha512-czUOFvBiUKi34I+/keDRDc71fuORZS0NfbSuD2jJ4D1ODiTPjaZ6A6SkdQ2QqCEzVsx73XF99Pu8pxPnaOLnHg==}

  '@design.estate/dees-wcctools@1.3.0':
    resolution: {integrity: sha512-+yd8c1gTIKNRQYCvG0xu6Am8dHsRm7ymluX2gnoBQN4aFOpZgIBi/v9CvGyPhTD1p/VRouIBz1wsUCejnwrFCA==}

-  '@design.estate/dees-wcctools@3.4.0':
-    resolution: {integrity: sha512-B263qJxK1Ob5ZmC+qj/utiuKZvdewIO6WwTfrTKF3X0Y24pcxoJVwJsDDcJID4kRd44EcNU9CP0FfWD2uYX9GQ==}
+  '@design.estate/dees-wcctools@3.7.1':
+    resolution: {integrity: sha512-BiNWghUoC05RTQOGVCTK+wis6d18LyLY+2p8vHC0q2OBw9hrPoY8k9EplpQgY40MvP0sTXWUwaa7VPXra8ASjA==}

  '@emnapi/core@1.7.1':
    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
@@ -568,11 +565,11 @@ packages:
  '@leichtgewicht/ip-codec@2.0.5':
    resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}

-  '@lit-labs/ssr-dom-shim@1.4.0':
-    resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
+  '@lit-labs/ssr-dom-shim@1.5.0':
+    resolution: {integrity: sha512-HLomZXMmrCFHSRKESF5vklAKsDY7/fsT/ZhqCu3V0UoW/Qbv8wxmO4W9bx4KnCCF2Zak4yuk+AGraK/bPmI4kA==}

-  '@lit/reactive-element@2.1.1':
-    resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
+  '@lit/reactive-element@2.1.2':
+    resolution: {integrity: sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==}

  '@mixmark-io/domino@2.2.0':
    resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
@@ -1450,6 +1447,20 @@ packages:
  '@tempfix/idb@8.0.3':
    resolution: {integrity: sha512-hPJQKO7+oAIY+pDNImrZ9QAINbz9KmwT+yO4iRVwdPanok2YKpaUxdJzIvCUwY0YgAawlvYdffbLvRLV5hbs2g==}

+  '@tempfix/lenis@1.3.17':
+    resolution: {integrity: sha512-IqbEB2jLGd0CZrr6TQgjPlhIJJwjDD/53e60KmEr2MEMxwRFUn6pg/H2EvxtoeS7ItmQdhWkJwPgtvVRUCctNw==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      react: '>=17.0.0'
+      vue: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      react:
+        optional: true
+      vue:
+        optional: true
+
  '@tempfix/webcontainer__api@1.6.1':
    resolution: {integrity: sha512-Hgn3cwy0vPzjrVBqeVnY0jNZLaOCW7d+dxBe7Jv9YGHAjJ8udUMS+KbTywSv5paAfld3A/RN/iolmMzOwZxLTA==}

@@ -2661,20 +2672,6 @@ packages:
    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
    engines: {node: '>=0.10.0'}

-  lenis@1.3.15:
-    resolution: {integrity: sha512-zSYOFs0ydafX70uygFoipaHHQouPeE4DpZZhdOUyLJxVf2ZVvBCBBaolDDaQztTRsa6+stBlxq2GmFGJPAVryQ==}
-    peerDependencies:
-      '@nuxt/kit': '>=3.0.0'
-      react: '>=17.0.0'
-      vue: '>=3.0.0'
-    peerDependenciesMeta:
-      '@nuxt/kit':
-        optional: true
-      react:
-        optional: true
-      vue:
-        optional: true
-
  lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

@@ -2684,14 +2681,14 @@ packages:
  linkifyjs@4.3.2:
    resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}

-  lit-element@4.2.1:
-    resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==}
+  lit-element@4.2.2:
+    resolution: {integrity: sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==}

-  lit-html@3.3.1:
-    resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
+  lit-html@3.3.2:
+    resolution: {integrity: sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==}

-  lit@3.3.1:
-    resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==}
+  lit@3.3.2:
+    resolution: {integrity: sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==}

  locate-path@5.0.0:
    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
@@ -3938,7 +3935,7 @@ snapshots:
      cors: 2.8.5
      express: 5.2.1
      express-force-ssl: 0.3.2
-      lit: 3.3.1
+      lit: 3.3.2
    transitivePeerDependencies:
      - '@nuxt/kit'
      - '@push.rocks/smartserve'
@@ -3984,7 +3981,7 @@ snapshots:
      '@push.rocks/webrequest': 4.0.1
      '@push.rocks/webstore': 2.0.20
      '@tsclass/tsclass': 9.3.0
-      lit: 3.3.1
+      lit: 3.3.2
    transitivePeerDependencies:
      - '@nuxt/kit'
      - '@tiptap/pm'
@@ -4528,8 +4525,8 @@ snapshots:

  '@design.estate/dees-catalog@3.3.0(@tiptap/pm@2.27.1)':
    dependencies:
-      '@design.estate/dees-domtools': 2.3.6
-      '@design.estate/dees-element': 2.1.3
+      '@design.estate/dees-domtools': 2.3.7
+      '@design.estate/dees-element': 2.1.5
      '@design.estate/dees-wcctools': 1.3.0
      '@fortawesome/fontawesome-svg-core': 7.1.0
      '@fortawesome/free-brands-svg-icons': 7.1.0
@@ -4549,7 +4546,7 @@ snapshots:
      apexcharts: 5.3.6
      highlight.js: 11.11.1
      ibantools: 4.5.1
-      lit: 3.3.1
+      lit: 3.3.2
      lucide: 0.555.0
      monaco-editor: 0.52.2
      pdfjs-dist: 4.10.38
@@ -4569,7 +4566,7 @@ snapshots:
      '@push.rocks/smartdelay': 3.0.5
      broadcast-channel: 7.2.0

-  '@design.estate/dees-domtools@2.3.6':
+  '@design.estate/dees-domtools@2.3.7':
    dependencies:
      '@api.global/typedrequest': 3.2.5
      '@design.estate/dees-comms': 1.0.30
@@ -4586,8 +4583,8 @@ snapshots:
      '@push.rocks/webrequest': 3.0.37
      '@push.rocks/websetup': 3.0.19
      '@push.rocks/webstore': 2.0.20
-      lenis: 1.3.15
-      lit: 3.3.1
+      '@tempfix/lenis': 1.3.17
+      lit: 3.3.2
      sweet-scroll: 4.0.0
    transitivePeerDependencies:
      - '@nuxt/kit'
@@ -4595,12 +4592,12 @@ snapshots:
      - supports-color
      - vue

-  '@design.estate/dees-element@2.1.3':
+  '@design.estate/dees-element@2.1.5':
    dependencies:
-      '@design.estate/dees-domtools': 2.3.6
+      '@design.estate/dees-domtools': 2.3.7
      '@push.rocks/isounique': 1.0.5
      '@push.rocks/smartrx': 3.0.10
-      lit: 3.3.1
+      lit: 3.3.2
    transitivePeerDependencies:
      - '@nuxt/kit'
      - react
@@ -4609,22 +4606,22 @@ snapshots:

  '@design.estate/dees-wcctools@1.3.0':
    dependencies:
-      '@design.estate/dees-domtools': 2.3.6
-      '@design.estate/dees-element': 2.1.3
+      '@design.estate/dees-domtools': 2.3.7
+      '@design.estate/dees-element': 2.1.5
      '@push.rocks/smartdelay': 3.0.5
-      lit: 3.3.1
+      lit: 3.3.2
    transitivePeerDependencies:
      - '@nuxt/kit'
      - react
      - supports-color
      - vue

-  '@design.estate/dees-wcctools@3.4.0':
+  '@design.estate/dees-wcctools@3.7.1':
    dependencies:
-      '@design.estate/dees-domtools': 2.3.6
-      '@design.estate/dees-element': 2.1.3
+      '@design.estate/dees-domtools': 2.3.7
+      '@design.estate/dees-element': 2.1.5
      '@push.rocks/smartdelay': 3.0.5
-      lit: 3.3.1
+      lit: 3.3.2
    transitivePeerDependencies:
      - '@nuxt/kit'
      - react
@@ -4908,11 +4905,11 @@ snapshots:

  '@leichtgewicht/ip-codec@2.0.5': {}

-  '@lit-labs/ssr-dom-shim@1.4.0': {}
+  '@lit-labs/ssr-dom-shim@1.5.0': {}

-  '@lit/reactive-element@2.1.1':
+  '@lit/reactive-element@2.1.2':
    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.4.0
+      '@lit-labs/ssr-dom-shim': 1.5.0

  '@mixmark-io/domino@2.2.0': {}

@@ -5646,7 +5643,7 @@ snapshots:

  '@push.rocks/smartntml@2.0.8':
    dependencies:
-      '@design.estate/dees-element': 2.1.3
+      '@design.estate/dees-element': 2.1.5
      '@happy-dom/global-registrator': 15.11.7
      '@push.rocks/smartpromise': 4.2.3
      fake-indexeddb: 6.2.5
@@ -5903,7 +5900,7 @@ snapshots:

  '@push.rocks/taskbuffer@3.5.0':
    dependencies:
-      '@design.estate/dees-element': 2.1.3
+      '@design.estate/dees-element': 2.1.5
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartlog': 3.1.10
@@ -6466,6 +6463,8 @@ snapshots:

  '@tempfix/idb@8.0.3': {}

+  '@tempfix/lenis@1.3.17': {}
+
  '@tempfix/webcontainer__api@1.6.1': {}

  '@tiptap/core@2.27.1(@tiptap/pm@2.27.1)':
@@ -7801,8 +7800,6 @@ snapshots:

  kind-of@6.0.3: {}

-  lenis@1.3.15: {}
-
  lines-and-columns@1.2.4: {}

  linkify-it@5.0.0:
@@ -7811,21 +7808,21 @@ snapshots:

  linkifyjs@4.3.2: {}

-  lit-element@4.2.1:
+  lit-element@4.2.2:
    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.4.0
-      '@lit/reactive-element': 2.1.1
-      lit-html: 3.3.1
+      '@lit-labs/ssr-dom-shim': 1.5.0
+      '@lit/reactive-element': 2.1.2
+      lit-html: 3.3.2

-  lit-html@3.3.1:
+  lit-html@3.3.2:
    dependencies:
      '@types/trusted-types': 2.0.7

-  lit@3.3.1:
+  lit@3.3.2:
    dependencies:
-      '@lit/reactive-element': 2.1.1
-      lit-element: 4.2.1
-      lit-html: 3.3.1
+      '@lit/reactive-element': 2.1.2
+      lit-element: 4.2.2
+      lit-html: 3.3.2

  locate-path@5.0.0:
    dependencies:
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.31.0',
+  version: '3.32.0',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
+++ b/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
@@ -20,6 +20,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
  // STATIC
  public static demo = demoFunc;
+  public static demoGroup = 'App UI';

  // INSTANCE PROPERTIES
  @state()
--- a/ts_web/elements/00group-appui/dees-appui-appbar/component.ts
+++ b/ts_web/elements/00group-appui/dees-appui-appbar/component.ts
@@ -28,6 +28,7 @@ declare global {
@customElement('dees-appui-appbar')
 export class DeesAppuiBar extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'App UI';

  // INSTANCE PROPERTIES
  @property({ type: Array })
--- a/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts
+++ b/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts
@@ -26,6 +26,7 @@ declare global {
@customElement('dees-appui-bottombar')
 export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
  public static demo = demoFunc;
+  public static demoGroup = 'App UI';

  // INSTANCE PROPERTIES
  @state()
--- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
+++ b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
@@ -31,6 +31,7 @@ export class DeesAppuiMaincontent extends DeesElement {
      </div>
    </dees-appui-maincontent>
  `;
+  public static demoGroup = 'App UI';

  // INSTANCE
  @property({
--- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
@@ -22,6 +22,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-mainmenu')
 export class DeesAppuiMainmenu extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'App UI';

  // INSTANCE

--- a/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts
+++ b/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts
@@ -35,6 +35,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
      .isOpen=${true}
    ></dees-appui-profiledropdown>
  `;
+  public static demoGroup = 'App UI';

  @property({ type: Object })
  accessor user: {
--- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
@@ -33,6 +33,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-secondarymenu')
 export class DeesAppuiSecondarymenu extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'App UI';

  // INSTANCE

--- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
@@ -18,6 +18,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-tabs')
 export class DeesAppuiTabs extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'App UI';

  // INSTANCE
  @property({
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
@@ -39,6 +39,7 @@ declare global {
@customElement('dees-appui')
 export class DeesAppui extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'App UI';

  // ==========================================
  // REACTIVE OBSERVABLES (RxJS Subjects)
--- a/ts_web/elements/00group-button/dees-button-exit/dees-button-exit.ts
+++ b/ts_web/elements/00group-button/dees-button-exit/dees-button-exit.ts
@@ -16,6 +16,7 @@ export class DeesButtonExit extends DeesElement {
  public static demo = () => html`
    <dees-button-exit></dees-button-exit>
  `;
+  public static demoGroup = 'Button';

  // INSTANCE
  @property({
--- a/ts_web/elements/00group-button/dees-button-group/dees-button-group.ts
+++ b/ts_web/elements/00group-button/dees-button-group/dees-button-group.ts
@@ -21,6 +21,7 @@ declare global {
@customElement('dees-button-group')
 export class DeesButtonGroup extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Button';

  @property()
  accessor label: string = '';
--- a/ts_web/elements/00group-button/dees-button/dees-button.ts
+++ b/ts_web/elements/00group-button/dees-button/dees-button.ts
@@ -23,6 +23,7 @@ declare global {
@customElement('dees-button')
 export class DeesButton extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Button';

  @property({
    reflect: true,
--- a/ts_web/elements/00group-chart/dees-chart-area/component.ts
+++ b/ts_web/elements/00group-chart/dees-chart-area/component.ts
@@ -23,6 +23,7 @@ declare global {
@customElement('dees-chart-area')
 export class DeesChartArea extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Chart';

  // instance
  @state()
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
@@ -29,6 +29,7 @@ export interface ILogEntry {
@customElement('dees-chart-log')
 export class DeesChartLog extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Chart';

  @property()
  accessor label: string = 'Server Logs';
--- a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
@@ -27,6 +27,7 @@ declare global {
@customElement('dees-dataview-codebox')
 export class DeesDataviewCodebox extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Data View';

  @property()
  accessor progLang: string = 'typescript';
--- a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
@@ -27,6 +27,7 @@ declare global {
@customElement('dees-dataview-statusobject')
 export class DeesDataviewStatusobject extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Data View';

  @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;

--- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
+++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
@@ -19,6 +19,7 @@ declare global {
@customElement('dees-form-submit')
 export class DeesFormSubmit extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Form';

  @property({
    type: Boolean,
--- a/ts_web/elements/00group-form/dees-form/dees-form.ts
+++ b/ts_web/elements/00group-form/dees-form/dees-form.ts
@@ -65,6 +65,7 @@ declare global {
@customElement('dees-form')
 export class DeesForm extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'Form';

  public name: string = 'myform';
  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
--- a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
+++ b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
@@ -21,6 +21,7 @@ declare global {
 export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
  // STATIC
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE

--- a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
+++ b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
@@ -54,6 +54,7 @@ export class DeesInputCode extends DeesInputBase<string> {
      .value=${'const greeting: string = "Hello World";\nconsole.log(greeting);'}
    ></dees-input-code>
  `;
+  public static demoGroup = 'Input';

  // INSTANCE
  @property({ type: String })
--- a/ts_web/elements/00group-input/dees-input-datepicker/component.ts
+++ b/ts_web/elements/00group-input/dees-input-datepicker/component.ts
@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-datepicker')
 export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  @property({ type: String })
  accessor value: string = '';
--- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
+++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE

--- a/ts_web/elements/00group-input/dees-input-fileupload/component.ts
+++ b/ts_web/elements/00group-input/dees-input-fileupload/component.ts
@@ -21,6 +21,7 @@ declare global {
@customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  @property({ attribute: false })
  accessor value: File[] = [];
--- a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
+++ b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
@@ -17,6 +17,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 export class DeesInputIban extends DeesInputBase<DeesInputIban> {
  // STATIC
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE
  @state()
--- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
+++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
@@ -23,6 +23,7 @@ declare global {
 export class DeesInputList extends DeesInputBase<DeesInputList> {
  // STATIC
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE
  @property({ type: Array })
--- a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
+++ b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-multitoggle')
 export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';


  @property()
--- a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
+++ b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
@@ -22,6 +22,7 @@ declare global {
 export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
  // STATIC
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE
  @state()
--- a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts
+++ b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts
@@ -13,6 +13,7 @@ declare global {
@customElement('dees-input-quantityselector')
 export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySelector> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE

--- a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts
+++ b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts
@@ -21,6 +21,7 @@ type RadioOption = string | { option: string; key: string; payload?: any };
@customElement('dees-input-radiogroup')
 export class DeesInputRadiogroup extends DeesInputBase<string | object> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE

--- a/ts_web/elements/00group-input/dees-input-richtext/component.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts
@@ -28,6 +28,7 @@ declare global {
@customElement('dees-input-richtext')
 export class DeesInputRichtext extends DeesInputBase<string> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE
  @property({
--- a/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts
+++ b/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts
@@ -22,6 +22,7 @@ declare global {
 export class DeesInputTags extends DeesInputBase<DeesInputTags> {
  // STATIC
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE
  @property({ type: Array })
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
+++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-text')
 export class DeesInputText extends DeesInputBase {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  // INSTANCE
  @property({
--- a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
+++ b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
@@ -16,6 +16,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-input-typelist')
 export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';


  // INSTANCE
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
@@ -39,6 +39,7 @@ declare global {
@customElement('dees-input-wysiwyg')
 export class DeesInputWysiwyg extends DeesInputBase<string> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  @property({ type: String })
  accessor value: string = '';
--- a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
+++ b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
@@ -25,6 +25,7 @@ export type ProfileShape = 'square' | 'round';
@customElement('dees-input-profilepicture')
 export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePicture> {
  public static demo = demoFunc;
+  public static demoGroup = 'Input';

  @property({ type: String })
  accessor value: string = ''; // Base64 encoded image or URL
--- a/ts_web/elements/00group-pdf/dees-pdf-preview/component.ts
+++ b/ts_web/elements/00group-pdf/dees-pdf-preview/component.ts
@@ -15,6 +15,7 @@ declare global {
@customElement('dees-pdf-preview')
 export class DeesPdfPreview extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'PDF';
  public static styles = previewStyles;

  @property({ type: String })
--- a/ts_web/elements/00group-pdf/dees-pdf-viewer/component.ts
+++ b/ts_web/elements/00group-pdf/dees-pdf-viewer/component.ts
@@ -1,6 +1,4 @@
-import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
-import { keyed } from 'lit/directives/keyed.js';
-import { repeat } from 'lit/directives/repeat.js';
+import { DeesElement, property, html, customElement, type TemplateResult, directives } from '@design.estate/dees-element';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { viewerStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
@@ -17,6 +15,7 @@ type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' |
@customElement('dees-pdf-viewer')
 export class DeesPdfViewer extends DeesElement {
  public static demo = demoFunc;
+  public static demoGroup = 'PDF';
  public static styles = viewerStyles;

  @property({ type: String })
@@ -196,8 +195,8 @@ export class DeesPdfViewer extends DeesElement {
                </button>
              </div>
              <div class="sidebar-content">
-                ${keyed(this.documentId, html`
-                  ${repeat(
+                ${directives.keyed(this.documentId, html`
+                  ${directives.repeat(
                    this.thumbnailData,
                    (item) => item.page,
                    (item) => html`
@@ -224,7 +223,7 @@ export class DeesPdfViewer extends DeesElement {
              </div>
            ` : html`
              <div class="pages-container">
-                ${repeat(
+                ${directives.repeat(
                  this.pageData,
                  (item) => item.page,
                  (item) => html`
--- a/ts_web/elements/00group-pdf/dees-pdf/component.ts
+++ b/ts_web/elements/00group-pdf/dees-pdf/component.ts
@@ -21,6 +21,7 @@ declare global {
 export class DeesPdf extends DeesElement {
  // DEMO
  public static demo = () => html` <dees-pdf></dees-pdf> `;
+  public static demoGroup = 'PDF';

  // INSTANCE

--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
@@ -33,6 +33,7 @@ export interface IView {
 export class DeesSimpleAppDash extends DeesElement {
  // STATIC
  public static demo = demoFunc;
+  public static demoGroup = 'Simple';
  // INSTANCE

  @property()
--- a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
+++ b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
@@ -20,7 +20,8 @@ declare global {
@customElement('dees-simple-login')
 export class DeesSimpleLogin extends DeesElement {
  // STATIC
-  public static demo = demoFunc
+  public static demo = demoFunc;
+  public static demoGroup = 'Simple';
  // INSTANCE

  @property()
--- a/ts_web/elements/00group-workspace/dees-workspace-diff-editor/dees-workspace-diff-editor.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-diff-editor/dees-workspace-diff-editor.ts
@@ -31,6 +31,7 @@ export class DeesWorkspaceDiffEditor extends DeesElement {
      .filePath=${'/demo/example.ts'}
    ></dees-workspace-diff-editor>
  `;
+  public static demoGroup = 'Workspace';

  // INSTANCE
  public diffEditorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneDiffEditor>();
--- a/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts
@@ -37,6 +37,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
      <dees-workspace-filetree></dees-workspace-filetree>
    </div>
  `;
+  public static demoGroup = 'Workspace';

  // INSTANCE
  @property({ type: Object })
--- a/ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts
@@ -23,6 +23,7 @@ declare global {
@customElement('dees-workspace-markdown')
 export class DeesWorkspaceMarkdown extends DeesElement {
  public static demo = () => html`<dees-workspace-markdown></dees-workspace-markdown>`;
+  public static demoGroup = 'Workspace';

  public static styles = [
    themeDefaultStyles,
--- a/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts
@@ -19,6 +19,7 @@ declare global {
 export class DeesWorkspaceMarkdownoutlet extends DeesElement {
  // DEMO
  public static demo = demoFunc;
+  public static demoGroup = 'Workspace';

  public static styles = [
    themeDefaultStyles,
--- a/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts
@@ -23,6 +23,7 @@ declare global {
 export class DeesWorkspaceMonaco extends DeesElement {
  // DEMO
  public static demo = () => html`<dees-workspace-monaco></dees-workspace-monaco>`;
+  public static demoGroup = 'Workspace';

  // STATIC
  public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
--- a/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts
@@ -39,6 +39,7 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
      ]}
    ></dees-workspace-terminal-preview>
  `;
+  public static demoGroup = 'Workspace';

  /**
   * The command being displayed (shown in header)
--- a/ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts
@@ -37,6 +37,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
    const env = new WebContainerEnvironment();
    return html`<dees-workspace-terminal .executionEnvironment=${env}></dees-workspace-terminal>`;
  };
+  public static demoGroup = 'Workspace';

  // INSTANCE
  private resizeObserver: ResizeObserver;
--- a/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
@@ -197,6 +197,7 @@ testSmartPromise();
      </dees-demowrapper>
    `;
  };
+  public static demoGroup = 'Workspace';

  // INSTANCE
  @property({ type: Object })