1.0.244

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.240",
+  "version": "1.0.244",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -32,12 +32,12 @@
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^2.1.72",
-    "@git.zone/tsbundle": "^2.0.13",
+    "@git.zone/tsbundle": "^2.0.14",
     "@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.7"
+    "@types/node": "^20.10.8"
   },
   "files": [
     "ts/**/*",

pnpm-lock.yaml

@@ -53,14 +53,14 @@ devDependencies:
     specifier: ^2.1.72
     version: 2.1.72
   '@git.zone/tsbundle':
-    specifier: ^2.0.13
-    version: 2.0.13
+    specifier: ^2.0.14
+    version: 2.0.14
   '@git.zone/tstest':
     specifier: ^1.0.77
-    version: 1.0.84(@types/node@20.10.7)(sinon@17.0.1)
+    version: 1.0.84(@types/node@20.10.8)(sinon@17.0.1)
   '@git.zone/tswatch':
     specifier: ^2.0.21
-    version: 2.0.21(@types/node@20.10.7)
+    version: 2.0.21(@types/node@20.10.8)
   '@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.7
-    version: 20.10.7
+    specifier: ^20.10.8
+    version: 20.10.8
 
 packages:
 
@@ -130,9 +130,7 @@ packages:
       express-force-ssl: 0.3.2
       lit: 3.1.0
     transitivePeerDependencies:
-      - bufferutil
       - supports-color
-      - utf-8-validate
     dev: true
 
   /@api.global/typedserver@3.0.9:
@@ -167,7 +165,9 @@ packages:
       express-force-ssl: 0.3.2
       lit: 3.1.0
     transitivePeerDependencies:
+      - bufferutil
       - supports-color
+      - utf-8-validate
     dev: true
 
   /@api.global/typedsocket@3.0.0:
@@ -536,8 +536,8 @@ packages:
       typescript: 5.3.3
     dev: true
 
-  /@git.zone/tsbundle@2.0.13:
-    resolution: {integrity: sha512-6T2jSGqM6rt00HVuRll/z9KSw6xrfbe/h06K97KqGLstnwQZBn1UAMDJyQjhStHZZZb9BuP4YAczT4IuHcdSqQ==}
+  /@git.zone/tsbundle@2.0.14:
+    resolution: {integrity: sha512-4J5QiujPEPa+OYzN9TI9il6FLcJ7MGYWL8NzEhSerZ2jFm/iPjO75/s9x44VjszDmjo3xe/TRnRoHWFELVJQOA==}
     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.7):
+  /@git.zone/tsrun@1.2.46(@types/node@20.10.8):
     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.7)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@20.10.8)(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.7)(sinon@17.0.1):
+  /@git.zone/tstest@1.0.84(@types/node@20.10.8)(sinon@17.0.1):
     resolution: {integrity: sha512-HQQvloUWGj4fPxOuhO7Dfxw83szRlIMNJpaJtIgDUWiMm6vF9ygvcMTgpUUkEmWjxQ/t/SkXvHqHjtfp0l4l2g==}
     hasBin: true
     dependencies:
       '@api.global/typedserver': 3.0.9
-      '@git.zone/tsbundle': 2.0.13
-      '@git.zone/tsrun': 1.2.46(@types/node@20.10.7)
+      '@git.zone/tsbundle': 2.0.14
+      '@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
       '@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.7):
+  /@git.zone/tswatch@2.0.21(@types/node@20.10.8):
     resolution: {integrity: sha512-7Q0I0dIZD+ApR4MWeykvf+cYk+I6t1Re+jhAj8xrLqZBetvWv9C315jG6Brx96DEYz4th6EvyVUONQkLndBI4w==}
     hasBin: true
     dependencies:
       '@api.global/typedserver': 3.0.19
-      '@git.zone/tsbundle': 2.0.13
-      '@git.zone/tsrun': 1.2.46(@types/node@20.10.7)
+      '@git.zone/tsbundle': 2.0.14
+      '@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
       '@push.rocks/early': 4.0.4
       '@push.rocks/lik': 6.0.12
       '@push.rocks/smartchok': 1.0.23
