2.3.2

.gitlab-ci.yml

@@ -12,30 +12,38 @@ stages:
   - release
   - metadata
 
+before_script:
+  - pnpm install -g pnpm
+  - pnpm install -g @shipzone/npmci
+  - npmci npm prepare
+
 # ====================
 # security stage
 # ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-audit:
+# ====================
+# security stage
+# ====================
+auditProductionDependencies:
   image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
   stage: security
   script:
-    - npmci npm prepare
-    - npmci command npm install --ignore-scripts
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high
+     - npmci command npm config set registry https://registry.npmjs.org
+     - npmci command pnpm audit --audit-level=high --prod
   tags:
     - lossless
     - docker
-    - notpriv
+  allow_failure: true
+
+auditDevDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command pnpm audit --audit-level=high --dev
+  tags:
+    - lossless
+    - docker
+  allow_failure: true
 
 # ====================
 # test stage
@@ -44,28 +52,22 @@ audit:
 testStable:
   stage: test
   script:
-    - npmci npm prepare
     - npmci node install stable
     - npmci npm install
     - npmci npm test
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - priv
 
 testBuild:
   stage: test
   script:
-    - npmci npm prepare
     - npmci node install stable
     - npmci npm install
-    - npmci command npm run build
+    - npmci npm build
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - notpriv
 
 release:
   stage: release
@@ -85,11 +87,12 @@ release:
 codequality:
   stage: metadata
   allow_failure: true
+  only:
+    - tags
   script:
-    - npmci command npm install -g tslint typescript
+    - npmci command npm install -g typescript
     - npmci npm prepare
     - npmci npm install
-    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
   tags:
     - lossless
     - docker
@@ -109,11 +112,9 @@ trigger:
 pages:
   stage: metadata
   script:
-    - npmci node install lts
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
+    - npmci node install stable
     - npmci npm install
-    - npmci command tsdoc
+    - npmci command npm run buildDocs
   tags:
     - lossless
     - docker

.vscode/launch.json

@@ -2,28 +2,10 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "current file",
-      "type": "node",
+      "command": "npm test",
+      "name": "Run npm test",
       "request": "launch",
-      "args": [
-        "${relativeFile}"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "name": "test.ts",
-      "type": "node",
-      "request": "launch",
-      "args": [
-        "test/test.ts"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
+      "type": "node-terminal"
     }
   ]
 }

.vscode/settings.json

@@ -15,7 +15,7 @@
             "properties": {
               "projectType": {
                 "type": "string",
-                "enum": ["website", "element", "service", "npm"]
+                "enum": ["website", "element", "service", "npm", "wcc"]
               }
             }
           }

changelog.md

@@ -0,0 +1,358 @@
+# Changelog
+
+## 2025-02-01 - 2.3.2 - fix(scroller)
+Rename method from scrollToElement to toElement for consistency
+
+- Updated method name in Scroller class for better coherence with existing naming conventions.
+
+## 2025-01-31 - 2.3.1 - fix(scroller)
+Removed passive option from scroll event listener
+
+- The 'passive: true' option was removed from the native scroll event listener attachment.
+
+## 2025-01-31 - 2.3.0 - feat(scroller)
+Enhance Scroller class with callback execution and adaptive scroll listener
+
+- Added support for executing scroll callbacks in the Scroller class.
+- Integrated adaptive scrolling mechanism using Lenis, with native smooth scrolling detection.
+- Ensured seamless switching between native scroll listener and Lenis scroll listener.
+
+## 2025-01-31 - 2.2.0 - feat(core)
+Enhance scrolling capabilities by integrating Scroller class and adding lenis support
+
+- Replaced SweetScroll setup in domtools.classes.domtools.ts with Scroller class.
+- Moved SweetScroll initialization and methods to new Scroller class.
+- Added lenis support in the Scroller class for enhanced scrolling capabilities.
+- Updated dev and dependencies versions in package.json.
+
+## 2025-01-09 - 2.1.1 - fix(themamanager)
+Fixed automatic global theme change subscription for background updates.
+
+- Corrected the logic for updating the document's background color upon theme changes using themeObservable subscription.
+
+## 2025-01-09 - 2.1.0 - feat(themeManager)
+Exposed method to enable automatic global theme change.
+
+- Enable easier application of dark and bright themes by exposing a method.
+- Updated devDependencies and dependencies in package.json to latest versions.
+
+## 2024-10-21 - 2.0.65 - fix(ThemeManager)
+Refactor ThemeManager class to separate global style setting logic
+
+- Moved logic to set global styles into a dedicated function setGlobalStylesOnPurpose in ThemeManager.
+
+## 2024-10-06 - 2.0.64 - fix(pluginexports)
+Add missing import for smartrouter in pluginexports.
+
+- Fixed a missing import for smartrouter in ts/domtools.pluginexports.ts.
+
+## 2024-10-06 - 2.0.63 - fix(dependencies)
+Update @push.rocks/smartrouter to version ^1.3.2 for better compatibility
+
+- Updated @push.rocks/smartrouter from version ^1.2.1 to ^1.3.2 in package.json.
+
+## 2024-10-06 - 2.0.62 - fix(dependencies)
+Update dependencies to resolve potential issues and improve stability
+
+
+## 2024-10-04 - 2.0.61 - fix(core)
+Correct import statement for SweetScroll.
+
+- Fix import syntax for SweetScroll in domtools.pluginexports.ts
+
+## 2024-10-02 - 2.0.60 - fix(dependencies)
+Update dependencies to latest versions
+
+- Bump @git.zone/tsbuild version from 2.1.82 to 2.1.84
+- Bump @push.rocks/tapbundle version from 5.0.23 to 5.3.0
+- Bump @types/node version from 20.14.9 to 22.7.4
+- Bump @api.global/typedrequest version from 3.0.30 to 3.0.32
+- Bump @push.rocks/smartstate version from 2.0.17 to 2.0.18
+- Bump lit version from 3.1.4 to 3.2.0
+
+## 2024-10-02 - 2.0.59 - fix(core)
+Refactor plugin exports to improve modularity
+
+- Refactored the plugin exports to be more modular and organized.
+- Replaced redundant plugin object definition in ts/index.ts with a simpler import and export pattern.
+
+## 2024-07-01 - 2.0.58 - fix(dependencies)
+Update dependencies and correct font family in styles
+
+- Updated @git.zone/tsbuild to ^2.1.82
+- Updated @git.zone/tstest to ^1.0.90
+- Updated @push.rocks/tapbundle to ^5.0.23
+- Updated @types/node to ^20.14.9
+- Updated @api.global/typedrequest to ^3.0.30
+- Updated @design.estate/dees-comms to ^1.0.27
+- Updated @push.rocks/lik to ^6.0.15
+- Updated @push.rocks/smartjson to ^5.0.20
+- Updated @push.rocks/smartpromise to ^4.0.4
+- Updated @push.rocks/webrequest to ^3.0.37
+- Updated @push.rocks/webstore to ^2.0.20
+- Updated lit to ^3.1.4
+- Updated default font family to 'Geist Sans', 'Inter', sans-serif
+
+## 2024-04-20 - 2.0.57 - Documentation
+Update to project documentation
+
+- Updated existing documentation to reflect recent changes
+
+## 2023-10-23 - 2.0.42...2.0.55 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2023-10-07 - 2.0.41...2.0.51 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2023-09-17 - 2.0.40 - Core
+Fixes in core functionality
+
+- Fix(core): update
+
+## 2023-08-07 - 2.0.36...2.0.38 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2023-04-05 - 2.0.28...2.0.30 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2023-01-07 - 2.0.26...2.0.27 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2022-12-31 - 2.0.24...2.0.25 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2022-08-01 - 2.0.22...2.0.23 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2022-05-01 - 2.0.19...2.0.21 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2022-04-22 - 2.0.18...2.0.19 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2022-04-21 - 2.0.10...2.0.17 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2022-03-18 - 2.0.0 - Core
+Major release
+
+- Fix(core): update
+
+## 2021-11-21 - 1.0.98...1.0.99 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2021-09-16 - 1.0.94...1.0.95 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2021-09-08 - 1.0.91...1.0.93 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2021-09-01 - 1.0.89...1.0.90 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2021-08-19 - 1.0.87 - Core
+Fixes in core functionality
+
+- Fix(core): update
+
+## 2021-03-10 - 1.0.84...1.0.86 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-12-07 - 1.0.79...1.0.83 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-11-30 - 1.0.74...1.0.77 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-11-24 - 1.0.66...1.0.70 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-11-23 - 1.0.64...1.0.65 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2020-11-06 - 1.0.61...1.0.63 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-10-07 - 1.0.53...1.0.55 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-09-16 - 1.0.49...1.0.52 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-09-13 - 1.0.45...1.0.47 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-09-12 - 1.0.41...1.0.44 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-07-27 - 1.0.38...1.0.40 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-06-28 - 1.0.29...1.0.36 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-06-03 - 1.0.26...1.0.28 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-05-28 - 1.0.21...1.0.25 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-05-27 - 1.0.18...1.0.20 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-05-26 - 1.0.16...1.0.17 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2020-05-25 - 1.0.14...1.0.15 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+
+## 2020-05-24 - 1.0.11...1.0.13 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...
+
+## 2020-05-23 - 1.0.3...1.0.10 - Core
+Multiple updates and fixes
+
+- Fix(core): update
+- Fix(core): update
+- Fix(core): update
+- ...

