feat(core): Refactor and enhance consent management components

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2025-01-13 - 1.1.0 - feat(core)
+Refactor and enhance consent management components
+
+- Replaced usage of custom elements with LitElement for core components.
+- Introduced new layout and design for consent modal using modern CSS approaches.
+- Removed dependency on '@design.estate/dees-domtools'.
+- Added support for dynamic theme switching with light and dark modes.
+
 ## 2025-01-09 - 1.0.81 - fix(core)
 Package updated to ensure compliance with privacy regulations.
 

html/index.ts

@@ -1,10 +1,8 @@
 // dees tools
 import * as deesWccTools from '@design.estate/dees-wcctools';
-import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
 import * as elements from '../ts_web/elements/index.js';
 import * as pages from '../ts_web/pages/index.js';
 
 deesWccTools.setupWccTools(elements as any, pages);
-deesDomTools.elementBasic.setup();

package.json

@@ -12,14 +12,12 @@
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "dependencies": {
     "@consent.software/interfaces": "^1.0.11",
     "@consent.software/webclient": "^1.0.14",
-    "@design.estate/dees-catalog": "^1.3.3",
+    "@push.rocks/smartdelay": "^3.0.5",
-    "@design.estate/dees-domtools": "^2.1.1",
+    "lit": "^3.2.1"
-    "@design.estate/dees-element": "^2.0.39",
-    "@push.rocks/smartdelay": "^3.0.5"
   },
   "devDependencies": {
     "@design.estate/dees-wcctools": "^1.0.90",

pnpm-lock.yaml

@@ -14,18 +14,12 @@ importers:
       '@consent.software/webclient':
         specifier: ^1.0.14
         version: 1.0.17
-      '@design.estate/dees-catalog':
-        specifier: ^1.3.3
-        version: 1.3.3
-      '@design.estate/dees-domtools':
-        specifier: ^2.1.1
-        version: 2.1.1
-      '@design.estate/dees-element':
-        specifier: ^2.0.39
-        version: 2.0.39
       '@push.rocks/smartdelay':
         specifier: ^3.0.5
         version: 3.0.5
+      lit:
+        specifier: ^3.2.1
+        version: 3.2.1
     devDependencies:
       '@design.estate/dees-wcctools':
         specifier: ^1.0.90
@@ -261,9 +255,6 @@ packages:
   '@consent.software/webclient@1.0.17':
     resolution: {integrity: sha512-nqYVlIhm6wmpCLppBID/xpQytJlZV52YPafKOHl/jOkQeQmzNd5UdaDFRnZo6DEU77OE4CwbsswIy+CC3NS0TA==}
 
-  '@design.estate/dees-catalog@1.3.3':
-    resolution: {integrity: sha512-pE2BUFks2lWjjAm4wgby+5aBwtd3VrgCsvwbE3k39DMQpcgxNB64lZa5tUV4XUxwMluECfDluI2uQuslTUQqvQ==}
-
   '@design.estate/dees-comms@1.0.27':
     resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==}
 
