fix(core): update

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.0.55",
     "@design.estate/dees-element": "^2.0.33",
-    "@design.estate/dees-wcctools": "^1.0.85",
+    "@design.estate/dees-wcctools": "^1.0.87",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
@@ -27,17 +27,17 @@
     "@push.rocks/smartstring": "^4.0.13",
     "@tsclass/tsclass": "^4.0.46",
     "highlight.js": "11.9.0",
-    "ibantools": "^4.3.8",
+    "ibantools": "^4.3.9",
     "pdfjs-dist": "^4.0.379"
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^2.1.72",
-    "@git.zone/tsbundle": "^2.0.14",
+    "@git.zone/tsbundle": "^2.0.15",
     "@git.zone/tstest": "^1.0.77",
     "@git.zone/tswatch": "^2.0.21",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.10.8"
+    "@types/node": "^20.11.5"
   },
   "files": [
     "ts/**/*",

pnpm-lock.yaml

@@ -12,8 +12,8 @@ dependencies:
     specifier: ^2.0.33
     version: 2.0.33
   '@design.estate/dees-wcctools':
-    specifier: ^1.0.85
+    specifier: ^1.0.87
-    version: 1.0.85
+    version: 1.0.87
   '@fortawesome/fontawesome-svg-core':
     specifier: ^6.5.1
     version: 6.5.1
@@ -42,8 +42,8 @@ dependencies:
     specifier: 11.9.0
     version: 11.9.0
   ibantools:
-    specifier: ^4.3.8
+    specifier: ^4.3.9
-    version: 4.3.8
+    version: 4.3.9
   pdfjs-dist:
     specifier: ^4.0.379
     version: 4.0.379
@@ -53,14 +53,14 @@ devDependencies:
     specifier: ^2.1.72
     version: 2.1.72
   '@git.zone/tsbundle':
-    specifier: ^2.0.14
+    specifier: ^2.0.15
-    version: 2.0.14
+    version: 2.0.15
   '@git.zone/tstest':
     specifier: ^1.0.77
-    version: 1.0.84(@types/node@20.10.8)(sinon@17.0.1)
+    version: 1.0.84(@types/node@20.11.5)(sinon@17.0.1)
   '@git.zone/tswatch':
     specifier: ^2.0.21
-    version: 2.0.21(@types/node@20.10.8)
+    version: 2.0.21(@types/node@20.11.5)
   '@push.rocks/projectinfo':
     specifier: ^5.0.2
     version: 5.0.2
@@ -68,8 +68,8 @@ devDependencies:
     specifier: ^5.0.15
     version: 5.0.15(sinon@17.0.1)
   '@types/node':
-    specifier: ^20.10.8
+    specifier: ^20.11.5
-    version: 20.10.8
+    version: 20.11.5
 
 packages:
 
@@ -268,13 +268,13 @@ packages:
       lit: 3.1.0
     dev: false
 
-  /@design.estate/dees-wcctools@1.0.85:
+  /@design.estate/dees-wcctools@1.0.87:
-    resolution: {integrity: sha512-/EfR63jkUWjSZiR9ShRYc3Xcv22uPsg91bqCfhEUvD0avI7FHzpz9+AvxnnE9HuuEKskGgpo5NA+WeyOU8a2KQ==}
+    resolution: {integrity: sha512-bZh7brZDRriN4RbLjMriSh588TryIVZbB5gKDuf+YdZDPjm0AAlCp/nOiyvho3ITA8SERbgIIiqWVf0LbgFyoQ==}
     dependencies:
       '@design.estate/dees-domtools': 2.0.55
       '@design.estate/dees-element': 2.0.33
       '@push.rocks/smartdelay': 3.0.5
-      lit: 3.1.0
+      lit: 3.1.1
     dev: false
 
   /@esbuild/aix-ppc64@0.19.11:
@@ -536,8 +536,8 @@ packages:
       typescript: 5.3.3
     dev: true
 
-  /@git.zone/tsbundle@2.0.14:
+  /@git.zone/tsbundle@2.0.15:
-    resolution: {integrity: sha512-4J5QiujPEPa+OYzN9TI9il6FLcJ7MGYWL8NzEhSerZ2jFm/iPjO75/s9x44VjszDmjo3xe/TRnRoHWFELVJQOA==}
+    resolution: {integrity: sha512-ZrPkScaBQ7hHx6BUchRFfPB9tvb7RlNXwjk9qjkp6AcBcF38JgLcu/UDKDqRsuaFJpkK9oclyhA5bDA7SjXWZg==}
     hasBin: true
     dependencies:
       '@push.rocks/early': 4.0.4
@@ -557,13 +557,13 @@ packages:
       - supports-color
     dev: true
 
-  /@git.zone/tsrun@1.2.46(@types/node@20.10.8):
+  /@git.zone/tsrun@1.2.46(@types/node@20.11.5):
     resolution: {integrity: sha512-8miFVBle9Mnjx+uPGI/P+EuWcIOXWjBAkdjN5IYbdp5Ytt4xQODCLh4JSnC9h56UeU1nUxCAxZeJs2e9TXrivA==}
     hasBin: true
     dependencies:
       '@push.rocks/smartfile': 10.0.41
       '@push.rocks/smartshell': 3.0.3
-      ts-node: 10.9.1(@types/node@20.10.8)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@20.11.5)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@swc/core'
@@ -571,13 +571,13 @@ packages:
       - '@types/node'
     dev: true
 