license

@@ -1,4 +1,5 @@
 Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2017 Nathan Friend (ts-keycode-enum)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

npmextra.json

@@ -2,17 +2,36 @@
   "gitzone": {
     "projectType": "npm",
     "module": {
-      "githost": "gitlab.com",
-      "gitscope": "designestate",
+      "githost": "code.foss.global",
+      "gitscope": "design.estate",
       "gitrepo": "dees-domtools",
-      "shortDescription": "tools to simplify complex css structures",
-      "npmPackagename": "@designestate/dees-domtools",
+      "description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
+      "npmPackagename": "@design.estate/dees-domtools",
       "license": "MIT",
-      "projectDomain": "design.estate"
+      "projectDomain": "design.estate",
+      "keywords": [
+        "CSS tools",
+        "web development",
+        "TypeScript support",
+        "CSS structure simplification",
+        "web components",
+        "theme management",
+        "DOM manipulation",
+        "responsive design",
+        "design system",
+        "lit element",
+        "keyboard event handling",
+        "state management",
+        "routing",
+        "performance optimization"
+      ]
     }
   },
   "npmci": {
     "npmGlobalTools": [],
     "npmAccessLevel": "public"
+  },
+  "tsdoc": {
+    "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
   }
 }

package.json

@@ -1,31 +1,45 @@
 {
-  "name": "@designestate/dees-domtools",
-  "version": "1.0.25",
+  "name": "@design.estate/dees-domtools",
+  "version": "2.3.2",
   "private": false,
-  "description": "tools to simplify complex css structures",
+  "description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
+  "type": "module",
   "author": "Lossless GmbH",
   "license": "MIT",
   "scripts": {
     "test": "(tstest test/ --web)",
-    "build": "(tsbuild --web && tsbundle npm)",
-    "format": "(gitzone format)"
+    "build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
+    "format": "(gitzone format)",
+    "buildDocs": "tsdoc"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.0.22",
-    "@gitzone/tsbundle": "^1.0.69",
-    "@gitzone/tstest": "^1.0.15",
-    "@pushrocks/tapbundle": "^3.0.7",
-    "@types/node": "^14.0.5",
-    "tslint": "^6.1.2",
-    "tslint-config-prettier": "^1.15.0"
+    "@git.zone/tsbuild": "^2.2.1",
+    "@git.zone/tsbundle": "^2.2.5",
+    "@git.zone/tstest": "^1.0.96",
+    "@push.rocks/tapbundle": "^5.5.6",
+    "@types/node": "^22.12.0"
   },
   "dependencies": {
-    "@pushrocks/lik": "^4.0.13",
-    "@pushrocks/smartpromise": "^3.0.6",
-    "@pushrocks/smartstate": "^1.0.16",
-    "lit-element": "^2.3.1"
+    "@api.global/typedrequest": "^3.1.10",
+    "@design.estate/dees-comms": "^1.0.27",
+    "@push.rocks/lik": "^6.1.0",
+    "@push.rocks/smartdelay": "^3.0.5",
+    "@push.rocks/smartjson": "^5.0.20",
+    "@push.rocks/smartmarkdown": "^3.0.3",
+    "@push.rocks/smartpromise": "^4.2.2",
+    "@push.rocks/smartrouter": "^1.3.2",
+    "@push.rocks/smartrx": "^3.0.7",
+    "@push.rocks/smartstate": "^2.0.19",
+    "@push.rocks/smartstring": "^4.0.15",
+    "@push.rocks/smarturl": "^3.1.0",
+    "@push.rocks/webrequest": "^3.0.37",
+    "@push.rocks/websetup": "^3.0.19",
+    "@push.rocks/webstore": "^2.0.20",
+    "lenis": "^1.1.20",
+    "lit": "^3.2.1",
+    "sweet-scroll": "^4.0.0"
   },
   "files": [
     "ts/**/*",
@@ -38,5 +52,24 @@
     "cli.js",
     "npmextra.json",
     "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
+  ],
+  "keywords": [
+    "CSS tools",
+    "web development",
+    "TypeScript support",
+    "CSS structure simplification",
+    "web components",
+    "theme management",
+    "DOM manipulation",
+    "responsive design",
+    "design system",
+    "lit element",
+    "keyboard event handling",
+    "state management",
+    "routing",
+    "performance optimization"
   ]
 }