@@ -570,26 +561,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@fortawesome/fontawesome-common-types@6.7.2':
-    resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/fontawesome-svg-core@6.7.2':
-    resolution: {integrity: sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/free-brands-svg-icons@6.7.2':
-    resolution: {integrity: sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/free-regular-svg-icons@6.7.2':
-    resolution: {integrity: sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/free-solid-svg-icons@6.7.2':
-    resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==}
-    engines: {node: '>=6'}
-
   '@git.zone/tsbuild@2.2.0':
     resolution: {integrity: sha512-lsF1VvqzTjrcOPW7mvsK0E6jlQJ9UHF37s6Z0JhVS/COXWtPdRT4Dm7/hhbwqH62yu44B+mRz1gJhc7NgBoA5Q==}
     hasBin: true
@@ -633,70 +604,6 @@ packages:
   '@mixmark-io/domino@2.2.0':
     resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
 
-  '@napi-rs/canvas-android-arm64@0.1.65':
-    resolution: {integrity: sha512-ZYwqFYEKcT5Zr8lbiaJNJj/poLaeK2TncolY914r+gD2TJNeP7ZqvE7A2SX/1C9MB4E3DQEwm3YhL3WEf0x3MQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
-  '@napi-rs/canvas-darwin-arm64@0.1.65':
-    resolution: {integrity: sha512-Pg1pfiJEyDIsX+V0QaJPRWvXbw5zmWAk3bivFCvt/5pwZb37/sT6E/RqPHT9NnqpDyKW6SriwY9ypjljysUA1Q==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@napi-rs/canvas-darwin-x64@0.1.65':
-    resolution: {integrity: sha512-3Tr+/HjdJN7Z/VKIcsxV2DvDIibZCExgfYTgljCkUSFuoI7iNkOE6Dc1Q6j212EB9PeO8KmfrViBqHYT6IwWkA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.65':
-    resolution: {integrity: sha512-3KP+dYObH7CVkZMZWwk1WX9jRjL+EKdQtD43H8MOI+illf+dwqLlecdQ4d9bQRIxELKJ8dyPWY4fOp/Ngufrdg==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@napi-rs/canvas-linux-arm64-gnu@0.1.65':
-    resolution: {integrity: sha512-Ka3StKz7Dq7kjTF3nNJCq43UN/VlANS7qGE3dWkn1d+tQNsCRy/wRmyt1TUFzIjRqcTFMQNRbgYq84+53UBA0A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@napi-rs/canvas-linux-arm64-musl@0.1.65':
-    resolution: {integrity: sha512-O4xMASm2JrmqYoiDyxVWi+z5C14H+oVEag2rZ5iIA67dhWqYZB+iO7wCFpBYRj31JPBR29FOsu6X9zL+DwBFdw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@napi-rs/canvas-linux-riscv64-gnu@0.1.65':
-    resolution: {integrity: sha512-dblWDaA59ZU8bPbkfM+riSke7sFbNZ70LEevUdI5rgiFEUzYUQlU34gSBzemTACj5rCWt1BYeu0GfkLSjNMBSw==}
-    engines: {node: '>= 10'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@napi-rs/canvas-linux-x64-gnu@0.1.65':
-    resolution: {integrity: sha512-wsp+atutw13OJXGU3DDkdngtBDoEg01IuK5xMe0L6VFPV8maGkh17CXze078OD5QJOc6kFyw3DDscMLOPF8+oA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@napi-rs/canvas-linux-x64-musl@0.1.65':
-    resolution: {integrity: sha512-odX+nN+IozWzhdj31INcHz3Iy9+EckNw+VqsZcaUxZOTu7/3FmktRNI6aC1qe5minZNv1m05YOS1FVf7fvmjlA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@napi-rs/canvas-win32-x64-msvc@0.1.65':
-    resolution: {integrity: sha512-RZQX3luWnlNWgdMnLMQ1hyfQraeAn9lnxWWVCHuUM4tAWEV8UDdeb7cMwmJW7eyt8kAosmjeHt3cylQMHOxGFg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@napi-rs/canvas@0.1.65':
-    resolution: {integrity: sha512-YcFhXQcp+b2d38zFOJNbpyPHnIL7KAEkhJQ+UeeKI5IpE9B8Cpf/M6RiHPQXSsSqnYbrfFylnW49dyh2oeSblQ==}
-    engines: {node: '>= 10'}
-
   '@oozcitak/dom@1.15.10':
     resolution: {integrity: sha512-0JT29/LaxVgRcGKvHmSrUTEvZ8BXvZhGl2LASRUgHqDTC1M5g1pLmVv56IYNyt3bG2CUjDkc67wnyZC14pbQrQ==}
     engines: {node: '>=8.0'}
@@ -807,9 +714,6 @@ packages:
   '@push.rocks/smarthash@3.0.4':
     resolution: {integrity: sha512-HJ/fSx41jm0CvSaqMLa6b2nuNK5rHAqAeAq3dAB7Sq9BCPm2M0J5ZVDTzEAH8pS91XYniUiwuE0jwPERNn9hmw==}
 
-  '@push.rocks/smarti18n@1.0.4':
-    resolution: {integrity: sha512-bHIi9Iuzp2cbux9q79ZK5jOQYPsYJ9zDDS4p/xEPQH31gr0mcFRosLSQb1kvDQDVmUhI0ADlQMqr2ui9zEXQHA==}
-
   '@push.rocks/smartjson@5.0.10':
     resolution: {integrity: sha512-yuntSMGZ+XNHMrbS9RxotaD+eOgoNTcuDoWsttis+N3Mkc9DIam0pt/ER4NU8TgfMmhT/hKwQH+3DJceDzntoA==}
 
@@ -1604,12 +1508,6 @@ packages:
   '@ungap/structured-clone@1.2.1':
     resolution: {integrity: sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==}
 
-  '@webcontainer/api@1.2.0':
-    resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==}
-
-  '@yr/monotone-cubic-spline@1.0.3':
-    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
-
   accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -1646,9 +1544,6 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  apexcharts@3.54.1:
-    resolution: {integrity: sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -2299,10 +2194,6 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  highlight.js@11.10.0:
-    resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
-    engines: {node: '>=12.0.0'}
-
   html-minifier@4.0.0:
     resolution: {integrity: sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==}
     engines: {node: '>=6'}
@@ -2325,9 +2216,6 @@ packages:
   humanize-ms@1.2.1:
     resolution: {integrity: sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=}
 
-  ibantools@4.5.1:
-    resolution: {integrity: sha512-DfKQpLlFq9yEUIEnFuCJzss3XavD7iHZTU5PyqXiAJ+rmaMp+NFP3hboumHKuK8nZjuOJg93WemTzcQ5b9jOZA==}
-
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -2782,9 +2670,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  monaco-editor@0.52.2:
-    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
-
   ms@2.0.0:
     resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
 
@@ -2929,10 +2814,6 @@ packages:
     resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
     engines: {node: '>=16'}
 
-  pdfjs-dist@4.10.38:
-    resolution: {integrity: sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==}
-    engines: {node: '>=20'}
-
   peek-readable@5.3.1:
     resolution: {integrity: sha512-GVlENSDW6KHaXcd9zkZltB7tCLosKB/4Hg0fqBJkAoBgYG2Tn1xtMgXtSUuMU9AK/gCm/tTdT8mgAeF4YNeeqw==}
     engines: {node: '>=14.16'}
@@ -3263,37 +3144,6 @@ packages:
   stubborn-fs@1.2.5:
     resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
 
-  svg.draggable.js@2.2.2:
-    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.easing.js@2.0.0:
-    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.filter.js@2.0.2:
-    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.js@2.7.1:
-    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
-
-  svg.pathmorphing.js@0.1.3:
-    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.resize.js@1.4.3:
-    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.select.js@2.1.2:
-    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.select.js@3.0.1:
-    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
-    engines: {node: '>= 0.8.0'}
-
   sweet-scroll@4.0.0:
     resolution: {integrity: sha512-mR6fRsAQANtm3zpzhUE73KAOt2aT4ZsWzNSggiEsSqdO6Zh4gM7ioJG81EngrZEl0XAc3ZvzEfhxggOoEBc8jA==}
 
@@ -3574,14 +3424,6 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
-  xterm-addon-fit@0.8.0:
-    resolution: {integrity: sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==}
-    peerDependencies:
-      xterm: ^5.0.0
-
-  xterm@5.3.0:
-    resolution: {integrity: sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==}
-
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
@@ -4286,30 +4128,6 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@design.estate/dees-catalog@1.3.3':
-    dependencies:
-      '@design.estate/dees-domtools': 2.1.1
-      '@design.estate/dees-element': 2.0.39
-      '@design.estate/dees-wcctools': 1.0.90
-      '@fortawesome/fontawesome-svg-core': 6.7.2
-      '@fortawesome/free-brands-svg-icons': 6.7.2
-      '@fortawesome/free-regular-svg-icons': 6.7.2
-      '@fortawesome/free-solid-svg-icons': 6.7.2
-      '@push.rocks/smarti18n': 1.0.4
-      '@push.rocks/smartpromise': 4.1.0
-      '@push.rocks/smartstring': 4.0.15
-      '@tsclass/tsclass': 4.2.0
-      '@webcontainer/api': 1.2.0
-      apexcharts: 3.54.1
-      highlight.js: 11.10.0
-      ibantools: 4.5.1
-      monaco-editor: 0.52.2
-      pdfjs-dist: 4.10.38
-      xterm: 5.3.0
-      xterm-addon-fit: 0.8.0(xterm@5.3.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@design.estate/dees-comms@1.0.27':
     dependencies:
       '@api.global/typedrequest': 3.1.10
@@ -4504,24 +4322,6 @@ snapshots:
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
-  '@fortawesome/fontawesome-common-types@6.7.2': {}
-
-  '@fortawesome/fontawesome-svg-core@6.7.2':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.7.2
-
-  '@fortawesome/free-brands-svg-icons@6.7.2':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.7.2
-
-  '@fortawesome/free-regular-svg-icons@6.7.2':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.7.2
-
-  '@fortawesome/free-solid-svg-icons@6.7.2':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.7.2
-
   '@git.zone/tsbuild@2.2.0':
     dependencies:
       '@git.zone/tspublish': 1.9.1
@@ -4620,50 +4420,6 @@ snapshots:
 
   '@mixmark-io/domino@2.2.0': {}
 
-  '@napi-rs/canvas-android-arm64@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-darwin-arm64@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-darwin-x64@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-linux-arm64-gnu@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-linux-arm64-musl@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-linux-riscv64-gnu@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-linux-x64-gnu@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-linux-x64-musl@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas-win32-x64-msvc@0.1.65':
-    optional: true
-
-  '@napi-rs/canvas@0.1.65':
-    optionalDependencies:
-      '@napi-rs/canvas-android-arm64': 0.1.65
-      '@napi-rs/canvas-darwin-arm64': 0.1.65
-      '@napi-rs/canvas-darwin-x64': 0.1.65
-      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.65
-      '@napi-rs/canvas-linux-arm64-gnu': 0.1.65
-      '@napi-rs/canvas-linux-arm64-musl': 0.1.65
-      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.65
-      '@napi-rs/canvas-linux-x64-gnu': 0.1.65
-      '@napi-rs/canvas-linux-x64-musl': 0.1.65
-      '@napi-rs/canvas-win32-x64-msvc': 0.1.65
-    optional: true
-
   '@oozcitak/dom@1.15.10':
     dependencies:
       '@oozcitak/infra': 1.0.8
@@ -4818,7 +4574,7 @@ snapshots:
 
   '@push.rocks/smartdelay@3.0.5':
     dependencies:
-      '@push.rocks/smartpromise': 4.0.3
+      '@push.rocks/smartpromise': 4.1.0
 
   '@push.rocks/smartenv@5.0.12':
     dependencies:
@@ -4919,8 +4675,6 @@ snapshots:
       '@types/through2': 2.0.41
       through2: 4.0.2
 
-  '@push.rocks/smarti18n@1.0.4': {}
-
   '@push.rocks/smartjson@5.0.10':
     dependencies:
       '@push.rocks/smartstring': 4.0.8
@@ -6209,10 +5963,6 @@ snapshots:
 
   '@ungap/structured-clone@1.2.1': {}
 
-  '@webcontainer/api@1.2.0': {}
-
-  '@yr/monotone-cubic-spline@1.0.3': {}
-
   accepts@1.3.8:
     dependencies:
       mime-types: 2.1.35
@@ -6243,16 +5993,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  apexcharts@3.54.1:
-    dependencies:
-      '@yr/monotone-cubic-spline': 1.0.3
-      svg.draggable.js: 2.2.2
-      svg.easing.js: 2.0.0
-      svg.filter.js: 2.0.2
-      svg.pathmorphing.js: 0.1.3
-      svg.resize.js: 1.4.3
-      svg.select.js: 3.0.1
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -7106,8 +6846,6 @@ snapshots:
 
   he@1.2.0: {}
 
-  highlight.js@11.10.0: {}
-
   html-minifier@4.0.0:
     dependencies:
       camel-case: 3.0.0
@@ -7139,8 +6877,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  ibantools@4.5.1: {}
-
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -7741,8 +7477,6 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  monaco-editor@0.52.2: {}
-
   ms@2.0.0: {}
 
   ms@2.1.2: {}
@@ -7854,10 +7588,6 @@ snapshots:
 
   path-to-regexp@8.2.0: {}
 
-  pdfjs-dist@4.10.38:
-    optionalDependencies:
-      '@napi-rs/canvas': 0.1.65
-
   peek-readable@5.3.1: {}
 
   peek-stream@1.1.3:
@@ -8317,37 +8047,6 @@ snapshots:
 
   stubborn-fs@1.2.5: {}
 
-  svg.draggable.js@2.2.2:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.easing.js@2.0.0:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.filter.js@2.0.2:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.js@2.7.1: {}
-
-  svg.pathmorphing.js@0.1.3:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.resize.js@1.4.3:
-    dependencies:
-      svg.js: 2.7.1
-      svg.select.js: 2.1.2
-
-  svg.select.js@2.1.2:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.select.js@3.0.1:
-    dependencies:
-      svg.js: 2.7.1
-
   sweet-scroll@4.0.0: {}
 
   symbol-tree@3.2.4: {}
@@ -8597,12 +8296,6 @@ snapshots:
 
   xtend@4.0.2: {}
 
-  xterm-addon-fit@0.8.0(xterm@5.3.0):
-    dependencies:
-      xterm: 5.3.0
-
-  xterm@5.3.0: {}
-
   yallist@4.0.0: {}
 
   yargs-parser@21.1.1: {}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@consent.software/catalog',
-  version: '1.0.81',
+  version: '1.1.0',
   description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
 }

ts_web/elements/consentsoftware-cookieconsent.ts

@@ -1,210 +1,266 @@
-import { customElement, DeesElement, property, html, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
+import * as shared from './shared.js';
-import * as domtools from '@design.estate/dees-domtools';
+
-import '@design.estate/dees-catalog';
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
 
 import * as csInterfaces from '@consent.software/interfaces';
 import * as csWebclient from '@consent.software/webclient';
-
 import { delayFor } from '@push.rocks/smartdelay';
 
 @customElement('consentsoftware-cookieconsent')
-export class ConsentsoftwareCookieconsent extends DeesElement {
+export class ConsentsoftwareCookieconsent extends LitElement {
   public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
 
   public csWebclientInstance = new csWebclient.CsWebclient();
   public csWebclientRan = false;
 
+  @property({ type: String, reflect: true })
+  public theme: 'light' | 'dark' = 'light';
+
+  @property({ type: Number })
+  public heightPixels = 60;
+
+  /**
+   * We bind `heightPixels` to a CSS variable (--cookieconsent-height).
+   * Then we can do margin-bottom animations in CSS.
+   */
+  public static styles = css`
+    :host {
+      font-family: ${shared.fontStack};
+      /* Default theme variables */
+      --text-color: #333;
+      --background-color: #eeeeee;
+      --accent-color: #333333;
+      --button-bg: #ffffff;
+      --button-hover-bg: #f2f2f2;
+      --icon-color: #4496f5;
+      --link-color: #333;
+      --padding-sides: 16px;
+    }
+
+    :host([theme='dark']) {
+      --text-color: #fff;
+      --background-color: #111;
+      --accent-color: #333333;
+      --button-bg: #252525;
+      --button-hover-bg: #222222;
+      --icon-color: #4496f5;
+      --link-color: #fff;
+    }
+
+    :host([theme='light']) {
+      --text-color: #333;
+      --background-color: #eeeeee;
+      --accent-color: #333333;
+      --button-bg: #ffffff;
+      --button-hover-bg: #f2f2f2;
+      --icon-color: #4496f5;
+      --link-color: #333;
+    }
+
+    .pageOverlay {
+      position: fixed;
+      top: 0px;
+      bottom: 0px;
+      right: 0px;
+      left: 0px;
+      display: grid;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000; /* standard z-index for fixed elements */
+    }
+
+    .modalBox {
+      display: block;
+      color: var(--text-color);
+      background: var(--background-color);
+      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
+      position: realtive;
+      border-top: 1px solid var(--accent-color);
+      border-radius: 16px;
+      max-width: 1100px;
+      min-width: calc(100vw / 3);
+      box-sizing: border-box;
+      overflow: hidden;
+      /* 
+       * We start with margin-bottom as negative to hide the banner.
+       * The animation occurs when we toggle the gotIt/show attributes.
+       */
+      will-change: transform; /* ensure efficient rendering */
+      transition: all 0.2s;
+    }
+
+    /* 
+     * Toggle display based on [show] attribute 
+     * (so if show=false, the banner doesn't show at all).
+     */
+    :host([show='false']) {
+      display: none;
+    }
+    :host([show='true']) {
+      display: block;
+    }
+
+    /* 
+     * Animate margin-bottom when [gotIt] toggles.
+     * If gotIt=true, push the banner down off-screen.
+     * If gotIt=false, pull the banner into view.
+     */
+    :host([gotIt='true']) {
+      background: blue;
+    }
+    :host([gotIt='false']) {
+      background: red;
+    }
+
+    .content {
+      margin: auto;
+    }
+
+    .text-container {
+      padding-left: var(--padding-sides);
+      padding-right: var(--padding-sides);
+      display: grid;
+      grid-template-columns: auto;
+    }
+
+    .text-container a {
+      color: var(--link-color);
+      text-decoration: none;
+    }
+
+    .button-container {
+      padding: var(--padding-sides);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
+
+    .info-container {
+      color: var(--text-color);
+      text-align: center;
+      line-height: 2em;
+      background: rgba(0, 0, 0, 0.1);
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      font-size: 0.8em;
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    .info-container a {
+      text-decoration: underline;
+      color: var(--link-color);
+      transition: color 0.2s;
+    }
+    .info-container a:hover {
+      color: #ffffff;
+    }
+
+    .consent-button {
+      border-radius: 3px;
+      background: var(--button-bg);
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      padding: 10px;
+      line-height: 30px;
+      text-align: center;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .consent-button:hover {
+      background: var(--button-hover-bg);
+    }
+  `;
+
   constructor() {
     super();
-    domtools.elementBasic.setup();
+    this.setAttribute('gotIt', 'true');
-    // lets determine wether to show the cookieconsent dialog or not
+    this.setAttribute('show', 'false');
   }
 
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-        * {
-          box-sizing: border-box;
-        }
-
-        .content {
-          max-width: 1100px;
-          margin: auto;
-          line-height: var(--cookieconsent-height);
-          padding-bottom: 20px;
-        }
-
-
-        .text-container {
-          line-height: var(--cookieconsent-height);
-          display: grid;
-          grid-template-columns: 30px auto;
-        }
-
-        .text-container .icon-container {
-          height: var(--cookieconsent-height);
-          display: inline-block;
-          color: #4496F5;
-        }
-
-        .text-container .toptext {
-
-        }
-
-        .text-container a {
-          color: ${cssManager.bdTheme('#333', '#fff')};
-        }
-
-        .button-container {
-          display: grid;
-          grid-template-columns: ${cssManager.cssGridColumns(4, 20)};
-          grid-column-gap: 20px;
-          grid-row-gap: 20px;
-        }
-
-        .info-container {
-          color: ${cssManager.bdTheme('#444', '#CCC')};
-          text-align: center;
-        }
-
-        .info-container a {
-          text-decoration: underline;
-          color: ${cssManager.bdTheme('#444', '#CCC')};
-          transition: color 0.2s;
-        }
-
-        .info-container a:hover {
-          color: #ffffff;
-        }
-
-
-        .consent-button {
-          border-radius: 3px;
-          background: ${cssManager.bdTheme('#ffffff', '#252525')};
-          box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.2)', '0px 0px 5px rgba(0,0,0,0.4)')};
-          padding: 10px;
-          line-height: 30px;
-          text-align: center;
-          cursor: pointer;
-          transition: background 0.2s;
-        }
-
-        .consent-button:hover {
-          background: ${cssManager.bdTheme('#f2f2f2', '#222222')};
-        }
-
-        .consent-button:first-child {
-          margin-left: 0px;
-        }
-
-        ${cssManager.cssForNotebook(css`
-          .content {
-            padding-left: 30px;
-            padding-right: 30px;
-          }
-        `)}
-
-        ${cssManager.cssForTablet(css`
-          :host {
-            text-align: center;
-          }
-
-          .content {
-            padding-top: 20px;
-          }
-
-          .icon-container {
-            margin-top: -10px;
-            line-height: 50px;
-            font-size: 40px;
-          }
-
-          .text-container {
-            line-height: 20px;
-            margin-bottom: 10px;
-            grid-template-columns: 50px auto;
-          }
-
-          .button-container {
-            grid-template-columns: ${cssManager.cssGridColumns(2, 20)};
-          }
-        `)}
-
-        ${cssManager.cssForPhablet(css`
-          .button-container {
-            grid-template-columns: 100%;
-          }
-        `)}
-    `
-  ]
-
   public render(): TemplateResult {
     return html`
-      <style>
+      <div class="pageOverlay">
-        :host {
+        <div class="modalBox">
-          display: block;
+          <div class="content">
-          font-family: 'Roboto', sans-serif;
+            <consentsoftware-header></consentsoftware-header>
-          color: ${cssManager.bdTheme('#333', '#fff')};
+            <consentsoftware-tabs></consentsoftware-tabs>
-          background: ${cssManager.bdTheme('#eeeeee', '#111')};
+            <div class="text-container" style="padding: 16px;">
-          box-shadow: ${cssManager.bdTheme('0px 0px 15px rgba(0,0,0,0.4)', '0px -30px 30px rgba(0,0,0,1)')};
+              <div class="toptext">
-          position: fixed;
+                This page uses cookies. Please review our
-          bottom: 0px;
+                <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a>
-          border-top: ${cssManager.bdTheme('none', '1px solid  #e4002b')};
+                and choose which cookie level you are willing to accept.
-          left: 0px;
+              </div>
-          width: 100%;
+            </div>
-          box-sizing: border-box;
+            <!-- <div class="button-container">
-          --cookieconsent-height: 60px;
+              <div
-          min-height: var(--cookieconsent-height);
+                class="consent-button"
-          margin-bottom: -${this.heightPixels}px;
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
-          will-change: transform; /* make sure it is rendered efficiently */
+              >
-          z-index: 1000; /* the standard z-index for fixed elements at Lossless */
+                Functional cookies
-        }
+              </div>
-
+              <div
-        :host([show=false]) {
+                class="consent-button"
-          display: none;
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
-        }
+              >
-
+                Analytics cookies
-        :host([show=true]) {
+              </div>
-          display: block;
+              <div
-          transition: margin-bottom 0.3s ease;
+                class="consent-button"
-        }
+                @click=${(event: MouseEvent) =>
-
+                  this.setLevel(event, ['functional', 'analytics', 'marketing'])}
-        :host([gotIt=true]) {
+              >
-          margin-bottom: -${this.heightPixels + 1}px;
+                Marketing cookies
-        }
+              </div>
-
+              <div
-        :host([gotIt=false]) {
+                class="consent-button"
-          margin-bottom: 0px;
+                @click=${(event: MouseEvent) =>
-        }
+                  this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
-      </style>
+              >
-      <div class="content">
+                All cookies
-        <div class="text-container">
+              </div>
-          <div class="icon-container">
+            </div> -->
-            <dees-icon iconName="info"></dees-icon>
+            <consentsoftware-mainselection></consentsoftware-mainselection>
+            <div class="button-container">
+              <div
+                class="consent-button"
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
+              >
+                Deny
+              </div>
+              <div
+                class="consent-button"
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
+              >
+                Accept selection
+              </div>
+              <div
+                class="consent-button"
+                @click=${(event: MouseEvent) =>
+                  this.setLevel(event, ['functional', 'analytics', 'marketing'])}
+              >
+                Accept all cookies
+              </div>
+            </div>
+            <div class="info-container">
+              consent management powered by
+              <a href="https://consent.software">consent.software</a>
+            </div>
           </div>
-          <div class="toptext">This page uses cookies. Please review our <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a> and choose which cookie level you are willing to accept.</div>
-        </div>
-        <div class="button-container">
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional']);}}>Functional cookies</div>
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics']);}}>Analytics cookies</div>
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing']);}}>Marketing cookies</div>
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing', 'all']);}}>All cookies</div>
-        </div>
-        <div class="info-container">
-          consent management powered by <a href="https://consent.software">consent.software</a>
         </div>
       </div>
     `;
   }
 
-  @property({type: Number})
+  /**
-  public heightPixels: number = 60;
+   * Called when the element is inserted into the DOM.
-
+   */
   public async connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('gotIt', 'true');
+    this.updateTheme();
+
     const cookieLevel = await this.csWebclientInstance.getCookieLevels();
-    if(!cookieLevel) {
+    if (!cookieLevel) {
       delayFor(300).then(() => {
         this.setAttribute('show', 'true');
         this.setAttribute('gotIt', 'false');
@@ -215,28 +271,46 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
     }
   }
 
-  public firstUpdated() {
+  /**
-    this.heightPixels = this.shadowRoot.host.clientHeight;
+   * Called after the first render of the component.
-  }
+   * We measure the actual height of the banner and update the CSS variable.
+   */
+  public firstUpdated() {}
 
+  /**
+   * Called whenever the element is updated or re-rendered.
+   */
   public async updated() {
-    console.log(`The height of the cookie banner is ${this.shadowRoot.host.clientHeight}px`);
+    console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
     const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
     if (!this.csWebclientRan && acceptedCookieLevels) {
       this.csWebclientRan = true;
       await this.csWebclientInstance.getAndRunConsentTuples();
     }
-
   }
 
-  
+  /**
-  private async setLevel (event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
+   * Sets the user’s chosen cookie level(s) and hides the banner.
+   */
+  private async setLevel(event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
     console.log(`Set level to ${levelsArg}`);
     await this.csWebclientInstance.setCookieLevels(levelsArg);
     this.setAttribute('gotIt', 'true');
     await delayFor(300);
     this.setAttribute('show', 'false');
+    // After user selection, re-check for any required scripts to run
     this.updated();
   }
 
+  /**
+   * Dynamically switches the theme between light/dark,
+   * respecting `prefers-color-scheme` by default.
+   */
+  private updateTheme() {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    this.theme = prefersDark ? 'dark' : 'light';
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      this.theme = e.matches ? 'dark' : 'light';
+    });
+  }
 }

ts_web/elements/consentsoftware-header.ts

@@ -0,0 +1,36 @@
+import * as shared from './shared.js';
+
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-header')
+export class ConsentsoftwareHeader extends LitElement {
+  public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
+
+  public static styles = css`
+    :host {
+      display: block;
+      line-height: 2em;
+      text-align: center;
+      font-family: ${shared.fontStack};
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .heading {
+      
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="heading">
+        What about cookies?
+      </div>
+    `;
+  }
+}

ts_web/elements/consentsoftware-mainselection.ts

@@ -0,0 +1,62 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-mainselection')
+export class ConsentsoftwareMainSelection extends LitElement {
+  public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`;
+
+  @property({ type: Boolean })
+  public required = false;
+
+  @property({ type: Boolean })
+  public selected = false;
+
+  public static styles = css`
+    :host {
+      display: block;
+      position: relative;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .maincontainer {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    .itemBox {
+      padding: 16px;
+      text-align: center;
+      border-right: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .itemBox:last-child {
+      border-right: none;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <div class="itemBox">
+          <consentsoftware-toggle>Required</consentsoftware-toggle>
+        </div>
+        <div class="itemBox">
+          <consentsoftware-toggle>Preferences</consentsoftware-toggle>
+        </div>
+        <div class="itemBox">
+          <consentsoftware-toggle>Statistics</consentsoftware-toggle>
+        </div>
+        <div class="itemBox">
+          <consentsoftware-toggle>Marketing</consentsoftware-toggle>
+        </div>
+      </div>
+    `;
+  }
+
+  public async getResults(mouseEvent) {}
+}

ts_web/elements/consentsoftware-tabs.ts

@@ -0,0 +1,64 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-tabs')
+export class ConsentsoftwareTabs extends LitElement {
+  public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
+
+  public static styles = css`
+    :host {
+      display: block;
+      position: relative;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .tabs {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .tabs .tab {
+      text-align: center;
+      line-height: 3em;
+      cursor: pointer;
+    }
+
+    .selector {
+      position: absolute;
+      width: calc(100% / 3);
+      height: 1px;
+      left: 0;
+      bottom: 0px;
+      background: orange;
+      transition: all 0.2s;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="tabs">
+        <div class="tab" @click=${this.handleClick}>Consent</div>
+        <div class="tab" @click=${this.handleClick}>Details</div>
+        <div class="tab" @click=${this.handleClick}>About Cookies</div>
+      </div>
+      <div class="selector"></div>
+    `;
+  }
+
+  public async handleClick(mouseEvent) {
+    const target = mouseEvent.target as HTMLElement;
+    const tab: HTMLDivElement = target.closest('.tab');
+    if (tab) {
+      const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
+      if (selector) {
+        selector.style.left = `${tab.offsetLeft}px`;
+        selector.style.width = `${tab.offsetWidth}px`;
+      }
+    }
+  }
+}

ts_web/elements/consentsoftware-toggle.ts

@@ -0,0 +1,96 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-toggle')
+export class ConsentsoftwareToggle extends LitElement {
+  public static demo = () => html`<consentsoftware-toggle></consentsoftware-toggle>`;
+
+  @property({ type: Boolean })
+  public required = false;
+
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
+  public static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    .label {
+      margin-bottom: 16px;
+    }
+
+    .toggleKnobArea {
+      cursor: pointer;
+      margin: auto;
+      height: 30px;
+      width: 60px;
+      border-radius: 15px;
+      background: rgba(255, 255, 255, 0.1);
+      position: relative;
+      overflow: hidden;
+      transition: all 0.2s;
+    }
+
+    :host([selected]) .toggleKnobArea {
+      background: blue;
+    }
+
+    .toggleKnobMover {
+      transition: all 0.2s;
+    }
+
+    .toggleKnobInner {
+      height: 30px;
+      width: 30px;
+      border-radius: 15px;
+      background: rgba(255, 255, 255, 0.5);
+      position: absolute;
+      top: 0;
+      left: 0;
+      transition: all 0.2s;
+      transform: scale(0.8);
+    }
+
+    :host([selected]) .toggleKnobInner {
+      background: white;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="label">${this.getText()}</div>
+      <div class="toggle" @click=${this.handleClick}>
+        <div class="toggleKnobArea">
+          <div class="toggleKnobMover">
+            <div class="toggleKnobInner"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async handleClick(mouseEvent) {
+    this.selected = !this.selected;
+    mouseEvent.stopPropagation();
+    mouseEvent.preventDefault();
+    this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
+    console.log(`Selected ${this.selected}`);
+    const moverElement: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobMover');
+    if (this.selected) {
+      moverElement.style.transform = 'translateX(30px)';
+    } else {
+      moverElement.style.transform = 'translateX(0px)';
+    }
+  }
+
+  public getText() {
+    return this.textContent;
+  }
+}

ts_web/elements/index.ts

@@ -1 +1,5 @@
 export * from './consentsoftware-cookieconsent.js';
+export * from './consentsoftware-header.js';
+export * from './consentsoftware-mainselection.js';
+export * from './consentsoftware-toggle.js';
+export * from './consentsoftware-tabs.js';

ts_web/elements/shared.ts

@@ -0,0 +1,3 @@
+import { unsafeCSS } from 'lit'
+
+export const fontStack = unsafeCSS('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');