-  /@git.zone/tstest@1.0.84(@types/node@20.10.8)(sinon@17.0.1):
+  /@git.zone/tstest@1.0.84(@types/node@20.11.5)(sinon@17.0.1):
     resolution: {integrity: sha512-HQQvloUWGj4fPxOuhO7Dfxw83szRlIMNJpaJtIgDUWiMm6vF9ygvcMTgpUUkEmWjxQ/t/SkXvHqHjtfp0l4l2g==}
     hasBin: true
     dependencies:
       '@api.global/typedserver': 3.0.9
-      '@git.zone/tsbundle': 2.0.14
+      '@git.zone/tsbundle': 2.0.15
-      '@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
+      '@git.zone/tsrun': 1.2.46(@types/node@20.11.5)
       '@push.rocks/consolecolor': 2.0.1
       '@push.rocks/smartbrowser': 2.0.6
       '@push.rocks/smartdelay': 3.0.5
@@ -600,13 +600,13 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@git.zone/tswatch@2.0.21(@types/node@20.10.8):
+  /@git.zone/tswatch@2.0.21(@types/node@20.11.5):
     resolution: {integrity: sha512-7Q0I0dIZD+ApR4MWeykvf+cYk+I6t1Re+jhAj8xrLqZBetvWv9C315jG6Brx96DEYz4th6EvyVUONQkLndBI4w==}
     hasBin: true
     dependencies:
       '@api.global/typedserver': 3.0.19
-      '@git.zone/tsbundle': 2.0.14
+      '@git.zone/tsbundle': 2.0.15
-      '@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
+      '@git.zone/tsrun': 1.2.46(@types/node@20.11.5)
       '@push.rocks/early': 4.0.4
       '@push.rocks/lik': 6.0.12
       '@push.rocks/smartchok': 1.0.23
@@ -663,6 +663,12 @@ packages:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.1.2
 