readme.hints.md

@@ -0,0 +1 @@
+ 

readme.md

@@ -1,32 +1,116 @@
-# @designestate/dees-domtools
+# @design.estate/dees-domtools
 tools to simplify complex css structures
 
-## Availabililty and Links
-* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-domtools)
-* [gitlab.com (source)](https://gitlab.com/designestate/dees-domtools)
-* [github.com (source mirror)](https://github.com/designestate/dees-domtools)
-* [docs (typedoc)](https://designestate.gitlab.io/dees-domtools/)
+## Install
 
-## Status for master
-[![pipeline status](https://gitlab.com/designestate/dees-domtools/badges/master/pipeline.svg)](https://gitlab.com/designestate/dees-domtools/commits/master)
-[![coverage report](https://gitlab.com/designestate/dees-domtools/badges/master/coverage.svg)](https://gitlab.com/designestate/dees-domtools/commits/master)
-[![npm downloads per month](https://img.shields.io/npm/dm/@designestate/dees-domtools.svg)](https://www.npmjs.com/package/@designestate/dees-domtools)
-[![Known Vulnerabilities](https://snyk.io/test/npm/@designestate/dees-domtools/badge.svg)](https://snyk.io/test/npm/@designestate/dees-domtools)
-[![TypeScript](https://img.shields.io/badge/TypeScript->=%203.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-ff69b4.svg)](https://prettier.io/)
+To install `@design.estate/dees-domtools`, simply use npm:
+
+```bash
+npm install --save @design.estate/dees-domtools
+```
+
+Ensure your project supports TypeScript and ESM syntax for the best development experience.
 
 ## Usage
 
-Use TypeScript for best in class intellisense
+This documentation aims to give you comprehensive guidance on how to utilize `@design.estate/dees-domtools` in your web projects to simplify complex CSS structures. Whether you're building a sophisticated web application or need a more manageable way to handle your CSS, this toolkit offers a variety of features designed to enhance and streamline your workflow. Throughout this guide, we'll cover the installation process, key features, examples, and best practices when working with `@design.estate/dees-domtools`.
 
-## Contribution
+Before diving into the examples, please ensure that you've completed the installation step as described above.
 
-We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
+### Key Features
 
-For further information read the linked docs at the top of this readme.
+- **CSS Simplification**: Tools and utilities designed to abstract and simplify the handling of complex CSS structures.
+- **Responsive Design Helpers**: Tools for managing responsive designs more easily, with utilities for breakpoints, and adaptable grids.
+- **Element Utilities**: Simplified interactions with DOM elements, including dynamic style manipulations and more.
+- **Theme Management**: Simplify the process of theme toggling (dark mode/light mode) in your applications.
+- **Keyboard Event Handling**: Utilities for managing keyboard events, facilitating better interaction handling.
+- **External Resources Management**: Easily manage external CSS and JavaScript resources within your project.
 
-> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
-| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
+### Getting Started
 
-[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)
+To get started with `@design.estate/dees-domtools`, you first need to import the modules you intend to use in your project. Here's a simple example to illustrate how to import and use the package:
+
+```typescript
+import { DomTools, elementBasic, breakpoints, css } from '@design.estate/dees-domtools';
+
+// Setting up DomTools for your application
+const domToolsInstance = await DomTools.setupDomTools();
+
+// Example: Using elementBasic utilities
+elementBasic.setup();
+```
+
+### Simplifying CSS with CSS Utilities
+
+The package offers a variety of CSS utilities that simplify the handling of complex CSS structures. Here's how you can use them in your project:
+
+```typescript
+import { css } from '@design.estate/dees-domtools';
+
+// Example: Creating a CSS grid with a specified number of columns and gap size
+const gridStyles = css.cssGridColumns(3, 10); // 3 columns with a 10px gap
+```
+
+### Managing Responsive Design
+
+Responsive design is critical for modern web development. `@design.estate/dees-domtools` provides utilities to make it easier to manage responsive designs and breakpoints.
+
+```typescript
+import { breakpoints } from '@design.estate/dees-domtools';
+
+// Example: Applying styles for different viewport sizes
+const tabletStyles = breakpoints.cssForTablet(myCssStyles);
+const phoneStyles = breakpoints.cssForPhone(myCssStyles);
+```
+
+### Theme Management
+
+Managing themes (such as toggling between dark and light mode) is simplified with the built-in theme management tools.
+
+```typescript
+// Toggle between light and dark themes
+domToolsInstance.themeManager.toggleDarkBright();
+```
+
+### Handling Keyboard Events
+
+Keyboard event handling is made easy with the utilities provided by the toolkit. This can be particularly useful for adding keyboard navigation and shortcuts.
+
+```typescript
+import { Keyboard } from '@design.estate/dees-domtools';
+
+// Initialize keyboard handling
+const keyboard = new Keyboard(document.body);
+
+// Bind an event to a specific key combination
+keyboard.on([Keyboard.Key.Ctrl, Keyboard.Key.S]).subscribe(() => {
+  console.log('Ctrl+S was pressed');
+});
+```
+
+### Best Practices
+
+- **Organize Your CSS**: Use the provided CSS utilities to structure your styles in a way that makes them easy to maintain and scale.
+- **Embrace Responsiveness**: Leverage the responsive design helpers to ensure your application looks great on any device.
+- **Consistent Theme Handling**: Utilize the theme management tools to provide a seamless experience for your users, allowing them to choose their preferred theme.
+
+By integrating `@design.estate/dees-domtools` into your project, you can leverage a comprehensive suite of utilities designed to simplify complex CSS structures and enhance your web development workflow.
+
+## License and Legal Information
+
+This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. 
+
+**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
+
+### Trademarks
+
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
+
+### Company Information
+
+Task Venture Capital GmbH  
+Registered at District court Bremen HRB 35230 HB, Germany
+
+For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
+
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

test/test.browser.ts

@@ -0,0 +1,9 @@
+import { expect, tap } from '@push.rocks/tapbundle';
+import * as domtools from '../ts/index.js';
+
+tap.test('first test', async () => {
+  const domtoolsInstance = await domtools.DomTools.setupDomTools();
+  expect(domtoolsInstance).toBeInstanceOf(domtools.DomTools);
+});
+
+tap.start();

test/test.ts

@@ -1,8 +0,0 @@
-import { expect, tap } from '@pushrocks/tapbundle';
-import * as deesCsstools from '../ts/index';
-
-tap.test('first test', async () => {
-  console.log('hi');
-});
-
-tap.start();

ts/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @push.rocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/dees-domtools',
+  version: '2.3.2',
+  description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
+}

ts/domtools.breakpoints.ts

@@ -1,68 +0,0 @@
-import { DomTools } from './domtools.classes.domtools';
-
-export const desktop = 1240;
-export const tablet = 700;
-export const phablet = 500;
-export const phone = 340;
-
-export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
-
-export const getEnvironment = (): TViewport => {
-  if (globalThis.deesDomTools && globalThis.deesDomTools.domToolsStatePart.getState().virtualViewport) {
-    return globalThis.deesDomTools.domToolsStatePart.getState().virtualViewport;
-  } else {
-    return 'native';
-  }
-};
-
-export const cssForTablet = (contentArg) => {
-  if (getEnvironment() === 'native' || getEnvironment() === 'desktop') {
-    return `
-      @media (max-width: ${tablet}px) {
-        ${contentArg}
-      }
-    `;
-  } else if (
-    getEnvironment() === 'tablet' ||
-    getEnvironment() === 'phablet' ||
-    getEnvironment() === 'phone'
-  ) {
-    return `
-      @media (min-width: 0px) {
-        ${contentArg}
-      }
-    `;
-  }
-};
-
-export const cssForPhablet = (contentArg) => {
-  if (getEnvironment() === 'native' || getEnvironment() === 'desktop') {
-    return `
-      @media (max-width: ${phablet}px) {
-        ${contentArg}
-      }
-    `;
-  } else if (getEnvironment() === 'phablet' || getEnvironment() === 'phone') {
-    return `
-      @media (min-width: 0px) {
-        ${contentArg}
-      }
-    `;
-  }
-};
-
-export const cssForPhone = (contentArg) => {
-  if (getEnvironment() === 'native' || getEnvironment() === 'desktop') {
-    return `
-      @media (max-width: ${phone}px) {
-        ${contentArg}
-      }
-    `;
-  } else if (getEnvironment() === 'phone') {
-    return `
-      @media (min-width: 0px) {
-        ${contentArg}
-      }
-    `;
-  }
-};

ts/domtools.classes.domtools.ts

@@ -1,18 +1,32 @@
-import * as plugins from './domtools.plugins';
-import { Stringmap } from '@pushrocks/lik/dist_ts/lik.stringmap';
-import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap';
-import { TViewport } from './domtools.breakpoints';
+import * as plugins from './domtools.plugins.js';
+import { type TViewport } from './domtools.css.breakpoints.js';
+import { Scroller } from './domtools.classes.scroller.js';
+import { WebSetup } from '@push.rocks/websetup';
+import { ThemeManager } from './domtools.classes.thememanager.js';
+import { Keyboard } from './domtools.classes.keyboard.js';
 
 export interface IDomToolsState {
   virtualViewport: TViewport;
+  jwt: string;
+}
+
+export interface IDomToolsContructorOptions {
+  ignoreGlobal?: boolean;
 }
 
 export class DomTools {
-  public static async setupDomTools() {
+  // ======
+  // STATIC
+  // ======
+  /**
+   * setups domtools
+   */
+  public static async setupDomTools(optionsArg: IDomToolsContructorOptions = {}) {
     let domToolsInstance: DomTools;
-    if (!globalThis.deesDomTools) {
-      globalThis.deesDomTools = new DomTools();
+    if (!globalThis.deesDomTools && !optionsArg.ignoreGlobal) {
+      globalThis.deesDomTools = new DomTools(optionsArg);
       domToolsInstance = globalThis.deesDomTools;
+
       // lets make sure the dom is ready
       const readyStateChangedFunc = () => {
         if (document.readyState === 'interactive' || document.readyState === 'complete') {
@@ -23,6 +37,8 @@ export class DomTools {
       };
       document.addEventListener('readystatechange', readyStateChangedFunc);
       domToolsInstance.domToolsReady.resolve();
+    } else if (optionsArg.ignoreGlobal) {
+      domToolsInstance = new DomTools(optionsArg);
     } else {
       domToolsInstance = globalThis.deesDomTools;
     }
@@ -30,48 +46,70 @@ export class DomTools {
     return domToolsInstance;
   }
 
-  public smartstate = new plugins.smartstate.Smartstate();
-  public domToolsStatePart = this.smartstate.getStatePart<IDomToolsState>('domtools', {
-    virtualViewport: 'native'
-  });
-
-  public actionSetVirtualViewport = this.domToolsStatePart.createAction<TViewport>(async (statePart, payload) => {
-    const currentState = statePart.getState();
-    currentState.virtualViewport = payload;
-    return currentState;
-  });
-
-  public domToolsReady = plugins.smartpromise.defer();
-  public domReady = plugins.smartpromise.defer();
-  public globalStylesReady = plugins.smartpromise.defer();
+  /**
+   * if you can, use the static asysnc .setupDomTools() function instead since it is safer to use.
+   */
+  public static getGlobalDomToolsSync(): DomTools {
+    const globalDomTools: DomTools = globalThis.deesDomTools;
+    if (!globalDomTools) {
+      throw new Error('You tried to access domtools synchronously too early');
+    }
+    return globalThis.deesDomTools;
+  }
 
+  // ========
+  // INSTANCE
+  // ========
   // elements
   public elements: {
     headElement: HTMLElement;
     bodyElement: HTMLElement;
   } = {
     headElement: null,
-    bodyElement: null
+    bodyElement: null,
   };
 
-  constructor() {
-    
-  }
+  public websetup: WebSetup = new WebSetup({
+    metaObject: {
+      title: 'loading...',
+    },
+  });
 
-  public async setGlobalStyles(stylesText: string) {
-    await this.domReady.promise;
-    const styleElement = document.createElement('style');
-    styleElement.type = 'text/css';
-    styleElement.appendChild(document.createTextNode(stylesText));
-    this.elements.headElement.appendChild(styleElement);
-  }
+  public smartstate = new plugins.smartstate.Smartstate();
+  public domToolsStatePart = this.smartstate.getStatePart<IDomToolsState>('domtools', {
+    virtualViewport: 'native',
+    jwt: null,
+  });
+
+  public router = new plugins.smartrouter.SmartRouter({
+    debug: false,
+  });
+
+  public convenience = {
+    typedrequest: plugins.typedrequest,
+    smartdelay: plugins.smartdelay,
+    smartjson: plugins.smartjson,
+    smarturl: plugins.smarturl,
+  };
+
+  public deesComms = new plugins.deesComms.DeesComms();
+  public scroller = new Scroller(this);
+  public themeManager = new ThemeManager(this);
+  public keyboard = new Keyboard(document.body);
+
+  public domToolsReady = plugins.smartpromise.defer();
+  public domReady = plugins.smartpromise.defer();
+  public globalStylesReady = plugins.smartpromise.defer();
+
+  constructor(optionsArg: IDomToolsContructorOptions) {}
+
+  private runOnceTrackerStringMap = new plugins.lik.Stringmap();
+  private runOnceResultMap = new plugins.lik.FastMap();
 
-  private runOnceTrackerStringMap = new Stringmap();
-  private runOnceResultMap = new FastMap();
   /**
    * run a function once and always get the Promise of the first execution
-   * @param identifierArg
-   * @param funcArg
+   * @param identifierArg the indentifier arg identifies functions. functions with the same identifier are considered equal
+   * @param funcArg the actual func arg to run
    */
   public async runOnce<T>(identifierArg: string, funcArg: () => Promise<T>) {
     const runningId = `${identifierArg}+runningCheck`;
@@ -83,7 +121,7 @@ export class DomTools {
       this.runOnceTrackerStringMap.removeString(runningId);
     }
     return await this.runOnceTrackerStringMap.registerUntilTrue(
-      stringMap => {
+      (stringMap) => {
         return !stringMap.includes(runningId);
       },
       () => {
@@ -92,7 +130,54 @@ export class DomTools {
     );
   }
 
-  setVirtualViewport(environmentArg: TViewport) {
-    this.domToolsStatePart.dispatchAction(this.actionSetVirtualViewport, environmentArg);
+  // setStuff
+  /**
+   * allows to set global styles
+   * @param stylesText the css text you want to set
+   */
+  public async setGlobalStyles(stylesText: string) {
+    await this.domReady.promise;
+    const styleElement = document.createElement('style');
+    styleElement.type = 'text/css';
+    styleElement.appendChild(document.createTextNode(stylesText));
+    this.elements.headElement.appendChild(styleElement);
+  }
+
+  /**
+   * allows to set global styles
+   * @param stylesText the css text you want to set
+   */
+  public async setExternalScript(scriptLinkArg: string) {
+    await this.domReady.promise;
+    const done = plugins.smartpromise.defer();
+    const script = document.createElement('script');
+    script.src = scriptLinkArg;
+    script.addEventListener('load', function () {
+      done.resolve();
+    });
+    const parentNode = document.head || document.body;
+    parentNode.append(script);
+    await done.promise;
+  }
+
+  /**
+   * allows setting external css files
+   * @param cssLinkArg a url to an external stylesheet
+   */
+  public async setExternalCss(cssLinkArg: string) {
+    const cssTag = document.createElement('link');
+    cssTag.rel = 'stylesheet';
+    cssTag.crossOrigin = 'anonymous';
+    cssTag.href = cssLinkArg;
+    document.head.append(cssTag);
+  }
+
+  /**
+   * allows setting of website infos
+   * @param optionsArg the website info
+   */
+  public async setWebsiteInfo(optionsArg: plugins.websetup.IWebSetupConstructorOptions) {
+    await this.websetup.setup(optionsArg);
+    await this.websetup.readyPromise;
   }
 }

ts/domtools.classes.keyboard.ts

@@ -0,0 +1,213 @@
+import * as plugins from './domtools.plugins.js';
+
+export enum Key {
+  Backspace = 8,
+  Tab = 9,
+  Enter = 13,
+  Shift = 16,
+  Ctrl = 17,
+  Alt = 18,
+  PauseBreak = 19,
+  CapsLock = 20,
+  Escape = 27,
+  Space = 32,
+  PageUp = 33,
+  PageDown = 34,
+  End = 35,
+  Home = 36,
+
+  LeftArrow = 37,
+  UpArrow = 38,
+  RightArrow = 39,
+  DownArrow = 40,
+
+  Insert = 45,
+  Delete = 46,
+
+  Zero = 48,
+  ClosedParen = Zero,
+  One = 49,
+  ExclamationMark = One,
+  Two = 50,
+  AtSign = Two,
+  Three = 51,
+  PoundSign = Three,
+  Hash = PoundSign,
+  Four = 52,
+  DollarSign = Four,
+  Five = 53,
+  PercentSign = Five,
+  Six = 54,
+  Caret = Six,
+  Hat = Caret,
+  Seven = 55,
+  Ampersand = Seven,
+  Eight = 56,
+  Star = Eight,
+  Asterik = Star,
+  Nine = 57,
+  OpenParen = Nine,
+
+  A = 65,
+  B = 66,
+  C = 67,
+  D = 68,
+  E = 69,
+  F = 70,
+  G = 71,
+  H = 72,
+  I = 73,
+  J = 74,
+  K = 75,
+  L = 76,
+  M = 77,
+  N = 78,
+  O = 79,
+  P = 80,
+  Q = 81,
+  R = 82,
+  S = 83,
+  T = 84,
+  U = 85,
+  V = 86,
+  W = 87,
+  X = 88,
+  Y = 89,
+  Z = 90,
+
+  LeftWindowKey = 91,
+  RightWindowKey = 92,
+  SelectKey = 93,
+
+  Numpad0 = 96,
+  Numpad1 = 97,
+  Numpad2 = 98,
+  Numpad3 = 99,
+  Numpad4 = 100,
+  Numpad5 = 101,
+  Numpad6 = 102,
+  Numpad7 = 103,
+  Numpad8 = 104,
+  Numpad9 = 105,
+
+  Multiply = 106,
+  Add = 107,
+  Subtract = 109,
+  DecimalPoint = 110,
+  Divide = 111,
+
+  F1 = 112,
+  F2 = 113,
+  F3 = 114,
+  F4 = 115,
+  F5 = 116,
+  F6 = 117,
+  F7 = 118,
+  F8 = 119,
+  F9 = 120,
+  F10 = 121,
+  F11 = 122,
+  F12 = 123,
+
+  NumLock = 144,
+  ScrollLock = 145,
+
+  SemiColon = 186,
+  Equals = 187,
+  Comma = 188,
+  Dash = 189,
+  Period = 190,
+  UnderScore = Dash,
+  PlusSign = Equals,
+  ForwardSlash = 191,
+  Tilde = 192,
+  GraveAccent = Tilde,
+
+  OpenBracket = 219,
+  ClosedBracket = 221,
+  Quote = 222,
+}
+
+export class Keyboard {
+  private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
+  private pressedKeys = new Set<Key>();
+
+  constructor(private domNode: Element | Document) {
+    this.startListening();
+  }
+
+  public keyEnum = Key;
+
+  public on(keys: Key[]) {
+    const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
+    this.registerKeys(keys, subject);
+    return subject;
+  }
+
+  public triggerKeyPress(keysArg: Key[]) {
+    for (const key of keysArg) {
+      this.pressedKeys.add(key);
+    }
+    this.checkMatchingKeyboardSubjects();
+    for (const key of keysArg) {
+      this.pressedKeys.delete(key);
+    }
+  }
+
+  public startListening() {
+    this.domNode.addEventListener('keydown', this.handleKeyDown);
+    this.domNode.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  public stopListening() {
+    this.domNode.removeEventListener('keydown', this.handleKeyDown);
+    this.domNode.removeEventListener('keyup', this.handleKeyUp);
+  }
+
+  public clear() {
+    this.stopListening();
+    this.mapCombosToHandlers.clear();
+    this.pressedKeys.clear();
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    this.pressedKeys.add(event.keyCode);
+    this.checkMatchingKeyboardSubjects(event);
+  };
+
+  private checkMatchingKeyboardSubjects(payloadArg?) {
+    this.mapCombosToHandlers.forEach((subjectArg, keysArg) => {
+      if (this.areAllKeysPressed(keysArg)) {
+        subjectArg.next(payloadArg);
+      }
+    });
+  }
+
+  private handleKeyUp = (event: KeyboardEvent) => {
+    this.pressedKeys.delete(event.keyCode);
+  };
+
+  private areAllKeysPressed(keysArg: Key[]) {
+    let result = true;
+
+    keysArg.forEach((key) => {
+      if (!this.pressedKeys.has(key)) {
+        result = false;
+      }
+    });
+
+    return result;
+  }
+
+  private registerKeys(
+    keysArg: Array<Key>,
+    subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
+  ) {
+    if (!this.mapCombosToHandlers.has(keysArg)) {
+      this.mapCombosToHandlers.set(keysArg, subjectArg);
+    } else {
+      const subject = this.mapCombosToHandlers.get(keysArg);
+      return subject;
+    }
+  }
+}

ts/domtools.classes.router.ts

@@ -1 +0,0 @@
-import * as plugins from './domtools.plugins';

ts/domtools.classes.scroller.ts

@@ -0,0 +1,175 @@
+import type { DomTools } from './domtools.classes.domtools.js';
+import * as plugins from './domtools.plugins.js';
+
+export class Scroller {
+  public domtoolsInstance: DomTools;
+
+  // Array to store scroll callback functions.
+  private scrollCallbacks: Array<() => void> = [];
+
+  // Lenis instance (if activated) or null.
+  private lenisInstance: plugins.Lenis | null = null;
+
+  // Bound handlers to allow removal from event listeners.
+  private handleNativeScroll = (event: Event): void => {
+    this.executeScrollCallbacks();
+  };
+
+  private handleLenisScroll = (info: any): void => {
+    this.executeScrollCallbacks();
+  };
+
+  constructor(domtoolsInstanceArg: DomTools) {
+    this.domtoolsInstance = domtoolsInstanceArg;
+    // Attach the native scroll listener by default.
+    this.attachNativeScrollListener();
+  }
+
+  private sweetScroller = new plugins.SweetScroll({});
+
+  /**
+   * Scrolls to a given element with options.
+   */
+  public async toElement(
+    elementArg: HTMLElement,
+    optionsArg: Parameters<typeof this.sweetScroller.toElement>[1]
+  ) {
+    this.sweetScroller.toElement(elementArg, optionsArg);
+    await plugins.smartdelay.delayFor(optionsArg.duration);
+  }
+
+  /**
+   * Detects whether native smooth scrolling is enabled.
+   */
+  public async detectNativeSmoothScroll() {
+    const done = plugins.smartpromise.defer<boolean>();
+    const sampleSize = 100;
+    const acceptableDeltaDifference = 3;
+    const minimumSmoothRatio = 0.75;
+
+    const eventDeltas: number[] = [];
+
+    function onWheel(event: WheelEvent) {
+      eventDeltas.push(event.deltaY);
+
+      if (eventDeltas.length >= sampleSize) {
+        window.removeEventListener('wheel', onWheel);
+        analyzeEvents();
+      }
+    }
+
+    function analyzeEvents() {
+      const totalDiffs = eventDeltas.length - 1;
+      let smallDiffCount = 0;
+
+      for (let i = 0; i < totalDiffs; i++) {
+        const diff = Math.abs(eventDeltas[i + 1] - eventDeltas[i]);
+        if (diff <= acceptableDeltaDifference) {
+          smallDiffCount++;
+        }
+      }
+
+      const smoothRatio = smallDiffCount / totalDiffs;
+      if (smoothRatio >= minimumSmoothRatio) {
+        console.log('Smooth scrolling detected.');
+        done.resolve(true);
+      } else {
+        console.log('Smooth scrolling NOT detected.');
+        done.resolve(false);
+      }
+    }
+
+    window.addEventListener('wheel', onWheel);
+    return done.promise;
+  }
+
+  /**
+   * Enables Lenis scrolling.
+   * If optionsArg.disableOnNativeSmoothScroll is true and native smooth scrolling is detected,
+   * Lenis will be destroyed immediately.
+   */
+  public async enableLenisScroll(optionsArg?: { disableOnNativeSmoothScroll?: boolean }) {
+    const lenis = new plugins.Lenis({
+      autoRaf: true,
+    });
+
+    if (optionsArg?.disableOnNativeSmoothScroll) {
+      if (await this.detectNativeSmoothScroll()) {
+        lenis.destroy();
+        return;
+      }
+    }
+
+    // Activate Lenis scrolling.
+    this.lenisInstance = lenis;
+    // Switch from native scroll listener to Lenis scroll listener.
+    this.detachNativeScrollListener();
+    this.attachLenisScrollListener();
+
+    // Monkey-patch the destroy method so that when Lenis is destroyed,
+    // the native scroll listener is reattached.
+    const originalDestroy = lenis.destroy.bind(lenis);
+    lenis.destroy = () => {
+      originalDestroy();
+      this.detachLenisScrollListener();
+      this.attachNativeScrollListener();
+      this.lenisInstance = null;
+    };
+  }
+
+  /**
+   * Registers a callback to be executed on scroll.
+   * @param callback A function to execute on each scroll event.
+   */
+  public onScroll(callback: () => void): void {
+    this.scrollCallbacks.push(callback);
+  }
+
+  /**
+   * Executes all registered scroll callbacks concurrently.
+   */
+  private executeScrollCallbacks(): void {
+    // Execute all callbacks in parallel.
+    this.scrollCallbacks.forEach((callback) => {
+      try {
+        callback();
+      } catch (error) {
+        console.error('Error in scroll callback:', error);
+      }
+    });
+  }
+
+  /**
+   * Attaches the native scroll event listener.
+   */
+  private attachNativeScrollListener(): void {
+    window.addEventListener('scroll', this.handleNativeScroll);
+  }
+
+  /**
+   * Detaches the native scroll event listener.
+   */
+  private detachNativeScrollListener(): void {
+    window.removeEventListener('scroll', this.handleNativeScroll);
+  }
+
+  /**
+   * Attaches the Lenis scroll event listener.
+   */
+  private attachLenisScrollListener(): void {
+    if (this.lenisInstance) {
+      // Assuming that Lenis exposes an `on` method to listen to scroll events.
+      this.lenisInstance.on('scroll', this.handleLenisScroll);
+    }
+  }
+
+  /**
+   * Detaches the Lenis scroll event listener.
+   */
+  private detachLenisScrollListener(): void {
+    if (this.lenisInstance) {
+      // Assuming that Lenis exposes an `off` method to remove scroll event listeners.
+      this.lenisInstance.off('scroll', this.handleLenisScroll);
+    }
+  }
+}

ts/domtools.classes.thememanager.ts

@@ -0,0 +1,61 @@
+import { DomTools } from './domtools.classes.domtools.js';
+import * as plugins from './domtools.plugins.js';
+
+export class ThemeManager {
+  public domtoolsRef: DomTools;
+
+  public goBrightBoolean = false;
+  public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
+
+  public themeObservable = new plugins.smartrx.rxjs.ReplaySubject<boolean>(1);
+
+  constructor(domtoolsRefArg: DomTools) {
+    this.domtoolsRef = domtoolsRefArg;
+
+    // lets care
+    this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches;
+    this.preferredColorSchemeMediaMatch.addEventListener('change', (eventArg) => {
+      this.goBrightBoolean = eventArg.matches;
+      this.updateAllConnectedElements();
+    });
+    this.updateAllConnectedElements();
+  }
+
+  public async enableAutomaticGlobalThemeChange() {
+    if (document.body && document.body.style) {
+      this.themeObservable.subscribe({
+        next: (goBright) => {
+          document.body.style.background = goBright ? '#fff' : '#000';
+        }
+      });
+    }
+  }
+
+  private async updateAllConnectedElements() {
+    this.themeObservable.next(this.goBrightBoolean);
+  }
+
+  /**
+   * set the theme of the website to bright
+   */
+  public goBright() {
+    this.goBrightBoolean = true;
+    this.updateAllConnectedElements();
+  }
+
+  /**
+   * set the theme of the website to dark
+   */
+  public goDark() {
+    this.goBrightBoolean = false;
+    this.updateAllConnectedElements();
+  }
+
+  /**
+   * simply toggle between bright and dark
+   */
+  public toggleDarkBright() {
+    this.goBrightBoolean = !this.goBrightBoolean;
+    this.updateAllConnectedElements();
+  }
+}

ts/domtools.css.basestyles.ts

@@ -0,0 +1,41 @@
+import { DomTools } from './domtools.classes.domtools.js';
+
+import { css, unsafeCSS } from 'lit';
+
+/**
+ * changes scrollbar styles to be consistent across OS borders
+ */
+export const scrollBarStyles: string = (() => {
+  const returnStylesOld = navigator.userAgent.indexOf('Mac OS X') === -1 ? css``.cssText : ``;
+  const returnStyles = css`
+    /* width */
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+    body {
+      scrollbar-width: none;
+    }
+  `.cssText;
+  return returnStyles;
+})();
+
+export const globalBaseStyles: string = css`
+  /*
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
+      format('woff2');
+  } */
+
+  /* global body styles */
+  body {
+    margin: 0px;
+    font-family: 'Geist Sans', 'Inter', sans-serif;
+    box-sizing: border-box;
+  }
+
+  /* scroll bar styles */
+  ${unsafeCSS(scrollBarStyles)}
+`.cssText;

ts/domtools.css.breakpoints.ts

@@ -0,0 +1,66 @@
+import { DomTools } from './domtools.classes.domtools.js';
+
+import { CSSResult, unsafeCSS } from 'lit';
+
+export const desktop = 1600;
+export const notebook = 1240;
+export const tablet = 1024;
+export const phablet = 600;
+export const phone = 400;
+
+export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+
+export const cssForDesktop = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (min-width: ${desktop}px) {
+      ${cssArg.cssText}
+    }
+    @media (min-width: ${desktop}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForNotebook = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${notebook}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${notebook}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForTablet = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${tablet}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${tablet}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForPhablet = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${phablet}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${phablet}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForPhone = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${phone}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${phone}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};

ts/domtools.css.ts

@@ -1,8 +1,9 @@
 export const cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number) => {
   let returnString = ``;
   for (let i = 0; i < amountOfColumnsArg; i++) {
-    returnString += ` calc((100%/${amountOfColumnsArg}) - (${gapSizeArg *
-      (amountOfColumnsArg - 1)}px/${amountOfColumnsArg}))`;
+    returnString += ` calc((100%/${amountOfColumnsArg}) - (${
+      gapSizeArg * (amountOfColumnsArg - 1)
+    }px/${amountOfColumnsArg}))`;
   }
   return returnString;
 };

ts/domtools.elementbasic.ts

@@ -1,13 +1,38 @@
-import * as plugins from './domtools.plugins';
-import { DomTools } from './domtools.classes.domtools';
+import * as plugins from './domtools.plugins.js';
+import { DomTools, type IDomToolsContructorOptions } from './domtools.classes.domtools.js';
+import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles.js';
 
-import { html } from 'lit-element';
+import { html, LitElement, css, unsafeCSS } from 'lit';
+
+export const staticStyles = css`
+  * {
+    transition: background 0.1s, color 0.1s;
+    box-sizing: border-box;
+  }
+
+  :host {
+    box-sizing: border-box;
+    font-family: 'Geist Sans', 'Inter', sans-serif;
+  }
+
+  ${unsafeCSS(scrollBarStyles)}
+`;
+
+/**
+ * styles to be included in every webcomponent
+ */
 export const styles = html`
   <style>
     * {
-      font-family: 'Roboto', sans-serif;
+      transition: background 0.1s, color 0.1s;
       box-sizing: border-box;
     }
+
+    :host {
+      font-family: 'Geist Sans', 'Inter', sans-serif;
+    }
+
+    ${scrollBarStyles}
   </style>
 `;
 
@@ -15,31 +40,20 @@ export const styles = html`
  * a basic setup for elements
  * makes sure everything is in check
  */
-export const setup = async () => {
-  const domTools = await DomTools.setupDomTools();
+export const setup = async (
+  elementArg?: LitElement,
+  optionsArg: IDomToolsContructorOptions = {}
+): Promise<DomTools> => {
+  const domTools = await DomTools.setupDomTools(optionsArg);
+
+  if (elementArg) {
+    // lets do something with the element
+    // not used right now
+  }
+
   domTools.runOnce('elementBasicSetup', async () => {
     // bodyStyles
-    domTools.setGlobalStyles(`
-      body {
-        margin: 0px;
-        font-family: 'Roboto', sans-serif;
-        box-sizing: border-box;
-      }
-    `);
-
-    // material font
-    domTools.setGlobalStyles(`
-      @font-face {
-        font-family: 'Material Icons';
-        font-style: normal;
-        font-weight: 400;
-        src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
-      }
-    `);
-
-    // Roboto Font
-    domTools.setGlobalStyles(`
-      @import url('https://fonts.googleapis.com/css?family=Roboto');
-    `);
+    domTools.setGlobalStyles(globalBaseStyles);
   });
+  return domTools;
 };

ts/domtools.pluginexports.ts

@@ -0,0 +1,23 @@
+import * as smartdelay from '@push.rocks/smartdelay';
+import * as smartmarkdown from '@push.rocks/smartmarkdown';
+import * as smartpromise from '@push.rocks/smartpromise';
+import SweetScroll from 'sweet-scroll';
+import * as smartstate from '@push.rocks/smartstate';
+import * as smartrouter from '@push.rocks/smartrouter';
+import * as smartrx from '@push.rocks/smartrx';
+import * as smartstring from '@push.rocks/smartstring';
+import * as smarturl from '@push.rocks/smarturl';
+import * as typedrequest from '@api.global/typedrequest';
+
+export { 
+  smartdelay, 
+  smartmarkdown, 
+  smartpromise, 
+  SweetScroll, 
+  smartstate, 
+  smartrouter,
+  smartrx, 
+  smartstring, 
+  smarturl, 
+  typedrequest 
+};

ts/domtools.plugins.ts

@@ -1,5 +1,55 @@
-// pushrocks scope
-import * as smartpromise from '@pushrocks/smartpromise';
-import * as smartstate from '@pushrocks/smartstate';
+// designestate scope
+import * as deesComms from '@design.estate/dees-comms';
 
-export { smartpromise, smartstate };
+export { deesComms };
+
+// apiglobal scope
+import * as typedrequest from '@api.global/typedrequest';
+
+export { typedrequest };
+
+// pushrocks scope
+import * as smartdelay from '@push.rocks/smartdelay';
+import * as smartjson from '@push.rocks/smartjson';
+import * as smartmarkdown from '@push.rocks/smartmarkdown';
+import * as smartpromise from '@push.rocks/smartpromise';
+import * as smartrouter from '@push.rocks/smartrouter';
+import * as smartrx from '@push.rocks/smartrx';
+import * as smartstate from '@push.rocks/smartstate';
+import * as smartstring from '@push.rocks/smartstring';
+import * as smarturl from '@push.rocks/smarturl';
+import * as webrequest from '@push.rocks/webrequest';
+import * as websetup from '@push.rocks/websetup';
+import * as webstore from '@push.rocks/webstore';
+
+// subscope lik
+import { ObjectMap } from '@push.rocks/lik/dist_ts/lik.objectmap.js';
+import { Stringmap } from '@push.rocks/lik/dist_ts/lik.stringmap.js';
+import { FastMap } from '@push.rocks/lik/dist_ts/lik.fastmap.js';
+const lik = {
+  ObjectMap,
+  Stringmap,
+  FastMap,
+};
+
+export {
+  lik,
+  smartdelay,
+  smartjson,
+  smartmarkdown,
+  smartpromise,
+  smartrouter,
+  smartrx,
+  smarturl,
+  smartstate,
+  smartstring,
+  webrequest,
+  websetup,
+  webstore,
+};
+
+// third party scope
+import Lenis from 'lenis'
+import SweetScroll from 'sweet-scroll';
+
+export { Lenis, SweetScroll };

ts/index.ts

@@ -1,8 +1,20 @@
-export * from './domtools.colors';
+export * from './domtools.colors.js';
 
-import * as elementBasic from './domtools.elementbasic';
-import * as breakpoints from './domtools.breakpoints';
-import * as css from './domtools.css';
+import * as elementBasic from './domtools.elementbasic.js';
+import * as breakpoints from './domtools.css.breakpoints.js';
+import * as css from './domtools.css.js';
 
 export { css, breakpoints, elementBasic };
-export { DomTools } from './domtools.classes.domtools';
+export { DomTools, type IDomToolsContructorOptions } from './domtools.classes.domtools.js';
+export { TypedRequest } from '@api.global/typedrequest';
+export { type IWebSetupConstructorOptions } from '@push.rocks/websetup';
+
+import * as plugins from './domtools.pluginexports.js';
+export { plugins };
+
+// type exports
+import type { rxjs } from '@push.rocks/smartrx';
+
+export type {
+  rxjs,
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
+}

tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": ["tslint:latest", "tslint-config-prettier"],
-  "rules": {
-    "semicolon": [true, "always"],
-    "no-console": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "member-ordering": {
-      "options":{
-        "order": [
-          "static-method"
-        ]
-      }
-    }
-  },
-  "defaultSeverity": "warning"
-}