v2.5.1

changelog.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 2026-03-11 - 2.5.1 - fix(breakpoints)
+rename exported functions to reflect constraint-based API: cssForCustom -> cssForConstraint and cssForCustomContainer -> cssForConstraintContainer; update README usage
+
+- Renamed cssForCustom to cssForConstraint
+- Renamed cssForCustomContainer to cssForConstraintContainer
+- Updated README examples to use new names
+- Function behavior and signatures unchanged; only exported names and internal comment updated
+- Consumers must update imports/usages to the new function names (breaking change)
+
+## 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
+
+- 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": {
+  "@git.zone/tsdoc": {
-    "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"
+  },
+  "@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.5.1",
   "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/tsbuild": "^4.1.3",
-    "@git.zone/tsbundle": "^2.5.1",
+    "@git.zone/tsbundle": "^2.9.0",
-    "@git.zone/tstest": "^2.7.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",
+    "@api.global/typedrequest": "^3.3.0",
-    "@design.estate/dees-comms": "^1.0.27",
+    "@design.estate/dees-comms": "^1.0.30",
-    "@push.rocks/lik": "^6.2.2",
+    "@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",
+    "@tempfix/lenis": "^1.3.20",
-    "lit": "^3.3.0",
+    "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
+- 🚀 **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
+- 📱 **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
+- 🎭 **Theme Management** - Automatic dark/light mode detection and switching with RxJS observables
-⌨️ **Keyboard Shortcuts** - Elegant keyboard event handling with combo support
+- ⌨️ **Keyboard Shortcuts** - Elegant keyboard event handling with combo support
-📜 **Smooth Scrolling** - Native and Lenis-powered smooth scrolling with automatic detection
+- 📜 **Smooth Scrolling** - Native and Lenis-powered smooth scrolling with automatic detection
-🎯 **State Management** - Integrated state management with smartstate
+- 🎯 **State Management** - Integrated state management with smartstate
-🧭 **Routing** - Client-side routing with smartrouter
+- 🧭 **Routing** - Client-side routing with smartrouter
-🌐 **WebSetup** - Easy management of website metadata, favicons, and SEO tags
+- 🌐 **WebSetup** - Easy management of website metadata, favicons, and SEO tags
-💅 **CSS Utilities** - Grid helpers, breakpoint utilities, and base styles for web components
+- 💅 **CSS Utilities** - Grid helpers, breakpoint utilities, and base styles for web components
 
 ## Installation
 
 ```bash
 npm install @design.estate/dees-domtools
-```
+# or
-
-Or with pnpm:
-
-```bash
 pnpm add @design.estate/dees-domtools
 ```
 
@@ -114,13 +110,45 @@ 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
 - `cssForTablet(css)` - Styles for 1024px and below
 - `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.cssForConstraint({ 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.cssForConstraintContainer({ 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:
@@ -184,6 +212,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 +327,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 +485,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
+- ✅ **Race-condition free** - Carefully designed initialization prevents common timing issues
-✅ **TypeScript first** - Full type safety and IntelliSense support
+- ✅ **TypeScript first** - Full type safety and IntelliSense support
-✅ **Modern APIs** - Built on Lit, RxJS, and other modern web standards
+- ✅ **Modern APIs** - Built on Lit, RxJS, and other modern web standards
-✅ **Batteries included** - Everything you need for sophisticated web apps
+- ✅ **Batteries included** - Everything you need for sophisticated web apps
-✅ **Production ready** - Used in real-world applications at design.estate
+- ✅ **Production ready** - Used in real-world applications at design.estate
-✅ **Well maintained** - Active development and support
+- ✅ **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.5.1',
   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}
+    }
+  `);
+};
+
+// ---------------------------------------------------------------------------
+// Constraint-based (curried)
+// ---------------------------------------------------------------------------
+
+export const cssForConstraint = (constraints: ICssForConstraints) =>
+  (cssArg: CSSResult) => cssForViewport(cssArg, buildCondition(constraints));
+
+export const cssForConstraintContainer = (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(`
+  return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
-    @container wccToolsViewport (max-width: ${notebook}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${notebook}px) {
-      ${cssArg.cssText}
-    }
-  `);
 };
 
 export const cssForTablet = (cssArg: CSSResult) => {
-  return unsafeCSS(`
+  return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
-    @container wccToolsViewport (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
 };
 
 export const cssForPhablet = (cssArg: CSSResult) => {
-  return unsafeCSS(`
+  return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
-    @container wccToolsViewport (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
 };
 
 export const cssForPhone = (cssArg: CSSResult) => {
-  return unsafeCSS(`
+  return cssForViewport(cssArg, `(max-width: ${phone}px)`);
-    @container wccToolsViewport (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-  `);
 };

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 { ObjectMap } from '@push.rocks/lik/dist_ts/classes.objectmap.js';
-import { Stringmap } from '@push.rocks/lik/dist_ts/lik.stringmap.js';
+import { Stringmap } from '@push.rocks/lik/dist_ts/classes.stringmap.js';
-import { FastMap } from '@push.rocks/lik/dist_ts/lik.fastmap.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",