@@ -620,9 +620,7 @@ packages:
       - '@swc/core'
       - '@swc/wasm'
       - '@types/node'
-      - bufferutil
       - supports-color
-      - utf-8-validate
     dev: true
 
   /@isaacs/cliui@8.0.2:
@@ -1549,12 +1547,6 @@ packages:
       type-detect: 4.0.8
     dev: true
 
-  /@sinonjs/fake-timers@10.3.0:
-    resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
-    dependencies:
-      '@sinonjs/commons': 3.0.0
-    dev: true
-
   /@sinonjs/fake-timers@11.2.2:
     resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==}
     dependencies:
@@ -1614,7 +1606,7 @@ packages:
   /@types/accepts@1.3.7:
     resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/babel__code-frame@7.0.6:
@@ -1625,7 +1617,7 @@ packages:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/buffer-json@2.0.3:
@@ -1651,21 +1643,21 @@ packages:
   /@types/clean-css@4.2.11:
     resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
       source-map: 0.6.1
     dev: true
 
   /@types/co-body@6.1.3:
     resolution: {integrity: sha512-UhuhrQ5hclX6UJctv5m4Rfp52AfG9o9+d9/HwjxhVB5NjXxr5t9oKgJxN8xRHgr35oo8meUEHUPFWiKg6y71aA==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
       '@types/qs': 6.9.10
     dev: true
 
   /@types/connect@3.4.38:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/content-disposition@0.5.8:
@@ -1686,13 +1678,13 @@ packages:
       '@types/connect': 3.4.38
       '@types/express': 4.17.21
       '@types/keygrip': 1.0.6
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/cors@2.8.17:
     resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/debounce@1.2.4:
@@ -1706,7 +1698,7 @@ packages:
   /@types/express-serve-static-core@4.17.41:
     resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
       '@types/qs': 6.9.10
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -1724,21 +1716,21 @@ packages:
   /@types/from2@2.3.5:
     resolution: {integrity: sha512-giavnjf3kNlJnE+HpZA1CQ3UKHxgehzsTuIMGda8pGMbOiLYGVNADEskey44OZcADHm/HOoBany8IV+0x28XFw==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     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.7
+      '@types/node': 20.10.8
     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.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/html-minifier@4.0.5:
@@ -1788,7 +1780,7 @@ packages:
   /@types/jsonfile@6.1.4:
     resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/keygrip@1.0.6:
@@ -1811,7 +1803,7 @@ packages:
       '@types/http-errors': 2.0.4
       '@types/keygrip': 1.0.6
       '@types/koa-compose': 3.2.8
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/mime-types@2.1.4:
@@ -1837,8 +1829,8 @@ packages:
     resolution: {integrity: sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==}
     dev: true
 
-  /@types/node@20.10.7:
-    resolution: {integrity: sha512-fRbIKb8C/Y2lXxB5eVMj4IU7xpdox0Lh8bUPEdtLysaylsml1hOOx1+STloRs/B9nf7C6kPRmmg/V7aQW7usNg==}
+  /@types/node@20.10.8:
+    resolution: {integrity: sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==}
     dependencies:
       undici-types: 5.26.5
 
@@ -1869,7 +1861,7 @@ packages:
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/serve-static@1.15.5:
@@ -1877,7 +1869,7 @@ packages:
     dependencies:
       '@types/http-errors': 2.0.4
       '@types/mime': 3.0.4
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/shortid@0.0.29:
@@ -1907,7 +1899,7 @@ packages:
   /@types/through2@2.0.41:
     resolution: {integrity: sha512-ryQ0tidWkb1O1JuYvWKyMLYEtOWDqF5mHerJzKz/gQpoAaJq2l/dsMPBF0B5BNVT34rbARYJ5/tsZwLfUi2kwQ==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
 
   /@types/trusted-types@2.0.7:
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
@@ -1937,20 +1929,20 @@ packages:
   /@types/ws@7.4.7:
     resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/ws@8.5.10:
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
 
   /@types/yauzl@2.10.3:
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
     requiresBuild: true
     dependencies:
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
     dev: true
     optional: true
 
@@ -2963,7 +2955,7 @@ packages:
     dependencies:
       '@types/cookie': 0.4.1
       '@types/cors': 2.8.17
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
       accepts: 1.3.8
       base64id: 2.0.0
       cookie: 0.4.2
@@ -3920,10 +3912,6 @@ packages:
       is-docker: 2.2.1
     dev: true
 
-  /isarray@0.0.1:
-    resolution: {integrity: sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=}
-    dev: true
-
   /isarray@1.0.0:
     resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=}
     dev: true
@@ -4022,8 +4010,8 @@ packages:
       graceful-fs: 4.2.11
     dev: true
 
-  /just-extend@4.2.1:
-    resolution: {integrity: sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==}
+  /just-extend@6.2.0:
+    resolution: {integrity: sha512-cYofQu2Xpom82S6qD778jBDpwvvy39s1l/hrYij2u9AMdQcGRpaBu6kY4mVhuno5kJVi1DAz4aiphA2WI1/OAw==}
     dev: true
 
   /keygrip@1.1.0:
@@ -4535,14 +4523,14 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /nise@5.1.5:
-    resolution: {integrity: sha512-VJuPIfUFaXNRzETTQEEItTOP8Y171ijr+JLq42wHes3DiryR8vT+1TXQW/Rx8JNUhyYYWyIvjXTU6dOhJcs9Nw==}
+  /nise@5.1.7:
+    resolution: {integrity: sha512-wWtNUhkT7k58uvWTB/Gy26eA/EJKtPZFVAhEilN5UYVmmGRYOURbejRUyKm0Uu9XVEW7K5nBOZfR8VMB4QR2RQ==}
     dependencies:
-      '@sinonjs/commons': 2.0.0
-      '@sinonjs/fake-timers': 10.3.0
+      '@sinonjs/commons': 3.0.0
+      '@sinonjs/fake-timers': 11.2.2
       '@sinonjs/text-encoding': 0.7.2
-      just-extend: 4.2.1
-      path-to-regexp: 1.8.0
+      just-extend: 6.2.0
+      path-to-regexp: 6.2.1
     dev: true
 
   /no-case@2.3.2:
@@ -4806,15 +4794,8 @@ packages:
     resolution: {integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=}
     dev: true
 
-  /path-to-regexp@1.8.0:
-    resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
-    dependencies:
-      isarray: 0.0.1
-    dev: true
-
   /path-to-regexp@6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
-    dev: false
 
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -5328,7 +5309,7 @@ packages:
       '@sinonjs/fake-timers': 11.2.2
       '@sinonjs/samsam': 8.0.0
       diff: 5.1.0
-      nise: 5.1.5
+      nise: 5.1.7
       supports-color: 7.2.0
     dev: true
 
@@ -5676,7 +5657,7 @@ packages:
     hasBin: true
     dev: true
 
-  /ts-node@10.9.1(@types/node@20.10.7)(typescript@5.1.6):
+  /ts-node@10.9.1(@types/node@20.10.8)(typescript@5.1.6):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -5695,7 +5676,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.10.7
+      '@types/node': 20.10.8
       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.240',
+  version: '1.0.244',
   description: 'website for lossless.com'
 }

ts_web/elements/00colors.ts

@@ -0,0 +1,11 @@
+export const dark = {
+  blue: '#0050b9',
+  blueActive: '#0069f2',
+  text: '#ffffff',
+}
+
+export const bright = {
+  blue: '#0050b9',
+  blueActive: '#0069f2',
+  text: '#333333',
+}

ts_web/elements/dees-button.ts

@@ -93,15 +93,15 @@ export class DeesButton extends DeesElement {
       }
 
       .button:hover {
-        background: #039be5;
+        background: #0050b9;
         color: #ffffff;
-        border: 1px solid #039be5;
-        border-top: 1px solid #039be5;
+        border: 1px solid #0050b9;
+        border-top: 1px solid #0050b9;
       }
 
       .button:active {
-        background: #0277bd;
-        border-top: 1px solid #0277bd;
+        background: #0069f2;
+        border-top: 1px solid #0069f2;
       }
 
       .button.disabled {
@@ -145,8 +145,8 @@ export class DeesButton extends DeesElement {
       }
 
       .button.pending {
-        border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
-        background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
+        border: 1px dashed ${cssManager.bdTheme('#0069f2', '#0069f270')};
+        background: ${cssManager.bdTheme('#0069f2', '#0069f270')};
         color: #fff;
       }
 

ts_web/elements/dees-contextmenu.demo.ts

@@ -1,5 +1,5 @@
 import { html } from '@design.estate/dees-element';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 
 import { DeesContextmenu } from './dees-contextmenu.js';
 

ts_web/elements/dees-contextmenu.ts

@@ -1,5 +1,5 @@
 import { demoFunc } from './dees-contextmenu.demo.js';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 import {
   customElement,
   html,

ts_web/elements/dees-form.demo.ts

@@ -35,6 +35,7 @@ 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-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

ts_web/elements/dees-icon.ts

@@ -50,6 +50,7 @@ import {
   faEyeSlash as faEyeSlashSolid,
   faFileInvoice as faFileInvoiceSolid,
   faFileInvoiceDollar as faFileInvoiceDollarSolid,
+  faGear as faGearSolid,
   faGrip as faGripSolid,
   faMessage as faMessageSolid,
   faMoneyCheckDollar as faMoneyCheckDollarSolid,
@@ -93,6 +94,7 @@ export const faIcons = {
   eyeSlash: faEyeSlashSolid,
   fileInvoice: faFileInvoiceSolid,
   fileInvoiceDoller: faFileInvoiceDollarSolid,
+  gear: faGearSolid,
   grip: faGripSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,

ts_web/elements/dees-input-checkbox.ts

@@ -103,8 +103,8 @@ export class DeesInputCheckbox extends DeesElement {
         }
 
         .checkbox.selected {
-          background: #039BE5;
-          border: 1px solid #039BE5;
+          background: #0050b9;
+          border: 1px solid #0050b9;
         }
 
         .checkbox.disabled {

ts_web/elements/dees-input-dropdown.ts

@@ -128,17 +128,22 @@ export class DeesInputDropdown extends DeesElement {
         max-width: 420px;
         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
         min-height: 40px;
-        border-radius: 3px;
+        border-radius: 8px;
         padding: 4px 8px;
-        transform: scale(0.98, 0.98);
         position: absolute;
         user-select: none;
       }
+      .selectionBox.top {
+        transform: translate(0px, 4px);
+      }
+      .selectionBox.bottom {
+        transform: translate(0px, -4px);
+      }
 
       .selectionBox.show {
         pointer-events: all;
+        transform: scale(1, 1) translate(0px, 0px);
         opacity: 1;
-        transform: scale(1, 1);
         box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
       }
 
@@ -151,7 +156,7 @@ export class DeesInputDropdown extends DeesElement {
       }
 
       .option.highlighted {
-        border-left: 2px solid #0277bd;
+        border-left: 2px solid #0069f2;
         padding-left: 6px;
         background: #ffffff20;
       }
@@ -159,29 +164,36 @@ export class DeesInputDropdown extends DeesElement {
       .option:hover {
         color: #fff;
         padding-left: 8px;
-        background: #0277bd;
+        background: #0069f2;
       }
 
-      .search {
-        padding: 8px;
+      .search.top {
+        padding-top: 4px;
+      }
+      .search.bottom {
+        padding-bottom: 4px;
       }
       .search input {
         display: block;
-        width: 80%;
         background: none;
         border: none;
         height: 24px;
         color: inherit;
-        text-align: center;
+        text-align: left;
         font-size: 12px;
         font-weight: 600;
-        background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
-        border-radius: 16px;
+        width: 100%;
         margin: auto;
       }
 
+      .search.top input {
+        border-bottom: 1px dotted #333;
+      }
+      .search.bottom input {
+        border-top: 1px dotted #333;
+      }
+
       .search input:focus {
-        border: none;
         outline: none;
       }
     `,
@@ -194,7 +206,7 @@ export class DeesInputDropdown extends DeesElement {
         <div class="selectionBox">
           ${this.enableSearch && !this.opensToTop
             ? html`
-                <div class="search">
+                <div class="search top">
                   <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               `
@@ -214,7 +226,7 @@ export class DeesInputDropdown extends DeesElement {
           })}
           ${this.enableSearch && this.opensToTop
             ? html`
-                <div class="search">
+                <div class="search bottom">
                   <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               `
@@ -304,25 +316,27 @@ export class DeesInputDropdown extends DeesElement {
     } else {
       if (!selectionBox.classList.contains('show')) {
         selectionBox.style.width = selectedBox.clientWidth + 'px';
-        selectionBox.classList.add('show');
         const spaceData = selectedBox.getBoundingClientRect();
         if (300 > window.innerHeight - spaceData.bottom) {
           this.opensToTop = true;
           selectedBox.classList.add('accentTop');
+          selectionBox.classList.add('top');
           selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
         } else {
           selectedBox.classList.add('accentBottom');
+          selectionBox.classList.add('bottom');
           this.opensToTop = false;
           const labelOffset = this.label ? 24 : 0;
           selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
         }
         await domtoolsInstance.convenience.smartdelay.delayFor(0);
         const searchInput = selectionBox.querySelector('input');
-        searchInput.focus();
+        searchInput?.focus();
+        selectionBox.classList.add('show');
       } else {
         selectedBox.style.pointerEvents = 'none';
         selectionBox.classList.remove('show');
-        selectedBox.style.opacity = '0';
+        // selectedBox.style.opacity = '0';
       }
     }
   }

ts_web/elements/dees-input-multiselect.demo.ts

@@ -1,5 +0,0 @@
-import { html } from '@design.estate/dees-element';
-
-export const demoFunc = () => html`
-  <dees-input-multiselect></dees-input-multiselect>
-`;

ts_web/elements/dees-input-multitoggle.demo.ts

@@ -0,0 +1,14 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-input-multitoggle
+    .options=${['option 1', 'option 2', 'a longer option with multiple words']}
+    .selectedOption=${'option 2'}
+  ></dees-input-multitoggle>
+  <dees-input-multitoggle
+    .type=${'boolean'}
+    .booleanTrueName=${'enabled'}
+    .booleanFalseName=${'disabled'}
+    .selectedOption=${'true'}
+  ></dees-input-multitoggle>
+`;

ts_web/elements/dees-input-multitoggle.ts

@@ -0,0 +1,121 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  state,
+  html,
+  domtools,
+  property,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
+
+@customElement('dees-input-multitoggle')
+export class DeesInputMultitoggle extends DeesElement {
+  public static demo = demoFunc;
+
+  @property()
+  type: 'boolean' | 'multi' | 'single' = 'multi';
+
+  @property()
+  booleanTrueName: string = 'true';
+
+  @property()
+  booleanFalseName: string = 'false';
+
+  @property({
+    type: Array,
+  })
+  options: string[] = [];
+
+  @property()
+  selectedOption: string = '';
+
+  @property()
+  boolValue: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        user-select: none;
+      }
+      .selections {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        background: #333;
+        width: min-content;
+        border-radius: 20px;
+        height: 40px;
+      }
+
+      .option {
+        color: #CCC;
+        position: relative;
+        padding: 0px 16px;
+        line-height: 40px;
+        cursor: default;
+        width: min-content; /* Make the width as per the content */
+        white-space: nowrap; /* Prevent text wrapping */
+        transition: all 0.1s;
+      }
+
+      .option:hover {
+        color: #fff;
+      }
+
+      .indicator {
+        opacity: 0;
+        position: absolute;
+        height: 32px;
+        left: 4px;
+        top: 4px;
+        border-radius: 16px;
+        background: #0050b9;
+        min-width: 36px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="label">MultiSelect</div>
+      <div class="mainbox">
+        <div class="selections">
+          <div class="indicator"></div>
+          ${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    if (this.type === 'boolean') {
+      this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false'];
+    }
+    this.setIndicator();
+  }
+
+  public async handleSelection(optionArg: string) {
+    this.selectedOption = optionArg;
+    this.setIndicator();
+  }
+
+  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})`);
+    if (indicator && option) {
+      indicator.style.width = `${option.clientWidth - 8}px`;
+      indicator.style.left = `${option.offsetLeft + 4}px`;
+      indicator.style.opacity = '1';
+    }
+    setTimeout(() => {
+      indicator.style.transition = 'all 0.1s';
+    }, 100);
+  }
+}

ts_web/elements/dees-input-radio.ts

@@ -90,8 +90,8 @@ export class DeesInputRadio extends DeesElement {
         }
 
         .checkbox.selected {
-          background: #039BE5;
-          border: 1px solid #039BE5;
+          background: #0050b9;
+          border: 1px solid #0050b9;
         }
 
         .maincontainer:hover .checkbox.selected {

ts_web/elements/dees-input-typelist.demo.ts

@@ -0,0 +1,15 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demoContainer {
+      max-width: 600px;
+      margin: auto;
+      padding: 40px;
+      background: #000;
+    }
+  </style>
+  <div class="demoContainer">
+    <dees-input-typelist></dees-input-typelist>
+  </div>
+`;

ts_web/elements/dees-input-typelist.ts

@@ -10,10 +10,10 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 
-const { demoFunc } = await import('./dees-input-multiselect.demo.js');
+const { demoFunc } = await import('./dees-input-typelist.demo.js');
 
-@customElement('dees-input-multiselect')
-export class DeesInputMultiselect extends DeesElement {
+@customElement('dees-input-typelist')
+export class DeesInputTypelist extends DeesElement {
   public static demo = demoFunc;
 
   constructor() {
@@ -40,29 +40,48 @@ export class DeesInputMultiselect extends DeesElement {
         border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
       }
 
-      .selections {
-        padding: 8px;
+      .tags {
+        padding: 16px;
+        cursor: default;
+      }
+
+      .notags {
+        text-align: center;
+        opacity: 0.5;
+        font-size: 12px;
       }
 
       input {
+        display: block;
+        box-sizing: border-box;
         background: #181818;
         width: 100%;
         outline: none;
         border: none;
         color: inherit;
-        padding: 8px;
+        padding: 0px 16px;
+        overflow: hidden;
+        line-height: 32px;
+        height: 0px;
+        transition: height 0.2s;
+      }
+
+      input:focus {
+        height: 32px;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="label">MultiSelect</div>
+      <div class="label">Type List</div>
       <div class="mainbox">
-        <div class="selections">
-          Nothing selected...
+        <div class="tags" @click=${() => {
+          this.shadowRoot.querySelector('input').focus();
+        }}>
+          <div class="notags">No tags yet</div>
         </div>
-        <input type="text" placeholder="Type to select" />
+        <input type="text" placeholder="Type, press Enter to add it..." />
       </div>
     `;
   }

ts_web/elements/dees-mobilenavigation.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 import {
   cssManager,
   css,

ts_web/elements/dees-modal.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-modal.demo.js';
 import {
   customElement,

ts_web/elements/dees-pdf.ts

@@ -57,18 +57,9 @@ export class DeesPdf extends DeesElement {
     if (!DeesPdf.pdfJsReady) {
       const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
       DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
-      const loadDeferred = domtools.plugins.smartpromise.defer();
-      const script = document.createElement('script');
-      script.addEventListener('load', () => {
-        console.log('pdf.js loaded!');
-        loadDeferred.resolve();
-      });
-      script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
-      document.getElementsByTagName('head')[0].appendChild(script);
-      // The workerSrc property shall be specified.
-      await loadDeferred.promise;
-      DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
-      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
+      // @ts-ignore
+      DeesPdf.pdfjsLib = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
+      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs';
       pdfJsReadyDeferred.resolve();
     }
     await DeesPdf.pdfJsReady;

ts_web/elements/dees-progressbar.demo.ts

@@ -0,0 +1,11 @@
+import { html } from '@design.estate/dees-element';
+
+import { DeesProgressbar } from './dees-progressbar.js';
+
+export const demoFunc = () => {
+  return html`
+    <dees-progressbar
+      .percentage=${50}
+    ></dees-progressbar>
+  `;
+}

ts_web/elements/dees-progressbar.ts

@@ -0,0 +1,95 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+import { demoFunc } from './dees-progressbar.demo.js';
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  type CSSResult,
+  unsafeCSS,
+  unsafeHTML,
+  state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+@customElement('dees-progressbar')
+export class DeesProgressbar extends DeesElement {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @property({
+    type: Number,
+  })
+  public percentage = 0;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
+      }
+      .progressBarContainer {
+        padding: 8px;
+        min-width: 200px;
+      }
+
+      .progressBar {
+        background: ${cssManager.bdTheme('#eeeeeb', '#444')};
+        height: 8px;
+        width: 100%;
+        border-radius: 4px;
+        border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')};
+      }
+
+      .progressBarFill {
+        background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)};
+        height: 8px;
+        margin-top: -0.5px;
+        transition: 0.2s width;
+        border-radius: 4px;
+        width: 0px;
+        border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')};
+      }
+
+      .progressText {
+        padding: 8px;
+        text-align: center;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="progressBarContainer">
+        <div class="progressBar">
+          <div class="progressBarFill"></div>
+          <div class="progressText">
+            ${this.percentage}%
+          <div>
+        </div>
+      </div>
+    `
+  }
+
+  firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): void {
+    super.firstUpdated(_changedProperties);
+    this.updateComplete.then(() => {
+      this.updatePercentage();
+    });
+  }
+
+  public async updatePercentage() {
+    const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
+    progressBarFill.style.width = `${this.percentage}%`;
+  }
+
+  updated(){
+    this.updatePercentage();
+  }
+}

ts_web/elements/dees-simple-login.ts

@@ -48,7 +48,7 @@ export class DeesSimpleLogin extends DeesElement {
         min-height: 100px;
         background: ${cssManager.bdTheme('#eeeeeb', '#111')};
         box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
-        border-radius: 3px;
+        border-radius: 8px;
         padding: 24px;
         transition: opacity 0.3s, transform 0.3s;
       }

ts_web/elements/dees-stepper.ts

@@ -99,7 +99,7 @@ export class DeesStepper extends DeesElement {
         transition: all 0.7s ease-in-out;
         max-width: 500px;
         min-height: 300px;
-        border-radius: 3px;
+        border-radius: 8px;
         background: ${cssManager.bdTheme('#ffffff', '#181818')};
         border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
         color: ${cssManager.bdTheme('#333', '#fff')};
@@ -127,6 +127,7 @@ export class DeesStepper extends DeesElement {
       }
 
       .step .stepCounter {
+        color: #999;
         position: absolute;
         top: 0px;
         right: 0px;
@@ -137,6 +138,8 @@ export class DeesStepper extends DeesElement {
       }
 
       .step .goBack {
+        color: #999;
+        cursor: default;
         position: absolute;
         top: 0px;
         left: 0px;

ts_web/elements/dees-table.demo.ts

@@ -1,5 +1,5 @@
 import { type ITableAction } from './dees-table.js';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 import { html } from '@design.estate/dees-element';
 
 interface ITableDemoData {

ts_web/elements/dees-table.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
 import {
   customElement,

ts_web/elements/dees-updater.demo.ts

@@ -0,0 +1,10 @@
+import { html } from '@design.estate/dees-element';
+
+import { DeesUpdater } from './dees-updater.js';
+
+export const demoFunc = async () => {
+  const updater = await DeesUpdater.createAndShow();
+  setTimeout(async () => {
+    await updater.destroy();
+  }, 10000);
+}

ts_web/elements/dees-updater.ts

@@ -1,7 +1,13 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
-
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  html,
+  property,
+  type CSSResult,
+  domtools,
+} from '@design.estate/dees-element';
+import { demoFunc } from './dees-updater.demo.js';
 
 import './dees-windowlayer';
 import { css, cssManager } from '@design.estate/dees-element';
@@ -14,7 +20,13 @@ declare global {
 
 @customElement('dees-updater')
 export class DeesUpdater extends DeesElement {
-  public static demo = () => html`<dees-updater></dees-updater>`;
+  public static demo = demoFunc;
+
+  public static async createAndShow() {
+    const updater = new DeesUpdater();
+    document.body.appendChild(updater);
+    return updater;
+  }
 
   @property({
     type: String,
@@ -35,56 +47,64 @@ export class DeesUpdater extends DeesElement {
     cssManager.defaultStyles,
     css`
       .modalContainer {
-          will-change: transform;
-          position: relative;
-          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
-          margin: auto;
-          max-width: 800px;
-          border-radius: 3px;
-          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
-        }
+        will-change: transform;
+        position: relative;
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        max-width: 800px;
+        border-radius: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
+      }
 
-        .headingContainer {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 40px 40px;
-        }
+      .headingContainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 40px 40px;
+      }
 
-        h1 {
-          margin: none;
-          font-size: 20px;
-          color: ${cssManager.bdTheme('#333', '#fff')};
-          margin-left: 20px;
-          font-weight: normal;
-        }
+      h1 {
+        margin: none;
+        font-size: 20px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin-left: 20px;
+        font-weight: normal;
+      }
 
-        .buttonContainer {
-          display: grid;
-          grid-template-columns: 50% 50%;
-        }
-    `
-  ]
+      .buttonContainer {
+        display: grid;
+        grid-template-columns: 50% 50%;
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
-      <dees-windowlayer @clicked="${this.windowLayerClicked}">
+      <dees-windowlayer
+        @clicked="${this.windowLayerClicked}"
+        .options=${{
+          blur: true,
+        }}
+      >
         <div class="modalContainer">
           <div class="headingContainer">
             <dees-spinner .size=${60}></dees-spinner>
             <h1>Updating the application...</h1>
           </div>
+          <div class="progress">
+            <dees-progressbar .progress=${0.5}></dees-progressbar>
+          </div>
           <div class="buttonContainer">
             <dees-button>More info</dees-button>
             <dees-button>Changelog</dees-button>
           </div>
-        </div>
-      </dees-windowlayer>>
+        </div> </dees-windowlayer
+      >>
     `;
   }
 
-  private windowLayerClicked() {
-    const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
-    windowLayer.toggleVisibility();
+  public async destroy() {
+    this.parentElement.removeChild(this);
   }
+
+  private windowLayerClicked() {}
 }

ts_web/elements/index.ts

@@ -12,13 +12,15 @@ export * from './dees-input-checkbox.js';
 export * from './dees-input-dropdown.js';
 export * from './dees-input-fileupload.js';
 export * from './dees-input-iban.js';
-export * from './dees-input-multiselect.js';
+export * from './dees-input-typelist.js';
 export * from './dees-input-phone.js';
+export * from './dees-progressbar.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
 export * from './dees-mobilenavigation.js';
 export * from './dees-modal.js';
+export * from './dees-input-multitoggle.js';
 export * from './dees-pdf.js';
 export * from './dees-simple-appdash.js';
 export * from './dees-simple-login.js';