v2.4.0

changelog.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## 2026-03-11 - 2.4.0 - feat(css.breakpoints)
+add constraint-based CSS breakpoint helpers and container context utilities
+
+- Introduce constraint-based API: ICssForConstraints and buildCondition for composing min/max width conditions
+- Add cssForViewport and cssForContainer helpers to centralize @container and @media generation
+- Add curried factories cssForCustom and cssForCustomContainer for reusable custom constraint styles
+- Add containerContextStyles to generate container-name/type host styles used with container queries
+- Refactor existing presets (cssForDesktop, cssForNotebook, cssForTablet, cssForPhablet, cssForPhone) to delegate to the new helpers while preserving behaviour
+- Import css from 'lit' (in addition to CSSResult and unsafeCSS) to support the new containerContextStyles factory
+
+## 2026-03-05 - 2.3.9 - fix(deps)
+bump dependency and devDependency versions, update lik import paths, add tsbundle config, export test start, and tidy readme install snippet
+
+- Bumped several devDependencies and dependencies (e.g. @git.zone/tsbuild, @git.zone/tsbundle, @git.zone/tstest, @api.global/typedrequest, @push.rocks/* packages including smartjson and webrequest).
+- Updated @push.rocks/lik import paths to use classes.* modules (classes.objectmap/stringmap/fastmap).
+- Added @git.zone/tsbundle entry to npmextra.json to produce an esbuild bundle (dist_bundle/bundle.js).
+- Changed test bootstrap to export default tap.start() to align with test runner usage.
+- Fixed README installation snippet formatting (combined npm/pnpm examples).
+
+## 2026-01-27 - 2.3.8 - fix(domtools)
+remove default 'loading...' meta title in WebSetup and use an empty string as the default
+
+- ts/domtools.classes.domtools.ts: changed WebSetup.metaObject.title from 'loading...' to '' to avoid displaying a placeholder title
+
+## 2026-01-04 - 2.3.7 - fix(deps)
+bump dependencies, update build/test configuration, and reorganize npmextra configuration
+
+- Update devDependencies: @git.zone/tsbuild to ^4.0.2, @git.zone/tsbundle to ^2.6.3, @git.zone/tstest to ^3.1.4, @types/node to ^25.0.3
+- Update dependencies: @api.global/typedrequest to ^3.2.5, @design.estate/dees-comms to ^1.0.30, lit to ^3.3.2
+- Replace import of 'lenis' with '@tempfix/lenis' (^1.3.17) and update ts import
+- Change test script to use --verbose and move browser test file to test.chromium.ts
+- Remove experimentalDecorators and useDefineForClassFields from tsconfig.json
+- Rework npmextra.json: migrate keys to scoped entries (@git.zone/cli, @git.zone/tsdoc), add release registries and accessLevel, add @ship.zone/szci and include tsdoc legal text
+
+## 2025-11-16 - 2.3.6 - fix(readme)
+Normalize README formatting and improve breakpoint helpers section
+
+- Fixed inconsistent Markdown list formatting in the Features section (added space after list dash for emoji bullets)
+- Bolded the "Available breakpoint helpers" heading and added spacing for improved readability
+- Clarified breakpoint helper listing to ensure cssForPhone is documented
+
 ## 2025-11-16 - 2.3.5 - fix(dependencies)
 bump dependency versions in package.json
 

npmextra.json

@@ -1,5 +1,5 @@
 {
-  "gitzone": {
+  "@git.zone/cli": {
     "projectType": "npm",
     "module": {
       "githost": "code.foss.global",
@@ -25,13 +25,30 @@
         "routing",
         "performance optimization"
       ]
+    },
+    "release": {
+      "registries": [
+        "https://verdaccio.lossless.digital",
+        "https://registry.npmjs.org"
+      ],
+      "accessLevel": "public"
     }
   },
-  "npmci": {
-    "npmGlobalTools": [],
-    "npmAccessLevel": "public"
-  },
-  "tsdoc": {
+  "@git.zone/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"
+  },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild",
+        "production": true
+      }
+    ]
+  },
+  "@ship.zone/szci": {
+    "npmGlobalTools": []
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-domtools",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "private": false,
   "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",
@@ -9,36 +9,36 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "scripts": {
-    "test": "(tstest test/ --web)",
+    "test": "(tstest test/ --verbose)",
     "build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
     "format": "(gitzone format)",
     "buildDocs": "tsdoc"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.7.1",
-    "@git.zone/tsbundle": "^2.5.1",
-    "@git.zone/tstest": "^2.7.0",
+    "@git.zone/tsbuild": "^4.1.3",
+    "@git.zone/tsbundle": "^2.9.0",
+    "@git.zone/tstest": "^3.2.0",
     "@push.rocks/tapbundle": "^6.0.3",
-    "@types/node": "^22.12.0"
+    "@types/node": "^25.3.3"
   },
   "dependencies": {
-    "@api.global/typedrequest": "^3.1.10",
-    "@design.estate/dees-comms": "^1.0.27",
-    "@push.rocks/lik": "^6.2.2",
+    "@api.global/typedrequest": "^3.3.0",
+    "@design.estate/dees-comms": "^1.0.30",
+    "@push.rocks/lik": "^6.3.1",
     "@push.rocks/smartdelay": "^3.0.5",
-    "@push.rocks/smartjson": "^5.2.0",
+    "@push.rocks/smartjson": "^6.0.0",
     "@push.rocks/smartmarkdown": "^3.0.3",
     "@push.rocks/smartpromise": "^4.2.3",
     "@push.rocks/smartrouter": "^1.3.3",
     "@push.rocks/smartrx": "^3.0.10",
-    "@push.rocks/smartstate": "^2.0.27",
+    "@push.rocks/smartstate": "^2.2.1",
     "@push.rocks/smartstring": "^4.1.0",
     "@push.rocks/smarturl": "^3.1.0",
-    "@push.rocks/webrequest": "^3.0.37",
+    "@push.rocks/webrequest": "^4.0.5",
     "@push.rocks/websetup": "^3.0.19",
     "@push.rocks/webstore": "^2.0.20",
-    "lenis": "^1.3.4",
-    "lit": "^3.3.0",
+    "@tempfix/lenis": "^1.3.20",
+    "lit": "^3.3.2",
     "sweet-scroll": "^4.0.0"
   },
   "files": [

readme.md

@@ -6,25 +6,21 @@ Modern web development made elegant. `@design.estate/dees-domtools` provides a p
 
 ## Features
 
-🚀 **Smart DOM Management** - Singleton-based DomTools instance with race-condition-free initialization
-📱 **Responsive Breakpoints** - Built-in support for desktop, tablet, phablet, and phone viewports with container queries
-🎭 **Theme Management** - Automatic dark/light mode detection and switching with RxJS observables
-⌨️ **Keyboard Shortcuts** - Elegant keyboard event handling with combo support
-📜 **Smooth Scrolling** - Native and Lenis-powered smooth scrolling with automatic detection
-🎯 **State Management** - Integrated state management with smartstate
-🧭 **Routing** - Client-side routing with smartrouter
-🌐 **WebSetup** - Easy management of website metadata, favicons, and SEO tags
-💅 **CSS Utilities** - Grid helpers, breakpoint utilities, and base styles for web components
+- 🚀 **Smart DOM Management** - Singleton-based DomTools instance with race-condition-free initialization
+- 📱 **Responsive Breakpoints** - Built-in support for desktop, tablet, phablet, and phone viewports with container queries
+- 🎭 **Theme Management** - Automatic dark/light mode detection and switching with RxJS observables
+- ⌨️ **Keyboard Shortcuts** - Elegant keyboard event handling with combo support
+- 📜 **Smooth Scrolling** - Native and Lenis-powered smooth scrolling with automatic detection
+- 🎯 **State Management** - Integrated state management with smartstate
+- 🧭 **Routing** - Client-side routing with smartrouter
+- 🌐 **WebSetup** - Easy management of website metadata, favicons, and SEO tags
+- 💅 **CSS Utilities** - Grid helpers, breakpoint utilities, and base styles for web components
 
 ## Installation
 
 ```bash
 npm install @design.estate/dees-domtools
-```
-
-Or with pnpm:
-
-```bash
+# or
 pnpm add @design.estate/dees-domtools
 ```
 
@@ -114,7 +110,8 @@ const myStyles = litCss`
 `;
 ```
 
-Available breakpoint helpers:
+**Available breakpoint helpers:**
+
 - `cssForDesktop(css)` - Styles for 1600px and above
 - `cssForNotebook(css)` - Styles for 1240px and below
 - `cssForTablet(css)` - Styles for 1024px and below
@@ -184,6 +181,7 @@ keyboard.stopListening();
 **Available Keys:**
 
 All standard keyboard keys are available in the `Key` enum, including:
+
 - Modifiers: `Ctrl`, `Shift`, `Alt`
 - Letters: `A` through `Z`
 - Numbers: `Zero` through `Nine`
@@ -298,7 +296,8 @@ class MyElement extends LitElement {
 }
 ```
 
-The `elementBasic.staticStyles` includes:
+**The `elementBasic.staticStyles` includes:**
+
 - Box-sizing reset
 - Smooth transitions for background and color
 - Custom scrollbar styles
@@ -455,12 +454,12 @@ Targets the latest version of Chrome. For other browsers, you may need to includ
 
 ## Why @design.estate/dees-domtools?
 
-✅ **Race-condition free** - Carefully designed initialization prevents common timing issues
-✅ **TypeScript first** - Full type safety and IntelliSense support
-✅ **Modern APIs** - Built on Lit, RxJS, and other modern web standards
-✅ **Batteries included** - Everything you need for sophisticated web apps
-✅ **Production ready** - Used in real-world applications at design.estate
-✅ **Well maintained** - Active development and support
+- ✅ **Race-condition free** - Carefully designed initialization prevents common timing issues
+- ✅ **TypeScript first** - Full type safety and IntelliSense support
+- ✅ **Modern APIs** - Built on Lit, RxJS, and other modern web standards
+- ✅ **Batteries included** - Everything you need for sophisticated web apps
+- ✅ **Production ready** - Used in real-world applications at design.estate
+- ✅ **Well maintained** - Active development and support
 
 ## Related Packages
 

test/test.chromium.ts

@@ -6,4 +6,4 @@ tap.test('first test', async () => {
   expect(domtoolsInstance).toBeInstanceOf(domtools.DomTools);
 });
 
-tap.start();
+export default tap.start();

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-domtools',
-  version: '2.3.5',
+  version: '2.4.0',
   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.classes.domtools.ts

@@ -93,7 +93,7 @@ export class DomTools {
 
   public websetup: WebSetup = new WebSetup({
     metaObject: {
-      title: 'loading...',
+      title: '',
     },
   });
 

ts/domtools.css.breakpoints.ts

@@ -1,6 +1,6 @@
 import { DomTools } from './domtools.classes.domtools.js';
 
-import { CSSResult, unsafeCSS } from 'lit';
+import { css, CSSResult, unsafeCSS } from 'lit';
 
 export const desktop = 1600;
 export const notebook = 1240;
@@ -10,57 +10,90 @@ export const phone = 400;
 
 export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 
-export const cssForDesktop = (cssArg: CSSResult) => {
+// ---------------------------------------------------------------------------
+// Constraint-based helpers
+// ---------------------------------------------------------------------------
+
+export interface ICssForConstraints {
+  maxWidth?: number;
+  minWidth?: number;
+}
+
+const buildCondition = (constraints: ICssForConstraints): string => {
+  const parts: string[] = [];
+  if (constraints.minWidth) parts.push(`(min-width: ${constraints.minWidth}px)`);
+  if (constraints.maxWidth) parts.push(`(max-width: ${constraints.maxWidth}px)`);
+  return parts.join(' and ');
+};
+
+// ---------------------------------------------------------------------------
+// Viewport-level: @container wccToolsViewport + @media
+// ---------------------------------------------------------------------------
+
+export const cssForViewport = (cssArg: CSSResult, condition: string) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${desktop}px) {
+    @container wccToolsViewport ${condition} {
       ${cssArg.cssText}
     }
-    @media (min-width: ${desktop}px) {
+    @media ${condition} {
       ${cssArg.cssText}
     }
   `);
 };
 
+// ---------------------------------------------------------------------------
+// Component-level: @container <name> only
+// ---------------------------------------------------------------------------
+
+export const cssForContainer = (cssArg: CSSResult, condition: string, containerName: string) => {
+  return unsafeCSS(`
+    @container ${containerName} ${condition} {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+// ---------------------------------------------------------------------------
+// Custom constraints (curried)
+// ---------------------------------------------------------------------------
+
+export const cssForCustom = (constraints: ICssForConstraints) =>
+  (cssArg: CSSResult) => cssForViewport(cssArg, buildCondition(constraints));
+
+export const cssForCustomContainer = (constraints: ICssForConstraints, containerName: string) =>
+  (cssArg: CSSResult) => cssForContainer(cssArg, buildCondition(constraints), containerName);
+
+// ---------------------------------------------------------------------------
+// Container context style factory — used by @containerResponsive()
+// ---------------------------------------------------------------------------
+
+export const containerContextStyles = (containerName: string) => css`
+  :host {
+    container-type: inline-size;
+    container-name: ${unsafeCSS(containerName)};
+  }
+`;
+
+// ---------------------------------------------------------------------------
+// Preset viewport breakpoint helpers (existing API, unchanged behaviour)
+// ---------------------------------------------------------------------------
+
+export const cssForDesktop = (cssArg: CSSResult) => {
+  return cssForViewport(cssArg, `(min-width: ${desktop}px)`);
+};
+
 export const cssForNotebook = (cssArg: CSSResult) => {
-  return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${notebook}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${notebook}px) {
-      ${cssArg.cssText}
-    }
-  `);
+  return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
 };
 
 export const cssForTablet = (cssArg: CSSResult) => {
-  return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
+  return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
 };
 
 export const cssForPhablet = (cssArg: CSSResult) => {
-  return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
+  return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
 };
 
 export const cssForPhone = (cssArg: CSSResult) => {
-  return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-  `);
+  return cssForViewport(cssArg, `(max-width: ${phone}px)`);
 };

ts/domtools.plugins.ts

@@ -23,9 +23,9 @@ 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';
+import { ObjectMap } from '@push.rocks/lik/dist_ts/classes.objectmap.js';
+import { Stringmap } from '@push.rocks/lik/dist_ts/classes.stringmap.js';
+import { FastMap } from '@push.rocks/lik/dist_ts/classes.fastmap.js';
 const lik = {
   ObjectMap,
   Stringmap,
@@ -49,7 +49,7 @@ export {
 };
 
 // third party scope
-import Lenis from 'lenis'
+import Lenis from '@tempfix/lenis'
 import SweetScroll from 'sweet-scroll';
 
 export { Lenis, SweetScroll };

tsconfig.json

@@ -1,7 +1,5 @@
 {
   "compilerOptions": {
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
     "target": "ES2022",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",