+  /@lit/reactive-element@2.0.3:
+    resolution: {integrity: sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.2
+    dev: false
+
   /@mapbox/node-pre-gyp@1.0.11:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
@@ -1606,7 +1612,7 @@ packages:
   /@types/accepts@1.3.7:
     resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/babel__code-frame@7.0.6:
@@ -1617,7 +1623,7 @@ packages:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/buffer-json@2.0.3:
@@ -1643,21 +1649,21 @@ packages:
   /@types/clean-css@4.2.11:
     resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
       source-map: 0.6.1
     dev: true
 
   /@types/co-body@6.1.3:
     resolution: {integrity: sha512-UhuhrQ5hclX6UJctv5m4Rfp52AfG9o9+d9/HwjxhVB5NjXxr5t9oKgJxN8xRHgr35oo8meUEHUPFWiKg6y71aA==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
       '@types/qs': 6.9.10
     dev: true
 
   /@types/connect@3.4.38:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/content-disposition@0.5.8:
@@ -1678,13 +1684,13 @@ packages:
       '@types/connect': 3.4.38
       '@types/express': 4.17.21
       '@types/keygrip': 1.0.6
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/cors@2.8.17:
     resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/debounce@1.2.4:
@@ -1698,7 +1704,7 @@ packages:
   /@types/express-serve-static-core@4.17.41:
     resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
       '@types/qs': 6.9.10
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -1716,21 +1722,21 @@ packages:
   /@types/from2@2.3.5:
     resolution: {integrity: sha512-giavnjf3kNlJnE+HpZA1CQ3UKHxgehzsTuIMGda8pGMbOiLYGVNADEskey44OZcADHm/HOoBany8IV+0x28XFw==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/fs-extra@11.0.4:
     resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/glob@8.1.0:
     resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/html-minifier@4.0.5:
@@ -1780,7 +1786,7 @@ packages:
   /@types/jsonfile@6.1.4:
     resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/keygrip@1.0.6:
@@ -1803,7 +1809,7 @@ packages:
       '@types/http-errors': 2.0.4
       '@types/keygrip': 1.0.6
       '@types/koa-compose': 3.2.8
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/mime-types@2.1.4:
@@ -1829,8 +1835,8 @@ packages:
     resolution: {integrity: sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==}
     dev: true
 
-  /@types/node@20.10.8:
+  /@types/node@20.11.5:
-    resolution: {integrity: sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==}
+    resolution: {integrity: sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==}
     dependencies:
       undici-types: 5.26.5
 
@@ -1861,7 +1867,7 @@ packages:
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/serve-static@1.15.5:
@@ -1869,7 +1875,7 @@ packages:
     dependencies:
       '@types/http-errors': 2.0.4
       '@types/mime': 3.0.4
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/shortid@0.0.29:
@@ -1899,7 +1905,7 @@ packages:
   /@types/through2@2.0.41:
     resolution: {integrity: sha512-ryQ0tidWkb1O1JuYvWKyMLYEtOWDqF5mHerJzKz/gQpoAaJq2l/dsMPBF0B5BNVT34rbARYJ5/tsZwLfUi2kwQ==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
 
   /@types/trusted-types@2.0.7:
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
@@ -1929,20 +1935,20 @@ packages:
   /@types/ws@7.4.7:
     resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/ws@8.5.10:
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
 
   /@types/yauzl@2.10.3:
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
     requiresBuild: true
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
     dev: true
     optional: true
 
@@ -2121,6 +2127,7 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
+    requiresBuild: true
 
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
@@ -2914,6 +2921,7 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    requiresBuild: true
 
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@@ -2955,7 +2963,7 @@ packages:
     dependencies:
       '@types/cookie': 0.4.1
       '@types/cors': 2.8.17
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
       accepts: 1.3.8
       base64id: 2.0.0
       cookie: 0.4.2
@@ -3661,8 +3669,8 @@ packages:
       ms: 2.1.3
     dev: true
 
-  /ibantools@4.3.8:
+  /ibantools@4.3.9:
-    resolution: {integrity: sha512-YBdswuzvCSn3EyFPKj4aolOaJ8fnQ3m+8bCwTbZJaDg2lMWKlQ4C37PodHCrCh6GmzVPpC7b6H+nKcJTDblu/g==}
+    resolution: {integrity: sha512-PxQuxv1vq1CgOtfBZIMThZBZEi/hFMmPiAzq4QPx2rmbrUVF/p4dFqvk9e9Z+hVXZxUmdW1cgJh21lpt1UYZzg==}
     dev: false
 
   /iconv-lite@0.4.24:
@@ -4114,6 +4122,14 @@ packages:
       '@lit/reactive-element': 2.0.2
       lit-html: 3.1.0
 
+  /lit-element@4.0.3:
+    resolution: {integrity: sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.2
+      '@lit/reactive-element': 2.0.3
+      lit-html: 3.1.1
+    dev: false
+
   /lit-html@1.4.1:
     resolution: {integrity: sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==}
     dev: true
@@ -4123,6 +4139,12 @@ packages:
     dependencies:
       '@types/trusted-types': 2.0.7
 
+  /lit-html@3.1.1:
+    resolution: {integrity: sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==}
+    dependencies:
+      '@types/trusted-types': 2.0.7
+    dev: false
+
   /lit@3.1.0:
     resolution: {integrity: sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==}
     dependencies:
@@ -4130,6 +4152,14 @@ packages:
       lit-element: 4.0.2
       lit-html: 3.1.0
 
+  /lit@3.1.1:
+    resolution: {integrity: sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==}
+    dependencies:
+      '@lit/reactive-element': 2.0.3
+      lit-element: 4.0.3
+      lit-html: 3.1.1
+    dev: false
+
   /locate-path@3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
@@ -5657,7 +5687,7 @@ packages:
     hasBin: true
     dev: true
 
-  /ts-node@10.9.1(@types/node@20.10.8)(typescript@5.1.6):
+  /ts-node@10.9.1(@types/node@20.11.5)(typescript@5.1.6):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -5676,7 +5706,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.10.8
+      '@types/node': 20.11.5
       acorn: 8.11.2
       acorn-walk: 8.3.0
       arg: 4.1.3

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.245',
+  version: '1.0.246',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-contextmenu.ts

@@ -1,5 +1,6 @@
-import { demoFunc } from './dees-contextmenu.demo.js';
+import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
+import { demoFunc } from './dees-contextmenu.demo.js';
 import {
   customElement,
   html,
@@ -110,16 +111,18 @@ export class DeesContextmenu extends DeesElement {
         color: ${cssManager.bdTheme('#222', '#ccc')};
         font-size: 14px;
         width: 200px;
-        border: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        border: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
         min-height: 34px;
         border-radius: 3px;
         background: ${cssManager.bdTheme('#fff', '#222')};
         box-shadow: 0px 1px 4px ${cssManager.bdTheme('#00000020', '#000000')};
         user-select: none;
+        padding: 4px;
       }
 
       .mainbox .menuitem {
-        padding: 8px;
+        padding: 4px 8px;
+        border-radius: 3px;
       }
 
       .mainbox .menuitem dees-icon {
@@ -130,7 +133,7 @@ export class DeesContextmenu extends DeesElement {
       }
 
       .mainbox .menuitem:hover {
-        background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
       }
 
       .mainbox .menuitem:active {

ts_web/elements/dees-dataview-statusobject.ts

@@ -1,3 +1,6 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
 import { demoFunc } from './dees-dataview-statusobject.demo.js';
 import {
   DeesElement,
@@ -34,6 +37,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         box-shadow: 0px 1px 3px #00000030;
         min-height: 48px;
         color: ${cssManager.bdTheme('#000', '#fff')};
+        cursor: default;
       }
 
       .heading {
@@ -69,7 +73,20 @@ export class DeesDataviewStatusobject extends DeesElement {
         padding: 4px;
         border-radius: 3px;
         margin-right: 16px;
-        color: #ffffff80
+        color: #ffffff80;
+        user-select: none;
+      }
+
+      .copyMain:hover {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        border: 1px solid ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #fff;
+      }
+
+      .copyMain:active {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        border: 1px solid ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        color: #fff;
       }
 
       .statusdot.ok {
@@ -85,11 +102,16 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .detail {
-        minheight: 60px;
+        min-height: 60px;
         align-items: center;
         display: grid;
         grid-template-columns: 40px auto;
         border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
+        transition: all 0.2s;
+      }
+
+      .detail:hover {
+        background: #ffffff05;
       }
 
       .detail .detailsText {

ts_web/elements/dees-form.demo.ts

@@ -35,7 +35,9 @@ export const demoFunc = () => html`
           { option: 'option 2', key: 'option2' },
           { option: 'option 3', key: 'option3' },
         ]}></dees-input-multiselect>
-      <dees-input-typelist></dees-input-typelist>
+      <dees-input-typelist
+        .label=${'a type list'}
+      ></dees-input-typelist>
       <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
       <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
       <dees-input-text
@@ -50,6 +52,14 @@ export const demoFunc = () => html`
         label="another text"
       ></dees-input-checkbox>
       <dees-input-iban></dees-input-iban>
+      <dees-input-multitoggle
+        .label=${'multi select'}
+        .options=${['option 1', 'option 2', 'option 3']}
+        .selectedOption=${'option 1'}
+      ></dees-input-multitoggle>
+      <dees-input-fileupload
+        .label=${'attachments'}
+      ></dees-input-fileupload>
       <dees-form-submit>Submit</dees-form-submit>
     </dees-form>
   </div>

ts_web/elements/dees-icon.ts

@@ -56,6 +56,7 @@ import {
   faMoneyCheckDollar as faMoneyCheckDollarSolid,
   faMugHot as faMugHotSolid,
   faMinus as faMinusSolid,
+  faPaperclip as faPaperclipSolid,
   faPaste as faPasteSolid,
   faPenToSquare as faPenToSquareSolid,
   faPlus as faPlusSolid,
@@ -101,6 +102,7 @@ export const faIcons = {
   moneyCheckDollar: faMoneyCheckDollarSolid,
   mugHot: faMugHotSolid,
   minus: faMinusSolid,
+  paperclip: faPaperclipSolid,
   paste: faPasteRegular,
   pasteSolid: faPasteSolid,
   penToSquare: faPenToSquareSolid,

ts_web/elements/dees-input-fileupload.ts

@@ -1,3 +1,8 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
+import { DeesContextmenu } from './dees-contextmenu.js';
+
 import {
   customElement,
   DeesElement,
@@ -19,7 +24,8 @@ declare global {
 
 @customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesElement {
-  public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
+  public static demo = () =>
+    html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
 
   // INSTANCE
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@@ -70,6 +76,7 @@ export class DeesInputFileupload extends DeesElement {
         display: grid;
         margin: 10px 0px;
         margin-bottom: 24px;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
       }
 
       .hidden {
@@ -77,30 +84,15 @@ export class DeesInputFileupload extends DeesElement {
       }
 
       .maincontainer {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-        
-      }
-
-      .label {
-        font-size: 14px;
-        margin-bottom: 5px;
-      }
-
-      .uploadButton {
         position: relative;
-        padding: 8px;
-        max-width: 600px;
-        background: ${cssManager.bdTheme('#fafafa', '#333333')};
         border-radius: 3px;
-        text-align: center;
+        padding: 8px;
+        background: ${cssManager.bdTheme('#fafafa', '#222222')};
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+        border-top: 1px solid #ffffff10;
       }
 
-      .uploadButton:hover {
+      .maincontainer::after {
-        color: #fff;
-        background: rgb(3, 155, 229);
-      }
-
-      .uploadButton::after {
         top: 2px;
         right: 2px;
         left: 2px;
@@ -111,28 +103,71 @@ export class DeesInputFileupload extends DeesElement {
         display: block;
         border: 2px dashed rgba(255, 255, 255, 0);
         transition: all 0.2s;
+        pointer-events: none;
+        background: #00000000;
       }
-      .uploadButton.dragOver::after {
+      .maincontainer.dragOver::after {
         transform: scale3d(1, 1, 1);
         border: 2px dashed rgba(255, 255, 255, 0.3);
+        background: #00000080;
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
+      .uploadButton {
+        position: relative;
+        padding: 8px;
+        max-width: 600px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        text-align: center;
+        font-size: 14px;
+        cursor: default;
+      }
+
+      .uploadButton:hover {
+        color: #fff;
+        background: ${unsafeCSS(colors.dark.blue)};
       }
 
       .uploadCandidate {
+        display: grid;
+        grid-template-columns: 48px auto;
+        background: #333;
+        padding: 8px 8px 8px 0px;
+        margin-bottom: 8px;
         text-align: left;
-        border-bottom: 1px dashed #444;
+        border-radius: 3px;
         color: ${cssManager.bdTheme('#666', '#ccc')};
-        padding: 8px;
         font-family: 'Roboto', 'Inter', sans-serif;
-      }
+        cursor: default;
-
+        transition: all 0.2s;
-      .uploadButton:hover .uploadCandidate {
+        border-top: 1px solid #ffffff10;
-        color: ${cssManager.bdTheme('#fff', '#fff')};
-        border-bottom: 1px dashed #fff;
       }
 
       .uploadCandidate:last-child {
         margin-bottom: 8px;
       }
+
+      .uploadCandidate .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+      }
+
+      .uploadCandidate:hover {
+        background: #393939;
+      }
+
+      .uploadCandidate .description {
+        font-size: 14px;
+        border-left: 1px solid #ffffff10;
+        padding-left: 8px;
+      }
     `,
   ];
 
@@ -141,10 +176,32 @@ export class DeesInputFileupload extends DeesElement {
       <div class="hidden">
         <input type="file"></div>
       </div>
-      <div class="maincontainer">
       ${this.label ? html`<div class="label">${this.label}</div>` : null}
-        ${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
+      <div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
-        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
+        ${this.value.map(
+          (fileArg) => html`
+          <div class="uploadCandidate" @contextmenu=${eventArg => {
+            DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+              iconName: 'trash',
+              name: 'Remove',
+              action: async () => {
+                this.value.splice(this.value.indexOf(fileArg), 1);
+                this.requestUpdate();
+              }
+            }]);
+          }}>
+            <div class="icon">
+              <dees-icon .iconFA=${'paperclip'}></dees-icon>
+            </div>
+            <div class="description">
+              <span style="font-weight: 600">${fileArg.name}</span><br />
+              <span style="font-weight: 400">${fileArg.size}</span>
+            </div>
+          </div> `
+        )}
+        <div class="uploadButton" @click=${
+          this.openFileSelector
+        }>
           ${this.buttonText}
         </div>
       </div>
@@ -158,7 +215,6 @@ export class DeesInputFileupload extends DeesElement {
     this.buttonText = 'Upload more files...';
   }
 
-
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
@@ -178,9 +234,8 @@ export class DeesInputFileupload extends DeesElement {
       target.value = '';
     });
 
-
     // lets handle drag and drop
-    const dropArea = this.shadowRoot.querySelector('.uploadButton');
+    const dropArea = this.shadowRoot.querySelector('.maincontainer');
     const handlerFunction = (eventArg: DragEvent) => {
       eventArg.preventDefault();
       switch (eventArg.type) {

ts_web/elements/dees-input-multitoggle.ts

@@ -16,6 +16,11 @@ const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
 export class DeesInputMultitoggle extends DeesElement {
   public static demo = demoFunc;
 
+  @property({
+    type: String,
+  })
+  public label: string;
+
   @property()
   type: 'boolean' | 'multi' | 'single' = 'multi';
 
@@ -40,9 +45,17 @@ export class DeesInputMultitoggle extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
         user-select: none;
+        margin: 8px 0px 24px 0px;
       }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
       .selections {
         position: relative;
         display: flex;
@@ -51,30 +64,37 @@ export class DeesInputMultitoggle extends DeesElement {
         background: #333;
         width: min-content;
         border-radius: 20px;
-        height: 40px;
+        height: 32px;
+        border-top: 1px solid #ffffff10;
       }
 
       .option {
-        color: #CCC;
+        color: #ccc;
         position: relative;
         padding: 0px 16px;
-        line-height: 40px;
+        line-height: 32px;
         cursor: default;
         width: min-content; /* Make the width as per the content */
         white-space: nowrap; /* Prevent text wrapping */
         transition: all 0.1s;
+        font-size: 14px;
+        transform: translateY(-1px);
       }
 
       .option:hover {
         color: #fff;
       }
 
+      .option.selected {
+        color: #fff;
+      }
+
       .indicator {
         opacity: 0;
         position: absolute;
-        height: 32px;
+        height: 24px;
         left: 4px;
-        top: 4px;
+        top: 3px;
         border-radius: 16px;
         background: #0050b9;
         min-width: 36px;
@@ -84,11 +104,16 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="label">MultiSelect</div>
+      ${this.label ? html`<div class="label">${this.label}</div>` : html``}
       <div class="mainbox">
         <div class="selections">
           <div class="indicator"></div>
-          ${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
+          ${this.options.map(
+            (option) =>
+              html`<div class="option ${option === this.selectedOption ? 'selected': ''}" @click=${() => this.handleSelection(option)}>
+                ${option}
+              </div> `
+          )}
         </div>
       </div>
     `;
@@ -108,7 +133,9 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public async setIndicator() {
     const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
-    const option: HTMLDivElement = this.shadowRoot.querySelector(`.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`);
+    const option: HTMLDivElement = this.shadowRoot.querySelector(
+      `.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`
+    );
     if (indicator && option) {
       indicator.style.width = `${option.clientWidth - 8}px`;
       indicator.style.left = `${option.offsetLeft + 4}px`;

ts_web/elements/dees-input-text.ts

@@ -100,14 +100,14 @@ export class DeesInputText extends DeesElement {
 
       .label {
         font-size: 14px;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
       }
 
       input {
-        margin-top: 5px;
+        margin-top: 0px;
         background: ${cssManager.bdTheme('#fafafa', '#222')};
-        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
-        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
         border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
         border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
         padding-left: 10px;

ts_web/elements/dees-input-typelist.ts

@@ -16,6 +16,14 @@ const { demoFunc } = await import('./dees-input-typelist.demo.js');
 export class DeesInputTypelist extends DeesElement {
   public static demo = demoFunc;
 
+
+  // INSTANCE
+
+  @property({
+    type: String,
+  })
+  public label: string;
+
   constructor() {
     super();
   }
@@ -24,11 +32,13 @@ export class DeesInputTypelist extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')}
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin: 8px 0px 24px 0px;
       }
       .label {
         font-size: 14px;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
       }
       .mainbox {
         border-radius: 3px;
@@ -74,7 +84,7 @@ export class DeesInputTypelist extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="label">Type List</div>
+      <div class="label">${this.label}</div>
       <div class="mainbox">
         <div class="tags" @click=${() => {
           this.shadowRoot.querySelector('input').focus();

ts_web/elements/dees-modal.ts

@@ -1,4 +1,6 @@
+import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
+
 import { demoFunc } from './dees-modal.demo.js';
 import {
   customElement,
@@ -123,19 +125,35 @@ export class DeesModal extends DeesElement {
         padding: 16px;
       }
       .modal .bottomButtons {
-        display: grid;
+        display: flex;
+        flex-direction: row;
         border-top: 1px solid #222;
+        justify-content: flex-end;
       }
 
       .modal .bottomButtons .bottomButton {
-        height: 40px;
+        margin: 8px 0px;
-        line-height: 40px;
+        padding: 8px 12px;
+        border-radius: 4px;
+        line-height: 16px;
         text-align: center;
         font-size: 14px;
-        border-right: 1px solid #222;
+        cursor: default;
+        user-select: none;
       }
+
+      .modal .bottomButtons .bottomButton:first-child {
+        margin-left: 8px;
+      }
+      .modal .bottomButtons .bottomButton:last-child {
+        margin-right: 8px;
+      }
+
       .modal .bottomButtons .bottomButton:hover {
-        background: #222;
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+      }
+      .modal .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
       }
       .modal .bottomButtons .bottomButton:last-child {
         border-right: none;

ts_web/elements/dees-stepper.ts

@@ -1,3 +1,6 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+
 import {
   DeesElement,
   customElement,
@@ -150,7 +153,22 @@ export class DeesStepper extends DeesElement {
       }
 
       .step .goBack:hover {
-        background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        background: ${cssManager.bdTheme('#00000012', colors.dark.blue)};
+      }
+
+      .step .goBack:active {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        background: ${cssManager.bdTheme('#00000012', colors.dark.blueActive)};
+      }
+
+      .step .goBack span {
+        transition: all 0.2s;
+        display: inline-block;
+      }
+
+      .step .goBack:hover span {
+        transform: translateX(-2px);
       }
 
       .step .title {
@@ -180,7 +198,7 @@ export class DeesStepper extends DeesElement {
                 : ''}"
             >
               ${this.getIndexOfStep(stepArg) > 0
-                ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
+                ? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
                 : ``}
               <div class="stepCounter">
                 Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of

ts_web/elements/dees-table.ts

@@ -1,3 +1,4 @@
+import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
 import {
@@ -173,6 +174,7 @@ export class DeesTable<T> extends DeesElement {
         border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
         overflow-x: auto;
+        cursor: default;
       }
 
       .header {
@@ -311,6 +313,7 @@ export class DeesTable<T> extends DeesElement {
         line-height: 36px;
         height: 36px;
         display: inline-block;
+        border-radius: 8px;
       }
 
       .action:first-child {
@@ -319,7 +322,15 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .action:hover {
-        background: ${cssManager.bdTheme('#CCC', '#00000030')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+      }
+
+      .action:active {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blueActive)};
+      }
+
+      .action:hover dees-icon {
+        filter: ${cssManager.bdTheme('invert(1) brightness(3)', '')};
       }
 
       .footer {
@@ -344,16 +355,22 @@ export class DeesTable<T> extends DeesElement {
       .footerActions .footerAction {
         padding: 8px 16px;
         display: flex;
+        user-select: none;
       }
 
       .footerActions .footerAction:hover {
-        background: ${cssManager.bdTheme('#CCC', '#111')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #fff;
       }
 
-      .footerActions dees-icon {
+      .footerActions .footerAction dees-icon {
         display: flex;
         margin-right: 8px;
       }
+
+      .footerActions .footerAction:hover dees-icon {
+        
+      }
     `,
   ];