design.estate/dees-element
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-element): add container-responsive APIs (containerResponsive decorator, DeesElement static cssFor* container helpers, and cssManager cssForCustom) and update docs

Browse Source
This commit is contained in:
Jürgen Kunz
2026-03-11 08:18:22 +00:00
parent 9c85ad8b43
commit 4de0dd933d
9 changed files with 224 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
readme.md
View File

@@ -77,6 +77,7 @@ The singleton `cssManager` is the central hub for theming and responsive layout:
| `cssManager.cssForTablet(css)` | Media-query wrapper for tablet breakpoints |
| `cssManager.cssForPhablet(css)` | Media-query wrapper for phablet breakpoints |
| `cssManager.cssForPhone(css)` | Media-query wrapper for phone breakpoints |
| `cssManager.cssForCustom({ maxWidth, minWidth })` | Custom viewport-level breakpoint (curried) |
| `cssManager.cssGridColumns(cols, gap)` | Generates CSS grid column widths |
Example — responsive + themed styles:
@@ -106,6 +107,57 @@ class MyCard extends DeesElement {
}
```
### 📦 Container-Responsive Components
For components that need to respond to their **own width** (not the viewport), use the `@containerResponsive()` decorator together with `DeesElement`'s static `cssFor*` methods:
```typescript
import {
DeesElement, customElement, html, css, cssManager,
containerResponsive,
} from '@design.estate/dees-element';
@containerResponsive()
@customElement('my-stats-grid')
class MyStatsGrid extends DeesElement {
static styles = [
cssManager.defaultStyles,
css`.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }`,
// Component-level: when THIS element is narrow
this.cssForTablet(css`
.grid { grid-template-columns: repeat(2, 1fr); }
`),
// Viewport-level: when the browser window is narrow
cssManager.cssForPhone(css`
.grid { grid-template-columns: 1fr; }
`),
// Component-level with custom constraint
this.cssForCustom({ maxWidth: 500 })(css`
.grid { gap: 8px; }
`),
];
render() {
return html`<div class="grid"><slot></slot></div>`;
}
}
```
**How it works:**
| API | Scope | Generated CSS |
|-----|-------|---------------|
| `cssManager.cssForPhablet(css)` | Viewport | `@media` + `@container wccToolsViewport` |
| `cssManager.cssForCustom({maxWidth:800})(css)` | Viewport | `@media` + `@container wccToolsViewport` |
| `this.cssForPhablet(css)` | Component | `@container <tag-name>` only |
| `this.cssForCustom({maxWidth:800})(css)` | Component | `@container <tag-name>` only |
| `@containerResponsive()` | Decorator | Sets `container-type: inline-size` + `container-name` on `:host` |
The `@containerResponsive()` decorator is required for the component-level `this.cssFor*` methods to take effect — it establishes the CSS containment context on `:host`.
### ⚡ Reactive Properties & State
Use the standard Lit decorators, re-exported for convenience:
@@ -255,6 +307,7 @@ The directives namespace also re-exports these commonly used Lit directives:
| `unsafeHTML` | Render raw HTML in templates |
| `render` | Lit render function |
| `static` / `unsafeStatic` | Static html template helpers |
| `containerResponsive` | Decorator that adds CSS containment to `:host` |
| `domtools` | DOM tooling utilities |
| `directives` | All directives (resolve, subscribe, etc.) |
| `rxjs` (type) | RxJS type re-export |