v3.34.0

feat(dees-input-toggle): Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm
v3.33.0
2026-01-07 18:42:00 +00:00 · 2026-01-07 18:42:00 +00:00 · 2026-01-06 00:45:10 +00:00 · 2026-01-06 00:45:10 +00:00 · 2026-01-05 12:07:05 +00:00 · 2026-01-04 17:09:18 +00:00
88 changed files with 2310 additions and 211 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,58 @@
 # Changelog

+## 2026-01-07 - 3.34.0 - feat(dees-input-toggle)
+Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm
+
+- New UI input component: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts — toggle switch with pointer drag, keyboard support, value syncing and DeesInputBase integration.
+- Interactive demo added: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts demonstrating usage, batch operations and event handling.
+- Module exports updated: added ts_web/elements/00group-input/dees-input-toggle/index.ts and exported from ts_web/elements/00group-input/index.ts.
+- DeesForm integration: imported DeesInputToggle and added it to the form components array and input union types in ts_web/elements/00group-form/dees-form/dees-form.ts
+
+## 2026-01-06 - 3.33.0 - feat(dees-statsgrid)
+add multiPercentage tile type to stats grid
+
+- Add new 'multiPercentage' type to IStatsTile (percentages: [{label, value, color?}])
+- Implement renderMultiPercentage() to render up to 3 percentage items with label, value and colored progress bars
+- Add CSS styles for multi-percentage layout, bars, labels and values
+- Update demo to replace 'Error Rate' tile with a 'Resource Usage' multiPercentage example (CPU, Memory, Disk)
+- Change is additive and backward-compatible with existing tile types
+
+## 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
+
+- Add rich drag state to dees-input-list: dragStartY, dragCurrentY, targetIndex, itemHeight and originalItemRects for accurate hit detection.
+- Introduce bound global drag handlers and centralized global drag end/cleanup logic (handleGlobalDragOver / handleGlobalDragEnd).
+- Improve drag visuals and animations: 'dragging', 'move-up', 'move-down' transforms, box-shadow, and smoother transitions; prevent hover styling while dragging.
+- Move reorder logic away from per-item drop to global drag end to avoid race/positioning issues and ensure consistent reflow and cleanup.
+- Migrate many browser test files to chromium-specific variants (added *.chromium.ts) and remove duplicate browser test counterparts.
+
+## 2026-01-04 - 3.30.1 - fix(dees-statsgrid)
+refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance
+
+- Reduce global spacing and sizing variables (grid-gap 16→12, tile-padding 24→16, header-spacing 16→12, content-min-height 48→40, description-spacing 12→8, border-radius 8→6).
+- Adjust typographic scale (value-font-size 30→26, unit-font-size 16→14, label-font-size 13→12, title-font-size 14→13).
+- Switch color tokens to neutral hex values and tighten hover/box-shadow (tile border and backgrounds updated from HSL to hex, hover bg to #fafafa/#0d0d0d, border-color and shadow reduced).
+- Downsize graphical elements: gauge and SVG dimensions (width 140→120, height 80→70), stroke-widths 8→6, radius 48→40.
+- Slim down percentage bar and trend visuals (percentage bar height 8→6, border-radius 4→3, trend stroke-width 2→1.5, trend fill moved to RGBA).
+- No functional or API changes — purely visual/CSS and SVG adjustments.
+
+## 2026-01-03 - 3.30.0 - feat(appui)
+add dees-appui-bottombar component with config, programmatic API, demo and docs
+
+- Adds a new dees-appui-bottombar web component (ts_web/elements/00group-appui/dees-appui-bottombar/) implementing widget and action management (add/update/remove/get/clear).
+- Introduces bottom bar types and API in ts_web/elements/interfaces/appconfig.ts (IBottomBarWidget, IBottomBarAction, IBottomBarConfig, IBottomBarAPI) and extends the app config/type to include bottomBar and bottomBar APIs.
+- Integrates the bottom bar into dees-appui: imports and registers component, renders conditionally, exposes bottomBar proxy API, visibility controls (set/getBottomBarVisible), and wires initial config to populate widgets/actions.
+- Updates layout/styles (reduces main grid height to account for 24px fixed bottom bar and adds bottombar-hidden attribute handling) and exports component from the appui index.
+- Adds interactive demos (dees-appui-bottombar.demo.ts and integration demo) and documents usage and API in readme.hints.md.
+
 ## 2026-01-03 - 3.29.3 - fix(elements/appui)
 prevent scroll chaining on app UI components by adding overscroll-behavior: contain

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "3.29.3",
+  "version": "3.34.0",
  "private": false,
  "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
  "main": "dist_ts_web/index.js",
@@ -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/readme.hints.md
+++ b/readme.hints.md
@@ -800,4 +800,114 @@ html`
 - **External Router Support**: Integrate with Angular Router or other frameworks
 - **State Persistence**: Save/restore collapsed menus, selections, and current view
 - **View-specific Menus**: Each view can define its own secondary menu and tabs
- **Full Backward Compatibility**: Existing code continues to work
+- **Full Backward Compatibility**: Existing code continues to work
+
+## AppUI Bottom Bar (2026-01-03)
+
+Added a new `dees-appui-bottombar` component similar to `dees-workspace-bottombar`, providing a 24px fixed-height status bar at the bottom of the app shell.
+
+### Features:
+- **Generic status widgets**: Configurable widgets with icon, label, status colors, loading spinner
+- **App-specific actions**: Quick action buttons with icons and tooltips
+- **Always visible**: Fixed 24px height at the bottom of the app
+- **Status colors**: idle, active (blue), success (green), warning (yellow), error (red)
+- **Context menus**: Widgets can have right-click context menus
+
+### New Interfaces (in `interfaces/appconfig.ts`):
+
+```typescript
+interface IBottomBarWidget {
+  id: string;
+  iconName?: string;
+  label?: string;
+  status?: 'idle' | 'active' | 'success' | 'warning' | 'error';
+  tooltip?: string;
+  loading?: boolean;
+  onClick?: () => void;
+  contextMenuItems?: IBottomBarContextMenuItem[];
+  position?: 'left' | 'right';
+  order?: number;
+}
+
+interface IBottomBarAction {
+  id: string;
+  iconName: string;
+  tooltip?: string;
+  onClick: () => void | Promise<void>;
+  disabled?: boolean;
+  position?: 'left' | 'right';
+}
+
+interface IBottomBarConfig {
+  visible?: boolean;
+  widgets?: IBottomBarWidget[];
+  actions?: IBottomBarAction[];
+}
+```
+
+### Usage via configure():
+
+```typescript
+const config: IAppConfig = {
+  // ... other config
+  bottomBar: {
+    visible: true,
+    widgets: [
+      {
+        id: 'status',
+        iconName: 'lucide:activity',
+        label: 'System Online',
+        status: 'success',
+        tooltip: 'All systems operational',
+        onClick: () => console.log('Status clicked'),
+      },
+      {
+        id: 'notifications',
+        iconName: 'lucide:bell',
+        label: '3 notifications',
+        status: 'warning',
+        position: 'left',
+      },
+      {
+        id: 'version',
+        iconName: 'lucide:gitBranch',
+        label: 'v1.2.3',
+        position: 'right',
+      },
+    ],
+    actions: [
+      {
+        id: 'terminal',
+        iconName: 'lucide:terminal',
+        tooltip: 'Open Terminal',
+        position: 'right',
+        onClick: () => console.log('Terminal clicked'),
+      },
+    ],
+  },
+};
+```
+
+### Programmatic API:
+
+```typescript
+// Add/update/remove widgets
+appui.bottomBar.addWidget({ id: 'status', ... });
+appui.bottomBar.updateWidget('status', { status: 'error', label: 'Error!' });
+appui.bottomBar.removeWidget('status');
+appui.bottomBar.clearWidgets();
+
+// Add/remove actions
+appui.bottomBar.addAction({ id: 'refresh', iconName: 'lucide:refreshCw', ... });
+appui.bottomBar.removeAction('refresh');
+appui.bottomBar.clearActions();
+
+// Visibility control
+appui.setBottomBarVisible(false);
+appui.getBottomBarVisible();
+```
+
+### Files:
+- `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts` - Main component
+- `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts` - Demo
+- `ts_web/elements/interfaces/appconfig.ts` - New interfaces added
--- a/readme.plan.md
+++ b/readme.plan.md
--- a/test/test.chromium.ts
+++ b/test/test.chromium.ts
--- a/test/test.contextmenu-demo.chromium.ts
+++ b/test/test.contextmenu-demo.chromium.ts
--- a/test/test.contextmenu-nested-close.chromium.ts
+++ b/test/test.contextmenu-nested-close.chromium.ts
--- a/test/test.contextmenu-shadowdom.chromium.ts
+++ b/test/test.contextmenu-shadowdom.chromium.ts
--- a/test/test.contextmenu.chromium.ts
+++ b/test/test.contextmenu.chromium.ts
--- a/test/test.shadow-dom-containment.chromium.ts
+++ b/test/test.shadow-dom-containment.chromium.ts
--- a/test/test.tabs-indicator.chromium.ts
+++ b/test/test.tabs-indicator.chromium.ts
--- a/test/test.wysiwyg-basic.chromium.ts
+++ b/test/test.wysiwyg-basic.chromium.ts
--- a/test/test.wysiwyg-blockmovement.chromium.ts
+++ b/test/test.wysiwyg-blockmovement.chromium.ts
--- a/test/test.wysiwyg-blocks-debug.chromium.ts
+++ b/test/test.wysiwyg-blocks-debug.chromium.ts
--- a/test/test.wysiwyg-blocks.chromium.ts
+++ b/test/test.wysiwyg-blocks.chromium.ts
--- a/test/test.wysiwyg-blocktype-change.chromium.ts
+++ b/test/test.wysiwyg-blocktype-change.chromium.ts
--- a/test/test.wysiwyg-contextmenu.chromium.ts
+++ b/test/test.wysiwyg-contextmenu.chromium.ts
--- a/test/test.wysiwyg-dragdrop-simple.chromium.ts
+++ b/test/test.wysiwyg-dragdrop-simple.chromium.ts
--- a/test/test.wysiwyg-dragdrop-visual.chromium.ts
+++ b/test/test.wysiwyg-dragdrop-visual.chromium.ts
--- a/test/test.wysiwyg-dragdrop.chromium.ts
+++ b/test/test.wysiwyg-dragdrop.chromium.ts
--- a/test/test.wysiwyg-dragissue.chromium.ts
+++ b/test/test.wysiwyg-dragissue.chromium.ts
--- a/test/test.wysiwyg-dropindicator.chromium.ts
+++ b/test/test.wysiwyg-dropindicator.chromium.ts
--- a/test/test.wysiwyg-eventlisteners.chromium.ts
+++ b/test/test.wysiwyg-eventlisteners.chromium.ts
--- a/test/test.wysiwyg-keyboard.chromium.ts
+++ b/test/test.wysiwyg-keyboard.chromium.ts
--- a/test/test.wysiwyg-phase3.chromium.ts
+++ b/test/test.wysiwyg-phase3.chromium.ts
--- a/test/test.wysiwyg-selection-highlight.chromium.ts
+++ b/test/test.wysiwyg-selection-highlight.chromium.ts
--- a/test/test.wysiwyg-selection-simple.chromium.ts
+++ b/test/test.wysiwyg-selection-simple.chromium.ts
--- a/test/test.wysiwyg-split.chromium.ts
+++ b/test/test.wysiwyg-split.chromium.ts
--- 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.29.3',
+  version: '3.34.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.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts
@@ -0,0 +1,210 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesAppuiBottombar } from './dees-appui-bottombar.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper>
+      <style>
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          background: #1a1a1a;
+        }
+
+        .demo-section {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .demo-label {
+          font-size: 12px;
+          color: #737373;
+          font-family: 'Geist Sans', sans-serif;
+        }
+
+        .demo-bottombar-wrapper {
+          border: 1px solid hsl(0 0% 20%);
+          border-radius: 4px;
+          overflow: hidden;
+        }
+      </style>
+      <div class="demo-container">
+        <div class="demo-section">
+          <div class="demo-label">Bottom bar with status widgets and actions</div>
+          <div class="demo-bottombar-wrapper">
+            <dees-appui-bottombar
+              id="demo-bottombar"
+            ></dees-appui-bottombar>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <div class="demo-label">Controls</div>
+          <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            <button onclick="addSuccessWidget()">Add Success Widget</button>
+            <button onclick="addWarningWidget()">Add Warning Widget</button>
+            <button onclick="addErrorWidget()">Add Error Widget</button>
+            <button onclick="addLoadingWidget()">Add Loading Widget</button>
+            <button onclick="addRightWidget()">Add Right Widget</button>
+            <button onclick="addAction()">Add Action</button>
+            <button onclick="clearAll()">Clear All</button>
+          </div>
+        </div>
+      </div>
+      <script type="module">
+        const bottombar = document.getElementById('demo-bottombar');
+
+        // Wait for component to initialize
+        await bottombar.updateComplete;
+
+        // Add initial widgets
+        bottombar.addWidget({
+          id: 'status',
+          iconName: 'lucide:activity',
+          label: 'System Online',
+          status: 'success',
+          tooltip: 'All systems operational',
+          onClick: () => console.log('Status clicked'),
+          contextMenuItems: [
+            { name: 'View Details', iconName: 'lucide:info', action: () => alert('System details') },
+            { divider: true },
+            { name: 'Refresh Status', iconName: 'lucide:refreshCw', action: () => alert('Refreshing...') },
+          ],
+        });
+
+        bottombar.addWidget({
+          id: 'notifications',
+          iconName: 'lucide:bell',
+          label: '3 notifications',
+          status: 'warning',
+          tooltip: 'You have unread notifications',
+          onClick: () => console.log('Notifications clicked'),
+        });
+
+        bottombar.addWidget({
+          id: 'version',
+          iconName: 'lucide:gitBranch',
+          label: 'v1.2.3',
+          tooltip: 'Current version',
+          position: 'right',
+          onClick: () => console.log('Version clicked'),
+        });
+
+        // Add initial actions
+        bottombar.addAction({
+          id: 'settings',
+          iconName: 'lucide:settings',
+          tooltip: 'Settings',
+          position: 'right',
+          onClick: () => alert('Settings clicked'),
+        });
+
+        bottombar.addAction({
+          id: 'help',
+          iconName: 'lucide:helpCircle',
+          tooltip: 'Help',
+          position: 'right',
+          onClick: () => alert('Help clicked'),
+        });
+
+        // Demo control functions
+        let widgetCounter = 0;
+        let actionCounter = 0;
+
+        window.addSuccessWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'success-' + widgetCounter,
+            iconName: 'lucide:checkCircle',
+            label: 'Success ' + widgetCounter,
+            status: 'success',
+            tooltip: 'Success widget',
+            onClick: () => bottombar.removeWidget('success-' + widgetCounter),
+          });
+        };
+
+        window.addWarningWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'warning-' + widgetCounter,
+            iconName: 'lucide:alertTriangle',
+            label: 'Warning ' + widgetCounter,
+            status: 'warning',
+            tooltip: 'Warning widget',
+            onClick: () => bottombar.removeWidget('warning-' + widgetCounter),
+          });
+        };
+
+        window.addErrorWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'error-' + widgetCounter,
+            iconName: 'lucide:xCircle',
+            label: 'Error ' + widgetCounter,
+            status: 'error',
+            tooltip: 'Error widget',
+            onClick: () => bottombar.removeWidget('error-' + widgetCounter),
+          });
+        };
+
+        window.addLoadingWidget = () => {
+          widgetCounter++;
+          const id = 'loading-' + widgetCounter;
+          bottombar.addWidget({
+            id: id,
+            iconName: 'lucide:loader2',
+            label: 'Loading...',
+            status: 'active',
+            loading: true,
+            tooltip: 'Loading in progress',
+          });
+
+          // Simulate completion after 3 seconds
+          setTimeout(() => {
+            bottombar.updateWidget(id, {
+              iconName: 'lucide:check',
+              label: 'Done!',
+              status: 'success',
+              loading: false,
+            });
+          }, 3000);
+        };
+
+        window.addRightWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'right-' + widgetCounter,
+            iconName: 'lucide:info',
+            label: 'Right ' + widgetCounter,
+            position: 'right',
+            onClick: () => bottombar.removeWidget('right-' + widgetCounter),
+          });
+        };
+
+        window.addAction = () => {
+          actionCounter++;
+          bottombar.addAction({
+            id: 'action-' + actionCounter,
+            iconName: 'lucide:zap',
+            tooltip: 'Action ' + actionCounter,
+            onClick: () => {
+              alert('Action ' + actionCounter + ' clicked');
+              bottombar.removeAction('action-' + actionCounter);
+            },
+          });
+        };
+
+        window.clearAll = () => {
+          bottombar.clearWidgets();
+          bottombar.clearActions();
+          widgetCounter = 0;
+          actionCounter = 0;
+        };
+      </script>
+    </dees-demowrapper>
+  `;
+};
--- 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
@@ -0,0 +1,315 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import '../../dees-icon/dees-icon.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import type {
+  IBottomBarWidget,
+  IBottomBarAction,
+  IBottomBarAPI,
+} from '../../interfaces/appconfig.js';
+import { demoFunc } from './dees-appui-bottombar.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-appui-bottombar': DeesAppuiBottombar;
+  }
+}
+
+@customElement('dees-appui-bottombar')
+export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
+  public static demo = demoFunc;
+  public static demoGroup = 'App UI';
+
+  // INSTANCE PROPERTIES
+  @state()
+  accessor widgets: IBottomBarWidget[] = [];
+
+  @state()
+  accessor actions: IBottomBarAction[] = [];
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 24px;
+        flex-shrink: 0;
+        user-select: none;
+      }
+
+      .bottom-bar {
+        height: 24px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        gap: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .widget {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        white-space: nowrap;
+      }
+
+      .widget:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .widget dees-icon {
+        flex-shrink: 0;
+      }
+
+      .widget-separator {
+        width: 1px;
+        height: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        margin: 0 4px;
+      }
+
+      /* Status colors matching dees-workspace-bottombar */
+      .widget.active {
+        color: ${cssManager.bdTheme('hsl(210 100% 45%)', 'hsl(210 100% 60%)')};
+      }
+
+      .widget.success {
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
+      }
+
+      .widget.warning {
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
+      }
+
+      .widget.error {
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .spinning {
+        animation: spin 1s linear infinite;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .action-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .action-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .action-button.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .action-button.disabled:hover {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const leftWidgets = this.widgets
+      .filter(w => w.position !== 'right')
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    const rightWidgets = this.widgets
+      .filter(w => w.position === 'right')
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    const leftActions = this.actions.filter(a => a.position === 'left');
+    const rightActions = this.actions.filter(a => a.position !== 'left');
+
+    return html`
+      <div class="bottom-bar">
+        <!-- Left actions -->
+        ${leftActions.map(action => this.renderAction(action))}
+
+        <!-- Left widgets -->
+        ${leftWidgets.map((widget, index) => html`
+          ${index > 0 || leftActions.length > 0 ? html`<div class="widget-separator"></div>` : ''}
+          ${this.renderWidget(widget)}
+        `)}
+
+        <div class="spacer"></div>
+
+        <!-- Right widgets -->
+        ${rightWidgets.map((widget, index) => html`
+          ${this.renderWidget(widget)}
+          ${index < rightWidgets.length - 1 || rightActions.length > 0 ? html`<div class="widget-separator"></div>` : ''}
+        `)}
+
+        <!-- Right actions -->
+        ${rightActions.map(action => this.renderAction(action))}
+      </div>
+    `;
+  }
+
+  private renderWidget(widget: IBottomBarWidget): TemplateResult {
+    const statusClass = widget.status && widget.status !== 'idle' ? widget.status : '';
+    const iconName = widget.iconName
+      ? (widget.iconName.startsWith('lucide:') ? widget.iconName : `lucide:${widget.iconName}`)
+      : '';
+
+    return html`
+      <div
+        class="widget ${statusClass}"
+        title="${widget.tooltip || ''}"
+        @click=${() => widget.onClick?.()}
+        @contextmenu=${(e: MouseEvent) => this.handleWidgetContextMenu(e, widget)}
+      >
+        ${iconName ? html`
+          <dees-icon
+            .icon=${iconName}
+            iconSize="12"
+            class="${widget.loading ? 'spinning' : ''}"
+          ></dees-icon>
+        ` : ''}
+        ${widget.label ? html`<span>${widget.label}</span>` : ''}
+      </div>
+    `;
+  }
+
+  private renderAction(action: IBottomBarAction): TemplateResult {
+    const iconName = action.iconName.startsWith('lucide:')
+      ? action.iconName
+      : `lucide:${action.iconName}`;
+
+    return html`
+      <div
+        class="action-button ${action.disabled ? 'disabled' : ''}"
+        title="${action.tooltip || ''}"
+        @click=${() => !action.disabled && action.onClick?.()}
+      >
+        <dees-icon
+          .icon=${iconName}
+          iconSize="12"
+        ></dees-icon>
+      </div>
+    `;
+  }
+
+  private async handleWidgetContextMenu(e: MouseEvent, widget: IBottomBarWidget): Promise<void> {
+    if (!widget.contextMenuItems || widget.contextMenuItems.length === 0) return;
+
+    e.preventDefault();
+
+    const menuItems: Parameters<typeof DeesContextmenu.openContextMenuWithOptions>[1] = [];
+
+    for (const item of widget.contextMenuItems) {
+      if (item.divider) {
+        menuItems.push({ divider: true });
+      } else {
+        menuItems.push({
+          name: item.name,
+          iconName: item.iconName,
+          action: async () => { await item.action(); },
+          disabled: item.disabled,
+        });
+      }
+    }
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  // ==========================================
+  // API METHODS (implements IBottomBarAPI)
+  // ==========================================
+
+  /**
+   * Add a widget to the bottom bar
+   */
+  public addWidget(widget: IBottomBarWidget): void {
+    // Remove existing widget with same ID if present
+    this.widgets = this.widgets.filter(w => w.id !== widget.id);
+    this.widgets = [...this.widgets, widget];
+  }
+
+  /**
+   * Update an existing widget by ID
+   */
+  public updateWidget(id: string, update: Partial<IBottomBarWidget>): void {
+    this.widgets = this.widgets.map(w =>
+      w.id === id ? { ...w, ...update } : w
+    );
+  }
+
+  /**
+   * Remove a widget by ID
+   */
+  public removeWidget(id: string): void {
+    this.widgets = this.widgets.filter(w => w.id !== id);
+  }
+
+  /**
+   * Get a widget by ID
+   */
+  public getWidget(id: string): IBottomBarWidget | undefined {
+    return this.widgets.find(w => w.id === id);
+  }
+
+  /**
+   * Clear all widgets
+   */
+  public clearWidgets(): void {
+    this.widgets = [];
+  }
+
+  /**
+   * Add an action button
+   */
+  public addAction(action: IBottomBarAction): void {
+    this.actions = this.actions.filter(a => a.id !== action.id);
+    this.actions = [...this.actions, action];
+  }
+
+  /**
+   * Remove an action by ID
+   */
+  public removeAction(id: string): void {
+    this.actions = this.actions.filter(a => a.id !== id);
+  }
+
+  /**
+   * Clear all actions
+   */
+  public clearActions(): void {
+    this.actions = [];
+  }
+}
--- a/ts_web/elements/00group-appui/dees-appui-bottombar/index.ts
+++ b/ts_web/elements/00group-appui/dees-appui-bottombar/index.ts
@@ -0,0 +1 @@
+export * from './dees-appui-bottombar.js';
--- 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.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts
@@ -3,6 +3,8 @@ import type { DeesAppui } from './dees-appui.js';
 import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
 import type * as interfaces from '../../interfaces/index.js';
 import '@design.estate/dees-wcctools/demotools';
+import '../../dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile } from '../../dees-statsgrid/dees-statsgrid.js';

 // Demo view component with lifecycle hooks
@customElement('demo-dashboard-view')
@@ -12,6 +14,79 @@ class DemoDashboardView extends DeesElement {

  private ctx: IViewActivationContext;

+  private statsTiles: IStatsTile[] = [
+    {
+      id: 'users',
+      title: 'Active Users',
+      value: 1234,
+      type: 'number',
+      icon: 'lucide:users',
+      description: 'Online now',
+      color: '#22c55e'
+    },
+    {
+      id: 'api-calls',
+      title: 'API Calls',
+      value: 45200,
+      type: 'trend',
+      icon: 'lucide:activity',
+      description: '+12% from last hour',
+      color: '#3b82f6',
+      trendData: [32000, 35000, 38000, 41000, 39000, 42000, 45200]
+    },
+    {
+      id: 'health',
+      title: 'System Health',
+      value: 99.9,
+      unit: '%',
+      type: 'gauge',
+      icon: 'lucide:heart-pulse',
+      description: 'All systems operational',
+      color: '#10b981',
+      gaugeOptions: {
+        min: 0,
+        max: 100,
+        thresholds: [
+          { value: 80, color: '#ef4444' },
+          { value: 95, color: '#f59e0b' },
+          { value: 100, color: '#10b981' }
+        ]
+      }
+    },
+    {
+      id: 'response',
+      title: 'Avg Response',
+      value: 127,
+      unit: 'ms',
+      type: 'number',
+      icon: 'lucide:timer',
+      description: '-15ms from yesterday',
+      color: '#8b5cf6'
+    },
+    {
+      id: 'resources',
+      title: 'Resource Usage',
+      value: '',
+      type: 'multiPercentage',
+      icon: 'lucide:server',
+      percentages: [
+        { label: 'CPU', value: 67, color: '#3b82f6' },
+        { label: 'Memory', value: 84, color: '#8b5cf6' },
+        { label: 'Disk', value: 45, color: '#10b981' }
+      ]
+    },
+    {
+      id: 'requests',
+      title: 'Requests/sec',
+      value: 1850,
+      type: 'trend',
+      icon: 'lucide:zap',
+      description: 'Current throughput',
+      color: '#06b6d4',
+      trendData: [1200, 1400, 1350, 1600, 1750, 1680, 1850]
+    }
+  ];
+
  onActivate(context: IViewActivationContext) {
    this.ctx = context;
    this.activated = true;
@@ -83,21 +158,9 @@ class DemoDashboardView extends DeesElement {
        }
        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
        p { color: #737373; margin-bottom: 32px; }
-        .grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: 16px;
+        dees-statsgrid {
+          margin-bottom: 32px;
        }
-        .card {
-          background: rgba(255,255,255,0.03);
-          border: 1px solid rgba(255,255,255,0.08);
-          border-radius: 8px;
-          padding: 20px;
-        }
-        .card h3 { color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
-        .metric { font-size: 32px; font-weight: 700; color: #fafafa; }
-        .status { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 12px; }
-        .status.active { background: #14532d; color: #4ade80; }

        .ctx-actions {
          margin-top: 32px;
@@ -147,23 +210,10 @@ class DemoDashboardView extends DeesElement {
      </style>
      <h1>Dashboard</h1>
      <p>Welcome back! Here's an overview of your system.</p>
-      <div class="grid">
-        <div class="card">
-          <h3>Active Users</h3>
-          <div class="metric">1,234</div>
-          <span class="status active">Online</span>
-        </div>
-        <div class="card">
-          <h3>API Calls</h3>
-          <div class="metric">45.2K</div>
-          <p style="color: #4ade80; font-size: 12px; margin: 0;">+12% from last hour</p>
-        </div>
-        <div class="card">
-          <h3>System Health</h3>
-          <div class="metric">99.9%</div>
-          <p style="color: #737373; font-size: 12px; margin: 0;">All systems operational</p>
-        </div>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.statsTiles}
+        @tile-action=${(e: CustomEvent) => console.log('Tile action:', e.detail)}
+      ></dees-statsgrid>

      <div class="ctx-actions">
        <h2>Context Actions (ctx.appui)</h2>
@@ -663,6 +713,44 @@ export const demoFunc = () => {

    defaultView: 'dashboard',

+    bottomBar: {
+      visible: true,
+      widgets: [
+        {
+          id: 'status',
+          iconName: 'lucide:activity',
+          label: 'System Online',
+          status: 'success',
+          tooltip: 'All systems operational',
+          onClick: () => console.log('Status clicked'),
+        },
+        {
+          id: 'notifications',
+          iconName: 'lucide:bell',
+          label: '3 notifications',
+          status: 'warning',
+          tooltip: 'You have unread notifications',
+          onClick: () => console.log('Notifications clicked'),
+        },
+        {
+          id: 'version',
+          iconName: 'lucide:gitBranch',
+          label: 'v1.2.3',
+          position: 'right',
+          tooltip: 'Current version',
+        },
+      ],
+      actions: [
+        {
+          id: 'terminal',
+          iconName: 'lucide:terminal',
+          tooltip: 'Open Terminal',
+          position: 'right',
+          onClick: () => console.log('Terminal clicked'),
+        },
+      ],
+    },
+
    onViewChange: (viewId, view) => {
      console.log(`View changed to: ${viewId} (${view.name})`);
    },
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
@@ -15,6 +15,7 @@ import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainme
 import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
 import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
 import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
+import type { DeesAppuiBottombar } from '../dees-appui-bottombar/dees-appui-bottombar.js';
 import { demoFunc } from './dees-appui.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';

@@ -23,6 +24,7 @@ import { ViewRegistry } from './view.registry.js';

 // Import child components
 import '../dees-appui-appbar/index.js';
+import '../dees-appui-bottombar/dees-appui-bottombar.js';
 import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
 import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
 import '../dees-appui-maincontent/dees-appui-maincontent.js';
@@ -37,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)
@@ -156,6 +159,12 @@ export class DeesAppui extends DeesElement {
  @state()
  accessor activitylogElement: DeesAppuiActivitylog | undefined = undefined;

+  @state()
+  accessor bottombarElement: DeesAppuiBottombar | undefined = undefined;
+
+  @state()
+  accessor bottombarVisible: boolean = true;
+
  // Current view state
  @state()
  accessor currentView: interfaces.IViewDefinition | undefined = undefined;
@@ -179,15 +188,27 @@ export class DeesAppui extends DeesElement {
      .maingrid {
        position: absolute;
        top: 40px;
-        height: calc(100% - 40px);
+        height: calc(100% - 40px - 24px);
        width: 100%;
        display: grid;
        /* grid-template-columns set dynamically in template */
        grid-template-rows: 1fr;
-        transition: grid-template-columns 0.3s ease;
+        transition: grid-template-columns 0.3s ease, height 0.3s ease;
        overflow: hidden;
      }

+      :host([bottombar-hidden]) .maingrid {
+        height: calc(100% - 40px);
+      }
+
+      dees-appui-bottombar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 4;
+      }
+
      /* Z-index layering for proper stacking */
      .maingrid > dees-appui-mainmenu {
        position: relative;
@@ -295,6 +316,9 @@ export class DeesAppui extends DeesElement {
          class="${this.activityLogVisible ? 'visible' : 'hidden'}"
        ></dees-appui-activitylog>
      </div>
+      ${this.bottombarVisible ? html`
+        <dees-appui-bottombar></dees-appui-bottombar>
+      ` : ''}
    `;
  }

@@ -305,6 +329,7 @@ export class DeesAppui extends DeesElement {
    this.secondarymenu = this.shadowRoot!.querySelector('dees-appui-secondarymenu') as DeesAppuiSecondarymenu;
    this.maincontent = this.shadowRoot!.querySelector('dees-appui-maincontent') as DeesAppuiMaincontent;
    this.activitylogElement = this.shadowRoot!.querySelector('dees-appui-activitylog') as DeesAppuiActivitylog;
+    this.bottombarElement = this.shadowRoot!.querySelector('dees-appui-bottombar') as DeesAppuiBottombar;

    // Subscribe to activity log entry changes for badge count
    if (this.activitylogElement) {
@@ -730,6 +755,72 @@ export class DeesAppui extends DeesElement {
    return this.activityLogVisible;
  }

+  // ==========================================
+  // PROGRAMMATIC API: BOTTOM BAR
+  // ==========================================
+
+  /**
+   * Get the bottom bar API for widget/action management
+   */
+  public get bottomBar(): interfaces.IBottomBarAPI {
+    if (!this.bottombarElement) {
+      // Return a deferred API that will work after firstUpdated
+      return {
+        addWidget: (widget) => {
+          this.updateComplete.then(() => this.bottombarElement?.addWidget(widget));
+        },
+        updateWidget: (id, update) => {
+          this.updateComplete.then(() => this.bottombarElement?.updateWidget(id, update));
+        },
+        removeWidget: (id) => {
+          this.updateComplete.then(() => this.bottombarElement?.removeWidget(id));
+        },
+        getWidget: (id) => this.bottombarElement?.getWidget(id),
+        clearWidgets: () => {
+          this.updateComplete.then(() => this.bottombarElement?.clearWidgets());
+        },
+        addAction: (action) => {
+          this.updateComplete.then(() => this.bottombarElement?.addAction(action));
+        },
+        removeAction: (id) => {
+          this.updateComplete.then(() => this.bottombarElement?.removeAction(id));
+        },
+        clearActions: () => {
+          this.updateComplete.then(() => this.bottombarElement?.clearActions());
+        },
+      };
+    }
+    return {
+      addWidget: (widget) => this.bottombarElement!.addWidget(widget),
+      updateWidget: (id, update) => this.bottombarElement!.updateWidget(id, update),
+      removeWidget: (id) => this.bottombarElement!.removeWidget(id),
+      getWidget: (id) => this.bottombarElement!.getWidget(id),
+      clearWidgets: () => this.bottombarElement!.clearWidgets(),
+      addAction: (action) => this.bottombarElement!.addAction(action),
+      removeAction: (id) => this.bottombarElement!.removeAction(id),
+      clearActions: () => this.bottombarElement!.clearActions(),
+    };
+  }
+
+  /**
+   * Set bottom bar visibility
+   */
+  public setBottomBarVisible(visible: boolean): void {
+    this.bottombarVisible = visible;
+    if (!visible) {
+      this.setAttribute('bottombar-hidden', '');
+    } else {
+      this.removeAttribute('bottombar-hidden');
+    }
+  }
+
+  /**
+   * Get bottom bar visibility state
+   */
+  public getBottomBarVisible(): boolean {
+    return this.bottombarVisible;
+  }
+
  // ==========================================
  // PROGRAMMATIC API: NAVIGATION
  // ==========================================
@@ -842,6 +933,23 @@ export class DeesAppui extends DeesElement {
      }
    }

+    // Apply bottom bar config
+    if (config.bottomBar) {
+      this.setBottomBarVisible(config.bottomBar.visible ?? true);
+
+      if (config.bottomBar.widgets) {
+        config.bottomBar.widgets.forEach(widget => {
+          this.bottomBar.addWidget(widget);
+        });
+      }
+
+      if (config.bottomBar.actions) {
+        config.bottomBar.actions.forEach(action => {
+          this.bottomBar.addAction(action);
+        });
+      }
+    }
+
    // Setup domtools.router integration
    this.setupRouterIntegration(config);

--- a/ts_web/elements/00group-appui/index.ts
+++ b/ts_web/elements/00group-appui/index.ts
@@ -1,6 +1,7 @@
 // App UI Components
 export * from './dees-appui-activitylog/index.js';
 export * from './dees-appui-appbar/index.js';
+export * from './dees-appui-bottombar/index.js';
 export * from './dees-appui/index.js';
 export * from './dees-appui-maincontent/index.js';
 export * from './dees-appui-mainmenu/index.js';
--- 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
@@ -19,6 +19,7 @@ import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/i
 import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
 import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
 import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
+import { DeesInputToggle } from '../../00group-input/dees-input-toggle/dees-input-toggle.js';
 import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
 import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
 import { DeesTable } from '../../dees-table/index.js';
@@ -37,6 +38,7 @@ const FORM_INPUT_TYPES = [
  DeesInputQuantitySelector,
  DeesInputRadiogroup,
  DeesInputText,
+  DeesInputToggle,
  DeesInputTypelist,
  DeesTable,
 ];
@@ -53,6 +55,7 @@ export type TFormInputElement =
  | DeesInputQuantitySelector
  | DeesInputRadiogroup
  | DeesInputText
+  | DeesInputToggle
  | DeesInputTypelist
  | DeesTable<any>;

@@ -65,6 +68,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 })
@@ -64,6 +65,26 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
  @state()
  accessor dragOverIndex: number = -1;

+  // Enhanced drag state for interactive reordering
+  @state()
+  accessor dragStartY: number = 0;
+
+  @state()
+  accessor dragCurrentY: number = 0;
+
+  @state()
+  accessor targetIndex: number = -1;
+
+  @state()
+  accessor itemHeight: number = 0;
+
+  // Bound event handlers for cleanup
+  private boundHandleGlobalDragOver: ((e: DragEvent) => void) | null = null;
+  private boundHandleGlobalDragEnd: (() => void) | null = null;
+
+  // Store original item positions for accurate hit detection (before transforms)
+  private originalItemRects: DOMRect[] = [];
+
  public static styles = [
    themeDefaultStyles,
    ...DeesInputBase.baseStyles,
@@ -113,7 +134,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
        padding: 12px 16px;
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        transition: all 0.15s ease;
+        transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden; /* Prevent animation from affecting scroll bounds */
      }
@@ -122,20 +143,31 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
        border-bottom: none;
      }

-      .list-item:hover:not(.disabled) {
+      .list-items:not(.is-dragging) .list-item:hover:not(.disabled) {
        background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
      }

+      /* Dragging item - follows cursor */
      .list-item.dragging {
-        opacity: 0.4;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.8%)')};
+        position: relative;
+        z-index: 100;
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 12%)')};
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(0, 0, 0, 0.4)')};
+        border-radius: 6px;
+        transition: box-shadow 0.15s ease, background 0.15s ease;
      }

-      .list-item.drag-over {
-        background: ${cssManager.bdTheme('hsl(210 40% 93.1%)', 'hsl(215 20.2% 13.8%)')};
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      /* Items that need to move up to make space */
+      .list-item.move-up {
+        transform: translateY(calc(-1 * var(--item-height, 48px)));
      }

+      /* Items that need to move down to make space */
+      .list-item.move-down {
+        transform: translateY(var(--item-height, 48px));
+      }
+
+
      .drag-handle {
        display: flex;
        align-items: center;
@@ -313,27 +345,9 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
        background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 34.9%)')};
      }

-      /* Animation for adding/removing items */
-      @keyframes slideIn {
-        from {
-          opacity: 0;
-          transform: translateY(-10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      .list-item {
-        animation: slideIn 0.2s ease;
-      }
-
-      /* Override any inherited contain/content-visibility that might cause scrolling issues */
-      .list-items, .list-item {
-        content-visibility: visible !important;
-        contain: none !important;
-        contain-intrinsic-size: auto !important;
+      /* Disable transitions during drop to prevent flash */
+      .list-items.dropping .list-item {
+        transition: none !important;
      }
    `,
  ];
@@ -347,12 +361,11 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
          <div class="list-items">
            ${this.value.length > 0 ? this.value.map((item, index) => html`
              <div
-                class="list-item ${this.draggedIndex === index ? 'dragging' : ''} ${this.dragOverIndex === index ? 'drag-over' : ''}"
+                class="list-item ${this.draggedIndex === index ? 'dragging' : ''}"
                draggable="${this.sortable && !this.disabled}"
                @dragstart=${(e: DragEvent) => this.handleDragStart(e, index)}
                @dragend=${this.handleDragEnd}
                @dragover=${(e: DragEvent) => this.handleDragOver(e, index)}
-                @dragleave=${this.handleDragLeave}
                @drop=${(e: DragEvent) => this.handleDrop(e, index)}
              >
                ${this.sortable && !this.disabled ? html`
@@ -547,48 +560,313 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
    return confirm(message);
  }

-  // Drag and drop handlers
+  // Drag and drop handlers - Interactive implementation
  private handleDragStart(e: DragEvent, index: number) {
    if (!this.sortable || this.disabled) return;
-    
+
    this.draggedIndex = index;
+    this.targetIndex = index;
    e.dataTransfer!.effectAllowed = 'move';
    e.dataTransfer!.setData('text/plain', index.toString());
+
+    // Hide the default drag image
+    const emptyImg = new Image();
+    emptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
+    e.dataTransfer!.setDragImage(emptyImg, 0, 0);
+
+    // Store initial mouse position
+    this.dragStartY = e.clientY;
+    this.dragCurrentY = e.clientY;
+
+    // Measure item height and store all original positions before any transforms
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    const allItems = Array.from(listItems?.querySelectorAll('.list-item') || []) as HTMLElement[];
+
+    if (allItems[index]) {
+      this.itemHeight = allItems[index].offsetHeight;
+    }
+
+    // Store original positions for accurate hit detection (before any transforms are applied)
+    this.originalItemRects = allItems.map(item => item.getBoundingClientRect());
+
+    // Add class to container
+    listItems?.classList.add('is-dragging');
+
+    // Set up global event listeners
+    this.boundHandleGlobalDragOver = this.handleGlobalDragOver.bind(this);
+    this.boundHandleGlobalDragEnd = this.handleGlobalDragEnd.bind(this);
+    document.addEventListener('dragover', this.boundHandleGlobalDragOver);
+    document.addEventListener('dragend', this.boundHandleGlobalDragEnd);
+  }
+
+  private handleGlobalDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (this.draggedIndex === -1) return;
+
+    this.dragCurrentY = e.clientY;
+
+    // Calculate which position the item should move to
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    if (!listItems) return;
+
+    const items = Array.from(listItems.querySelectorAll('.list-item')) as HTMLElement[];
+    const draggedElement = items[this.draggedIndex];
+    if (!draggedElement) return;
+
+    // Apply transform to dragged item
+    const deltaY = this.dragCurrentY - this.dragStartY;
+    draggedElement.style.transform = `translateY(${deltaY}px)`;
+
+    // Calculate the dragged item's current center position
+    const draggedRect = this.originalItemRects[this.draggedIndex];
+    if (!draggedRect) return;
+    const draggedCenter = draggedRect.top + draggedRect.height / 2 + deltaY;
+
+    // Determine target index: swap when dragged item's center crosses another item's center
+    // Account for items that have already shifted (their visual position changed)
+    let newTargetIndex = this.draggedIndex;
+
+    for (let i = 0; i < items.length; i++) {
+      if (i === this.draggedIndex) continue;
+
+      const rect = this.originalItemRects[i];
+      if (!rect) continue;
+
+      // Adjust item center based on whether it has shifted
+      let itemCenter = rect.top + rect.height / 2;
+
+      // If item has moved, use its shifted position
+      if (items[i].classList.contains('move-up')) {
+        itemCenter -= this.itemHeight;
+      } else if (items[i].classList.contains('move-down')) {
+        itemCenter += this.itemHeight;
+      }
+
+      if (draggedCenter < itemCenter && i < this.draggedIndex) {
+        newTargetIndex = i;
+        break;
+      } else if (draggedCenter > itemCenter && i > this.draggedIndex) {
+        newTargetIndex = i;
+      }
+    }
+
+    // Update target index and apply move classes
+    if (newTargetIndex !== this.targetIndex) {
+      this.targetIndex = newTargetIndex;
+      this.updateItemPositions(items);
+    }
+  }
+
+  private updateItemPositions(items: HTMLElement[]) {
+    const draggedIdx = this.draggedIndex;
+    const targetIdx = this.targetIndex;
+
+    // Set CSS variable for item height
+    const listItems = this.shadowRoot?.querySelector('.list-items') as HTMLElement;
+    if (listItems) {
+      listItems.style.setProperty('--item-height', `${this.itemHeight}px`);
+    }
+
+    items.forEach((item, i) => {
+      if (i === draggedIdx) return; // Skip dragged item
+
+      item.classList.remove('move-up', 'move-down');
+      item.style.setProperty('--item-height', `${this.itemHeight}px`);
+
+      if (draggedIdx < targetIdx) {
+        // Dragging down: items between draggedIdx and targetIdx move up
+        if (i > draggedIdx && i <= targetIdx) {
+          item.classList.add('move-up');
+        }
+      } else if (draggedIdx > targetIdx) {
+        // Dragging up: items between targetIdx and draggedIdx move down
+        if (i >= targetIdx && i < draggedIdx) {
+          item.classList.add('move-down');
+        }
+      }
+    });
+  }
+
+  private handleGlobalDragEnd() {
+    // Clean up event listeners
+    if (this.boundHandleGlobalDragOver) {
+      document.removeEventListener('dragover', this.boundHandleGlobalDragOver);
+      this.boundHandleGlobalDragOver = null;
+    }
+    if (this.boundHandleGlobalDragEnd) {
+      document.removeEventListener('dragend', this.boundHandleGlobalDragEnd);
+      this.boundHandleGlobalDragEnd = null;
+    }
+
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    const items = listItems?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+    const draggedElement = items?.[this.draggedIndex];
+
+    // If no reorder needed, animate back and clean up
+    if (this.draggedIndex === -1 || this.targetIndex === -1 || this.draggedIndex === this.targetIndex) {
+      // Animate dragged item back to original position
+      if (draggedElement && this.draggedIndex !== -1) {
+        draggedElement.style.transition = 'transform 0.15s ease';
+        draggedElement.style.transform = 'translateY(0)';
+
+        let handled = false;
+        const onReturn = () => {
+          if (handled) return;
+          handled = true;
+          draggedElement.removeEventListener('transitionend', onReturn);
+          this.cleanupDragState(listItems, items);
+        };
+
+        draggedElement.addEventListener('transitionend', onReturn, { once: true });
+        setTimeout(onReturn, 200);
+      } else {
+        this.cleanupDragState(listItems, items);
+      }
+      return;
+    }
+
+    // Calculate final position for dragged item
+    const draggedRect = this.originalItemRects[this.draggedIndex];
+    const targetRect = this.originalItemRects[this.targetIndex];
+
+    if (!draggedRect || !targetRect || !draggedElement) {
+      this.cleanupDragState(listItems, items);
+      return;
+    }
+
+    // Calculate where dragged item needs to go
+    let finalY: number;
+    if (this.targetIndex > this.draggedIndex) {
+      // Moving down: go to bottom of target
+      finalY = targetRect.bottom - draggedRect.bottom;
+    } else {
+      // Moving up: go to top of target
+      finalY = targetRect.top - draggedRect.top;
+    }
+
+    // Animate dragged item to final position
+    draggedElement.style.transition = 'transform 0.15s ease';
+    draggedElement.style.transform = `translateY(${finalY}px)`;
+
+    // After animation completes, update data
+    let handled = false;
+    const onTransitionEnd = () => {
+      if (handled) return;
+      handled = true;
+      draggedElement.removeEventListener('transitionend', onTransitionEnd);
+
+      // Disable all transitions
+      listItems?.classList.add('dropping');
+
+      // Force reflow so dropping class takes effect immediately
+      void (listItems as HTMLElement)?.offsetHeight;
+
+      // Clean up all element state
+      items?.forEach(item => {
+        item.classList.remove('move-up', 'move-down', 'dragging');
+        item.style.removeProperty('transform');
+        item.style.removeProperty('transition');
+      });
+
+      // Update data
+      const newValue = [...this.value];
+      const [draggedItem] = newValue.splice(this.draggedIndex, 1);
+      newValue.splice(this.targetIndex, 0, draggedItem);
+      this.value = newValue;
+      this.emitChange();
+
+      // Reset state
+      this.draggedIndex = -1;
+      this.dragOverIndex = -1;
+      this.targetIndex = -1;
+      this.dragStartY = 0;
+      this.dragCurrentY = 0;
+      this.originalItemRects = [];
+
+      // After render, ensure no animation then re-enable transitions
+      this.updateComplete.then(() => {
+        // Set inline transition:none on fresh elements
+        const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+        freshItems?.forEach(item => {
+          item.style.transition = 'none';
+        });
+
+        // Force reflow
+        void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight;
+
+        // Now re-enable transitions
+        requestAnimationFrame(() => {
+          freshItems?.forEach(item => {
+            item.style.removeProperty('transition');
+          });
+          listItems?.classList.remove('dropping', 'is-dragging');
+        });
+      });
+    };
+
+    draggedElement.addEventListener('transitionend', onTransitionEnd, { once: true });
+
+    // Fallback timeout in case transitionend doesn't fire
+    setTimeout(onTransitionEnd, 200);
+  }
+
+  private cleanupDragState(listItems: Element | null | undefined, items: NodeListOf<HTMLElement> | undefined) {
+    listItems?.classList.add('dropping');
+
+    // Force reflow so dropping class takes effect immediately
+    void (listItems as HTMLElement)?.offsetHeight;
+
+    items?.forEach(item => {
+      item.classList.remove('move-up', 'move-down', 'dragging');
+      item.style.removeProperty('transform');
+      item.style.removeProperty('transition');
+    });
+
+    this.draggedIndex = -1;
+    this.dragOverIndex = -1;
+    this.targetIndex = -1;
+    this.dragStartY = 0;
+    this.dragCurrentY = 0;
+    this.originalItemRects = [];
+
+    this.updateComplete.then(() => {
+      const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+      freshItems?.forEach(item => {
+        item.style.transition = 'none';
+      });
+
+      void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight;
+
+      requestAnimationFrame(() => {
+        freshItems?.forEach(item => {
+          item.style.removeProperty('transition');
+        });
+        listItems?.classList.remove('dropping', 'is-dragging');
+      });
+    });
  }

  private handleDragEnd() {
-    this.draggedIndex = -1;
-    this.dragOverIndex = -1;
+    // This is called by the native dragend on the element
+    // The actual cleanup is done in handleGlobalDragEnd
+    this.handleGlobalDragEnd();
  }

  private handleDragOver(e: DragEvent, index: number) {
    if (!this.sortable || this.disabled) return;
-    
    e.preventDefault();
    e.dataTransfer!.dropEffect = 'move';
-    this.dragOverIndex = index;
+    // We handle positioning in handleGlobalDragOver now
  }

  private handleDragLeave() {
-    this.dragOverIndex = -1;
+    // No longer needed for visual feedback - handled by transform
  }

  private handleDrop(e: DragEvent, dropIndex: number) {
    if (!this.sortable || this.disabled) return;
-    
    e.preventDefault();
-    const draggedIndex = parseInt(e.dataTransfer!.getData('text/plain'));
-    
-    if (draggedIndex !== dropIndex) {
-      const newValue = [...this.value];
-      const [draggedItem] = newValue.splice(draggedIndex, 1);
-      newValue.splice(dropIndex, 0, draggedItem);
-      this.value = newValue;
-      this.emitChange();
-    }
-    
-    this.draggedIndex = -1;
-    this.dragOverIndex = -1;
+    // The actual reorder happens in handleGlobalDragEnd
  }

  private emitChange() {
--- 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-toggle/dees-input-toggle.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
@@ -0,0 +1,310 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../dees-panel/dees-panel.js';
+import type { DeesInputToggle } from './dees-input-toggle.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+    // Example of programmatic interaction
+    const toggleAllOnBtn = elementArg.querySelector('#toggle-all-on');
+    const toggleAllOffBtn = elementArg.querySelector('#toggle-all-off');
+    const featureToggles = elementArg.querySelectorAll('.feature-toggles dees-input-toggle');
+
+    if (toggleAllOnBtn && toggleAllOffBtn) {
+      toggleAllOnBtn.addEventListener('click', () => {
+        featureToggles.forEach((toggle: DeesInputToggle) => {
+          if (!toggle.disabled && !toggle.required) {
+            toggle.value = true;
+          }
+        });
+      });
+
+      toggleAllOffBtn.addEventListener('click', () => {
+        featureToggles.forEach((toggle: DeesInputToggle) => {
+          if (!toggle.disabled && !toggle.required) {
+            toggle.value = false;
+          }
+        });
+      });
+    }
+  }}>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+
+        dees-panel {
+          margin-bottom: 24px;
+        }
+
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
+
+        .toggle-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        .horizontal-toggles {
+          display: flex;
+          gap: 32px;
+          flex-wrap: wrap;
+        }
+
+        .interactive-section {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 8px;
+          padding: 16px;
+          margin-top: 16px;
+        }
+
+        .output-text {
+          font-family: monospace;
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
+          padding: 8px;
+          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+          border-radius: 4px;
+          min-height: 24px;
+        }
+
+        .settings-section {
+          background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          border-radius: 8px;
+          padding: 20px;
+        }
+
+        .button-group {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+
+        .feature-toggles {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+          padding: 16px;
+        }
+
+        .section-title {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 16px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
+
+        .drag-hint {
+          font-size: 12px;
+          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+          margin-top: 8px;
+          font-style: italic;
+        }
+      `}
+    </style>
+
+    <div class="demo-container">
+      <dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Enable feature'}
+            .value=${false}
+            .key=${'basic'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Active toggle'}
+            .value=${true}
+            .key=${'active'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'With description'}
+            .value=${false}
+            .description=${'This toggle has additional helper text explaining its purpose'}
+            .key=${'withDesc'}
+          ></dees-input-toggle>
+        </div>
+        <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
+      </dees-panel>
+
+      <dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Default (off)'}
+            .value=${false}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Enabled (on)'}
+            .value=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Disabled (off)'}
+            .value=${false}
+            .disabled=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Disabled (on)'}
+            .value=${true}
+            .disabled=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Required (always on)'}
+            .value=${true}
+            .required=${true}
+            .description=${'This toggle cannot be turned off'}
+          ></dees-input-toggle>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
+        <div class="horizontal-toggles">
+          <dees-input-toggle
+            .label=${'WiFi'}
+            .value=${true}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Bluetooth'}
+            .value=${false}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'GPS'}
+            .value=${true}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'NFC'}
+            .value=${false}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
+        <div class="settings-section">
+          <h4 class="section-title">Notification Settings</h4>
+
+          <div class="toggle-group">
+            <dees-input-toggle
+              .label=${'Push notifications'}
+              .value=${true}
+              .description=${'Receive push notifications on your device'}
+              .key=${'push'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Email notifications'}
+              .value=${true}
+              .description=${'Get important updates via email'}
+              .key=${'email'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Sound'}
+              .value=${false}
+              .description=${'Play a sound for notifications'}
+              .key=${'sound'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Vibration'}
+              .value=${true}
+              .description=${'Vibrate for notifications'}
+              .key=${'vibration'}
+            ></dees-input-toggle>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Feature Toggles'} .subtitle=${'Batch operations on multiple toggles'}>
+        <div class="button-group">
+          <dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
+          <dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
+        </div>
+
+        <div class="feature-toggles">
+          <div class="toggle-group">
+            <dees-input-toggle
+              .label=${'Dark Mode'}
+              .value=${true}
+              .key=${'darkMode'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Auto-save'}
+              .value=${true}
+              .key=${'autoSave'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Spell check'}
+              .value=${false}
+              .key=${'spellCheck'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Developer mode'}
+              .value=${false}
+              .key=${'devMode'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Beta features'}
+              .value=${false}
+              .key=${'beta'}
+            ></dees-input-toggle>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Airplane mode'}
+            .value=${false}
+            @newValue=${(event: CustomEvent) => {
+              const output = document.querySelector('#airplane-output');
+              if (output) {
+                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
+              }
+            }}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Do not disturb'}
+            .value=${false}
+            @newValue=${(event: CustomEvent) => {
+              const output = document.querySelector('#dnd-output');
+              if (output) {
+                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
+              }
+            }}
+          ></dees-input-toggle>
+        </div>
+
+        <div class="interactive-section">
+          <div id="airplane-output" class="output-text">Airplane mode: OFF</div>
+          <div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;
--- a/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts
+++ b/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts
@@ -0,0 +1,372 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { demoFunc } from './dees-input-toggle.demo.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-toggle': DeesInputToggle;
+  }
+}
+
+@customElement('dees-input-toggle')
+export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
+  // STATIC
+  public static demo = demoFunc;
+  public static demoGroup = 'Input';
+
+  // INSTANCE
+
+  @property({ type: Boolean, reflect: true })
+  accessor value: boolean = false;
+
+  /**
+   * Knob position tracking (0 = off, maxTravel = on)
+   */
+  private currentX = 0;
+
+  /**
+   * Drag state
+   */
+  private isDragging = false;
+  private hasDragged = false;
+  private startX = 0;
+
+  // Toggle dimensions
+  private readonly trackWidth = 36;
+  private readonly trackHeight = 20;
+  private readonly knobSize = 14;
+  private readonly padding = 2;
+  private readonly maxTravel = 16; // trackWidth - knobSize - (padding * 2) - border
+
+  constructor() {
+    super();
+    this.labelPosition = 'right'; // Toggle defaults to label on the right
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        position: relative;
+        cursor: default;
+        font-family: ${cssGeistFontFamily};
+      }
+
+      .maincontainer {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: 8px;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+      }
+
+      .toggle-track {
+        position: relative;
+        flex-shrink: 0;
+        height: 20px;
+        width: 36px;
+        border-radius: 10px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        overflow: hidden;
+        transition: all 0.15s ease;
+        margin-top: 1px;
+      }
+
+      .maincontainer:hover .toggle-track {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      }
+
+      :host([value]) .toggle-track {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      }
+
+      .toggle-track:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+      }
+
+      .toggle-knob {
+        position: absolute;
+        top: 2px;
+        width: 14px;
+        height: 14px;
+        border-radius: 7px;
+        background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        transition: left 0.15s ease, background 0.15s ease;
+        touch-action: none;
+      }
+
+      .toggle-knob.dragging {
+        transition: background 0.15s ease;
+      }
+
+      :host([value]) .toggle-knob {
+        background: white;
+      }
+
+      /* Disabled state */
+      .maincontainer.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      .toggle-track.disabled {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      /* Required state (locked on) */
+      :host([required][value]) .toggle-track {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
+        cursor: not-allowed;
+      }
+
+      :host([required][value]) .toggle-knob {
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 70%)')};
+      }
+
+      /* Label */
+      .label-container {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+      }
+
+      .toggle-label {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        transition: color 0.15s ease;
+        letter-spacing: -0.01em;
+      }
+
+      .maincontainer:hover .toggle-label {
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .maincontainer.disabled:hover .toggle-label {
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+      }
+
+      /* Description */
+      .description-text {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        line-height: 1.5;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.handleClick}">
+          <div
+            class="toggle-track ${this.disabled ? 'disabled' : ''}"
+            tabindex="${this.disabled ? '-1' : '0'}"
+            @keydown="${this.handleKeydown}"
+          >
+            <div
+              class="toggle-knob"
+              style="left: ${this.padding + this.currentX}px;"
+              @pointerdown="${this.onPointerDown}"
+              @pointermove="${this.onPointerMove}"
+              @pointerup="${this.onPointerUp}"
+              @pointercancel="${this.onPointerUp}"
+            ></div>
+          </div>
+          <div class="label-container">
+            ${this.label ? html`<div class="toggle-label">${this.label}</div>` : ''}
+            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<PropertyKey, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    // Initialize knob position based on initial value
+    if (this.required && !this.value) {
+      this.value = true;
+    }
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+  }
+
+  /**
+   * Click handler - toggles the value
+   */
+  private async handleClick(event: MouseEvent) {
+    if (this.isDragging || this.hasDragged) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (this.disabled) {
+      return;
+    }
+
+    if (this.required) {
+      // Bounce animation for required toggles
+      this.currentX = this.maxTravel;
+      this.requestUpdate();
+      await new Promise((r) => setTimeout(r, 10));
+      this.currentX = this.maxTravel - 3;
+      this.requestUpdate();
+      await domtools.plugins.smartdelay.delayFor(150);
+      this.currentX = this.maxTravel;
+      this.requestUpdate();
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    this.value = !this.value;
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+
+    domtools.plugins.smartdelay.delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * Pointer down - start dragging
+   */
+  private onPointerDown(event: PointerEvent) {
+    if (this.required || this.disabled) {
+      return;
+    }
+
+    this.isDragging = true;
+    this.startX = event.clientX - this.currentX;
+    (event.target as HTMLElement).setPointerCapture(event.pointerId);
+  }
+
+  /**
+   * Pointer move - track drag position
+   */
+  private onPointerMove(event: PointerEvent) {
+    if (!this.isDragging) return;
+    const newX = event.clientX - this.startX;
+    this.hasDragged = true;
+
+    const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
+    if (toggleKnob) {
+      toggleKnob.classList.add('dragging');
+    }
+
+    this.currentX = Math.max(0, Math.min(newX, this.maxTravel));
+    this.requestUpdate();
+  }
+
+  /**
+   * Pointer up - complete drag and snap to nearest side
+   */
+  private onPointerUp(event: PointerEvent) {
+    if (!this.isDragging) return;
+    (event.target as HTMLElement).releasePointerCapture(event.pointerId);
+    this.isDragging = false;
+
+    if (!this.hasDragged) {
+      return;
+    }
+
+    const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
+    if (toggleKnob) {
+      toggleKnob.classList.remove('dragging');
+    }
+
+    // Snap to nearest side based on midpoint
+    const midpoint = this.maxTravel / 2;
+    this.value = this.currentX > midpoint;
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+
+    domtools.plugins.smartdelay.delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * Sync knob position when value is changed externally
+   */
+  updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('value') &&
+      !this.isDragging &&
+      !this.hasDragged
+    ) {
+      this.currentX = this.value ? this.maxTravel : 0;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Keyboard support
+   */
+  private handleKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.handleClick(event as unknown as MouseEvent);
+    }
+  }
+
+  // DeesInputBase interface implementation
+  public getValue(): boolean {
+    return this.value;
+  }
+
+  public setValue(valueArg: boolean): void {
+    this.value = valueArg;
+  }
+
+  public focus(): void {
+    const track = this.shadowRoot?.querySelector('.toggle-track');
+    if (track) {
+      (track as HTMLElement).focus();
+    }
+  }
+}
--- a/ts_web/elements/00group-input/dees-input-toggle/index.ts
+++ b/ts_web/elements/00group-input/dees-input-toggle/index.ts
@@ -0,0 +1 @@
+export * from './dees-input-toggle.js';
--- 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/index.ts
+++ b/ts_web/elements/00group-input/index.ts
@@ -15,6 +15,7 @@ export * from './dees-input-richtext/index.js';
 export * from './dees-input-searchselect/index.js';
 export * from './dees-input-tags/index.js';
 export * from './dees-input-text/index.js';
+export * from './dees-input-toggle/index.js';
 export * from './dees-input-typelist/index.js';
 export * from './dees-input-wysiwyg.js';
 export * from './profilepicture/dees-input-profilepicture.js';
--- 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 })
--- a/ts_web/elements/dees-statsgrid/dees-statsgrid.ts
+++ b/ts_web/elements/dees-statsgrid/dees-statsgrid.ts
@@ -29,23 +29,30 @@ export interface IStatsTile {
  title: string;
  value: number | string;
  unit?: string;
-  type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text';
-  
+  type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text' | 'multiPercentage';
+
  // For gauge type
  gaugeOptions?: {
    min: number;
    max: number;
    thresholds?: Array<{value: number; color: string}>;
  };
-  
+
  // For trend type
  trendData?: number[];
-  
+
+  // For multiPercentage type
+  percentages?: Array<{
+    label: string;
+    value: number;
+    color?: string;
+  }>;
+
  // Visual customization
  color?: string;
  icon?: string;
  description?: string;
-  
+
  // Tile-specific actions
  actions?: plugins.tsclass.website.IMenuItem[];
 }
@@ -88,16 +95,16 @@ export class DeesStatsGrid extends DeesElement {

      /* CSS Variables for consistent spacing and sizing */
      :host {
-        --grid-gap: 16px;
-        --tile-padding: 24px;
-        --header-spacing: 16px;
-        --content-min-height: 48px;
-        --value-font-size: 30px;
-        --unit-font-size: 16px;
-        --label-font-size: 13px;
-        --title-font-size: 14px;
-        --description-spacing: 12px;
-        --border-radius: 8px;
+        --grid-gap: 12px;
+        --tile-padding: 16px;
+        --header-spacing: 12px;
+        --content-min-height: 40px;
+        --value-font-size: 26px;
+        --unit-font-size: 14px;
+        --label-font-size: 12px;
+        --title-font-size: 13px;
+        --description-spacing: 8px;
+        --border-radius: 6px;
        --transition-duration: 0.15s;
      }

@@ -136,7 +143,7 @@ export class DeesStatsGrid extends DeesElement {
      /* Tile Base Styles */
      .stats-tile {
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 11.8%)')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
        border-radius: var(--border-radius);
        padding: var(--tile-padding);
        transition: all var(--transition-duration) ease;
@@ -148,8 +155,8 @@ export class DeesStatsGrid extends DeesElement {
      }

      .stats-tile:hover {
-        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 10.2%)')};
-        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 16.8%)')};
+        background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')};
+        border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
      }

      .stats-tile.clickable {
@@ -158,7 +165,7 @@ export class DeesStatsGrid extends DeesElement {

      .stats-tile.clickable:hover {
        transform: translateY(-1px);
-        box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.2)')};
+        box-shadow: 0 2px 6px ${cssManager.bdTheme('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.15)')};
      }

      /* Tile Header */
@@ -191,7 +198,6 @@ export class DeesStatsGrid extends DeesElement {
        min-height: var(--content-min-height);
        display: flex;
        flex-direction: column;
-        justify-content: center;
        flex: 1;
      }

@@ -230,10 +236,10 @@ export class DeesStatsGrid extends DeesElement {
      }

      .gauge-container {
-        width: 140px;
-        height: 80px;
+        width: 120px;
+        height: 70px;
        position: relative;
-        margin-top: -10px;
+        margin-top: -8px;
      }

      .gauge-svg {
@@ -243,13 +249,13 @@ export class DeesStatsGrid extends DeesElement {

      .gauge-background {
        fill: none;
-        stroke: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
-        stroke-width: 8;
+        stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        stroke-width: 6;
      }

      .gauge-fill {
        fill: none;
-        stroke-width: 8;
+        stroke-width: 6;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
@@ -274,6 +280,9 @@ export class DeesStatsGrid extends DeesElement {
      .percentage-wrapper {
        width: 100%;
        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
      }

      .percentage-value {
@@ -287,17 +296,74 @@ export class DeesStatsGrid extends DeesElement {

      .percentage-bar {
        width: 100%;
-        height: 8px;
-        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
-        border-radius: 4px;
+        height: 6px;
+        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        border-radius: 3px;
        overflow: hidden;
+        margin-top: auto;
      }

      .percentage-fill {
        height: 100%;
-        background: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-        border-radius: 4px;
+        border-radius: 3px;
+      }
+
+      /* Multi Percentage Styles */
+      .multi-percentage-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+
+      .multi-percentage-items {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-top: auto;
+      }
+
+      .multi-percentage-item {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .multi-percentage-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+
+      .multi-percentage-label {
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .multi-percentage-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .multi-percentage-bar {
+        width: 100%;
+        height: 4px;
+        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        border-radius: 2px;
+        overflow: hidden;
+      }
+
+      .multi-percentage-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 2px;
      }

      /* Trend Styles */
@@ -306,6 +372,7 @@ export class DeesStatsGrid extends DeesElement {
        display: flex;
        flex-direction: column;
        gap: 8px;
+        flex: 1;
      }

      .trend-header {
@@ -339,8 +406,9 @@ export class DeesStatsGrid extends DeesElement {

      .trend-graph {
        width: 100%;
-        height: 32px;
+        height: 28px;
        position: relative;
+        margin-top: auto;
      }

      .trend-svg {
@@ -351,14 +419,14 @@ export class DeesStatsGrid extends DeesElement {

      .trend-line {
        fill: none;
-        stroke: ${cssManager.bdTheme('hsl(215.4 16.3% 66.9%)', 'hsl(215 20.2% 55.1%)')};
-        stroke-width: 2;
+        stroke: ${cssManager.bdTheme('#999999', '#666666')};
+        stroke-width: 1.5;
        stroke-linejoin: round;
        stroke-linecap: round;
      }

      .trend-area {
-        fill: ${cssManager.bdTheme('hsl(215.4 16.3% 66.9% / 0.1)', 'hsl(215 20.2% 55.1% / 0.08)')};
+        fill: ${cssManager.bdTheme('rgba(150, 150, 150, 0.08)', 'rgba(100, 100, 100, 0.08)')};
      }

      /* Text Value Styles */
@@ -464,6 +532,9 @@ export class DeesStatsGrid extends DeesElement {
      case 'trend':
        return this.renderTrend(tile);

+      case 'multiPercentage':
+        return this.renderMultiPercentage(tile);
+
      case 'text':
        return html`
          <div class="text-value" style="${tile.color ? `color: ${tile.color}` : ''}">
@@ -480,13 +551,13 @@ export class DeesStatsGrid extends DeesElement {
    const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
    const options = tile.gaugeOptions || { min: 0, max: 100 };
    const percentage = ((value - options.min) / (options.max - options.min)) * 100;
-    
+
    // SVG dimensions and calculations
-    const width = 140;
-    const height = 80;
-    const strokeWidth = 8;
+    const width = 120;
+    const height = 70;
+    const strokeWidth = 6;
    const padding = strokeWidth / 2 + 2;
-    const radius = 48;
+    const radius = 40;
    const centerX = width / 2;
    const centerY = height - padding;
    
@@ -595,6 +666,39 @@ export class DeesStatsGrid extends DeesElement {
    `;
  }

+  private renderMultiPercentage(tile: IStatsTile): TemplateResult {
+    if (!tile.percentages || tile.percentages.length === 0) {
+      return html`<div class="tile-value">${tile.value}</div>`;
+    }
+
+    // Limit to 3 percentages
+    const items = tile.percentages.slice(0, 3);
+
+    return html`
+      <div class="multi-percentage-wrapper">
+        <div class="multi-percentage-items">
+          ${items.map(item => {
+            const percentage = Math.min(100, Math.max(0, item.value));
+            return html`
+              <div class="multi-percentage-item">
+                <div class="multi-percentage-header">
+                  <span class="multi-percentage-label">${item.label}</span>
+                  <span class="multi-percentage-value">${percentage}%</span>
+                </div>
+                <div class="multi-percentage-bar">
+                  <div
+                    class="multi-percentage-fill"
+                    style="width: ${percentage}%; ${item.color ? `background: ${item.color}` : ''}"
+                  ></div>
+                </div>
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
  private async handleGridAction(action: plugins.tsclass.website.IMenuItem) {
    if (action.action) {
      await action.action();
--- a/ts_web/elements/interfaces/appconfig.ts
+++ b/ts_web/elements/interfaces/appconfig.ts
@@ -4,6 +4,104 @@ import type { IMenuItem } from './tab.js';
 import type { IMenuGroup } from './menugroup.js';
 import type { ISecondaryMenuGroup, ISecondaryMenuItem } from './secondarymenu.js';

+// ==========================================
+// BOTTOM BAR INTERFACES
+// ==========================================
+
+/**
+ * Bottom bar widget status for styling
+ */
+export type TBottomBarWidgetStatus = 'idle' | 'active' | 'success' | 'warning' | 'error';
+
+/**
+ * Generic status widget for the bottom bar
+ */
+export interface IBottomBarWidget {
+  /** Unique identifier for the widget */
+  id: string;
+  /** Icon to display (lucide icon name) */
+  iconName?: string;
+  /** Text label to display */
+  label?: string;
+  /** Status affects styling (colors) */
+  status?: TBottomBarWidgetStatus;
+  /** Tooltip text */
+  tooltip?: string;
+  /** Whether the widget shows a loading spinner */
+  loading?: boolean;
+  /** Click handler for the widget */
+  onClick?: () => void;
+  /** Optional context menu items on right-click */
+  contextMenuItems?: IBottomBarContextMenuItem[];
+  /** Position: 'left' (default) or 'right' */
+  position?: 'left' | 'right';
+  /** Order within position group (lower = earlier) */
+  order?: number;
+}
+
+/**
+ * Context menu item for bottom bar widgets
+ */
+export interface IBottomBarContextMenuItem {
+  name: string;
+  iconName?: string;
+  action: () => void | Promise<void>;
+  disabled?: boolean;
+  divider?: boolean;
+}
+
+/**
+ * Bottom bar action (quick action button)
+ */
+export interface IBottomBarAction {
+  /** Unique identifier */
+  id: string;
+  /** Icon to display */
+  iconName: string;
+  /** Tooltip */
+  tooltip?: string;
+  /** Click handler */
+  onClick: () => void | Promise<void>;
+  /** Whether action is disabled */
+  disabled?: boolean;
+  /** Position: 'left' or 'right' (default) */
+  position?: 'left' | 'right';
+}
+
+/**
+ * Bottom bar configuration
+ */
+export interface IBottomBarConfig {
+  /** Whether bottom bar is visible */
+  visible?: boolean;
+  /** Initial widgets */
+  widgets?: IBottomBarWidget[];
+  /** Initial actions */
+  actions?: IBottomBarAction[];
+}
+
+/**
+ * Bottom bar programmatic API
+ */
+export interface IBottomBarAPI {
+  /** Add a widget */
+  addWidget: (widget: IBottomBarWidget) => void;
+  /** Update an existing widget by ID */
+  updateWidget: (id: string, update: Partial<IBottomBarWidget>) => void;
+  /** Remove a widget by ID */
+  removeWidget: (id: string) => void;
+  /** Get a widget by ID */
+  getWidget: (id: string) => IBottomBarWidget | undefined;
+  /** Clear all widgets */
+  clearWidgets: () => void;
+  /** Add an action button */
+  addAction: (action: IBottomBarAction) => void;
+  /** Remove an action by ID */
+  removeAction: (id: string) => void;
+  /** Clear all actions */
+  clearActions: () => void;
+}
+
 // Forward declaration for circular reference
 export type TDeesAppui = HTMLElement & {
  setAppBarMenus: (menus: IAppBarMenuItem[]) => void;
@@ -42,6 +140,10 @@ export type TDeesAppui = HTMLElement & {
  getActivityLogVisible: () => boolean;
  navigateToView: (viewId: string, params?: Record<string, string>) => Promise<boolean>;
  getCurrentView: () => IViewDefinition | undefined;
+  // Bottom bar
+  bottomBar: IBottomBarAPI;
+  setBottomBarVisible: (visible: boolean) => void;
+  getBottomBarVisible: () => boolean;
 };

 /**
@@ -233,6 +335,9 @@ export interface IAppConfig {
  /** Activity log configuration */
  activityLog?: IActivityLogConfig;

+  /** Bottom bar configuration */
+  bottomBar?: IBottomBarConfig;
+
  /** Event callbacks */
  onViewChange?: (viewId: string, view: IViewDefinition) => void;
  onSearch?: (query: string) => void;
Author	SHA1	Message	Date
Juergen Kunz	74c39482de	v3.34.0 Some checks failed Default (tags) / security (push) Failing after 18s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-01-07 18:42:00 +00:00
Juergen Kunz	51611d76dd	feat(dees-input-toggle): Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm	2026-01-07 18:42:00 +00:00
Juergen Kunz	496084f870	v3.33.0 Some checks failed Default (tags) / security (push) Failing after 17s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-01-06 00:45:10 +00:00
Juergen Kunz	c7bff04ae5	feat(dees-statsgrid): add multiPercentage tile type to stats grid	2026-01-06 00:45:10 +00:00
Juergen Kunz	e71efd409b	update	2026-01-05 12:07:05 +00:00
Juergen Kunz	43db777f2c	v3.32.0 Some checks failed Default (tags) / security (push) Failing after 12s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-01-04 17:09:18 +00:00
Juergen Kunz	9bd1734d09	feat(demo): add demoGroup metadata to components and update related dependencies	2026-01-04 17:09:18 +00:00
Juergen Kunz	aafdb4af72	v3.31.0 Some checks failed Default (tags) / security (push) Failing after 15s Details Default (tags) / test (push) Failing after 14s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-01-04 10:16:50 +00:00
Juergen Kunz	67a24ddf26	feat(dees-input-list): enhance drag-and-drop reordering for dees-input-list and migrate tests to chromium runner	2026-01-04 10:16:50 +00:00
Juergen Kunz	2a928886b9	v3.30.1 Some checks failed Default (tags) / security (push) Failing after 15s Details Default (tags) / test (push) Failing after 15s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-01-04 09:21:02 +00:00
Juergen Kunz	4d192654df	fix(dees-statsgrid): refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance	2026-01-04 09:21:02 +00:00
Juergen Kunz	a634c2e237	v3.30.0 Some checks failed Default (tags) / security (push) Failing after 15s Details Default (tags) / test (push) Failing after 16s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-01-03 12:40:11 +00:00
Juergen Kunz	9b0b448cb1	feat(appui): add dees-appui-bottombar component with config, programmatic API, demo and docs	2026-01-03 12:40:11 +00:00