diff --git a/changelog.md b/changelog.md index 4b5b904..1a36ee3 100644 --- a/changelog.md +++ b/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 diff --git a/readme.md b/readme.md index 7ddc4f3..c5e132f 100644 --- a/readme.md +++ b/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: diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts index f831158..35838d9 100644 --- a/ts/00_commitinfo_data.ts +++ b/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.' }