v2.5.1

changelog.md

@@ -1,5 +1,46 @@
 # 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
 

npmextra.json

@@ -37,6 +37,17 @@
   "@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.7",
+  "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",
@@ -15,29 +15,29 @@
     "buildDocs": "tsdoc"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.0.2",
+    "@git.zone/tsbuild": "^4.1.3",
-    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tsbundle": "^2.9.0",
-    "@git.zone/tstest": "^3.1.4",
+    "@git.zone/tstest": "^3.2.0",
     "@push.rocks/tapbundle": "^6.0.3",
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.3.3"
   },
   "dependencies": {
-    "@api.global/typedrequest": "^3.2.5",
+    "@api.global/typedrequest": "^3.3.0",
     "@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",
-    "@tempfix/lenis": "^1.3.17",
+    "@tempfix/lenis": "^1.3.20",
     "lit": "^3.3.2",
     "sweet-scroll": "^4.0.0"
   },

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
-
-Or with pnpm:
-
-```bash
 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.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:

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.7',
+  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,