v2.5.0

changelog.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-domtools",
-  "version": "2.4.0",
+  "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",

readme.md

@@ -110,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
@@ -118,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:

ts/00_commitinfo_data.ts

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