v2.5.0

changelog.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 2026-03-11 - 2.5.0 - feat(breakpoints)
+document preset viewport helpers, low-level container helpers, and exported types for breakpoints
+
+- Added documentation for preset viewport helpers (they emit both @media and @container wccToolsViewport)
+- Added usage examples and API for low-level helpers: cssForCustom, cssForContainer, cssForCustomContainer, and containerContextStyles
+- Documented exported types: ICssForConstraints and TViewport
+- Clarified that component-level container helpers target named containers and do not emit @media fallbacks
+
+## 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
 

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.6",
+  "version": "2.5.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

@@ -20,11 +20,7 @@ Modern web development made elegant. `@design.estate/dees-domtools` provides a p
 
 ```bash
 npm install @design.estate/dees-domtools
-```
-
-Or with pnpm:
-
-```bash
+# or
 pnpm add @design.estate/dees-domtools
 ```
 
@@ -114,7 +110,7 @@ const myStyles = litCss`
 `;
 ```
 
-**Available breakpoint helpers:**
+**Preset viewport helpers** (emit both `@media` and `@container wccToolsViewport`):
 
 - `cssForDesktop(css)` - Styles for 1600px and above
 - `cssForNotebook(css)` - Styles for 1240px and below
@@ -122,6 +118,37 @@ const myStyles = litCss`
 - `cssForPhablet(css)` - Styles for 600px and below
 - `cssForPhone(css)` - Styles for 400px and below
 
+**Low-level helpers** for custom constraints and component-scoped containers:
+
+```typescript
+import { breakpoints } from '@design.estate/dees-domtools';
+import { css as litCss } from 'lit';
+
+// Viewport-level with custom constraints (emits @media + @container wccToolsViewport)
+breakpoints.cssForCustom({ maxWidth: 800 })(litCss`.box { padding: 8px; }`)
+
+// Component-level — targets a named container (no @media fallback)
+breakpoints.cssForContainer(
+  litCss`.grid { columns: 1; }`,
+  '(max-width: 600px)',
+  'my-component'  // CSS container-name
+)
+
+// Component-level with custom constraints (curried)
+breakpoints.cssForCustomContainer({ maxWidth: 500 }, 'my-component')(litCss`
+  .grid { gap: 8px; }
+`)
+
+// Generate containment styles for :host (used by @containerResponsive decorator)
+breakpoints.containerContextStyles('my-component')
+// → :host { container-type: inline-size; container-name: my-component; }
+```
+
+**Exported types:**
+
+- `ICssForConstraints` — `{ maxWidth?: number; minWidth?: number }`
+- `TViewport` — `'native' | 'desktop' | 'tablet' | 'phablet' | 'phone'`
+
 ### Theme Management
 
 Automatic theme detection with system preference support:

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.6',
+  version: '2.5.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",