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

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-element',
-  version: '2.1.6',
+  version: '2.2.0',
   description: 'A library for creating custom elements extending the lit element class with additional functionalities.'
 }

ts/classes.cssmanager.ts

@@ -67,6 +67,11 @@ export class CssManager {
     return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
   }
 
+  public cssForCustom(constraints: { maxWidth?: number; minWidth?: number }) {
+    return (contentArg: CSSResult) =>
+      unsafeCSS(domtools.breakpoints.cssForCustom(constraints)(contentArg));
+  }
+
   public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
     let returnCssVar: string;
 

ts/classes.dees-element.ts

@@ -1,6 +1,48 @@
 import * as plugins from './plugins.js';
+import { type CSSResult } from 'lit';
 
 export class DeesElement extends plugins.lit.LitElement {
+  // STATIC — component-level responsive helpers (use in `static styles = [...]`)
+
+  private static getContainerName(): string {
+    return (this as any).is || this.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  }
+
+  static cssForDesktop(cssArg: CSSResult) {
+    return plugins.domtools.breakpoints.cssForContainer(
+      cssArg, `(min-width: ${plugins.domtools.breakpoints.desktop}px)`, this.getContainerName(),
+    );
+  }
+
+  static cssForNotebook(cssArg: CSSResult) {
+    return plugins.domtools.breakpoints.cssForContainer(
+      cssArg, `(max-width: ${plugins.domtools.breakpoints.notebook}px)`, this.getContainerName(),
+    );
+  }
+
+  static cssForTablet(cssArg: CSSResult) {
+    return plugins.domtools.breakpoints.cssForContainer(
+      cssArg, `(max-width: ${plugins.domtools.breakpoints.tablet}px)`, this.getContainerName(),
+    );
+  }
+
+  static cssForPhablet(cssArg: CSSResult) {
+    return plugins.domtools.breakpoints.cssForContainer(
+      cssArg, `(max-width: ${plugins.domtools.breakpoints.phablet}px)`, this.getContainerName(),
+    );
+  }
+
+  static cssForPhone(cssArg: CSSResult) {
+    return plugins.domtools.breakpoints.cssForContainer(
+      cssArg, `(max-width: ${plugins.domtools.breakpoints.phone}px)`, this.getContainerName(),
+    );
+  }
+
+  static cssForCustom(constraints: { maxWidth?: number; minWidth?: number }) {
+    return (cssArg: CSSResult) =>
+      plugins.domtools.breakpoints.cssForCustomContainer(constraints, this.getContainerName())(cssArg);
+  }
+
   // INSTANCE
   @plugins.lit.property({ type: Boolean })
   public accessor goBright: boolean = false;

ts/decorators.containerresponsive.ts

@@ -0,0 +1,19 @@
+import * as domtools from '@design.estate/dees-domtools';
+
+export function containerResponsive() {
+  return function (target: any) {
+    const tagName: string =
+      target.is || target.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    const containerStyles = domtools.breakpoints.containerContextStyles(tagName);
+
+    const original = target.styles;
+    if (Array.isArray(original)) {
+      target.styles = [...original, containerStyles];
+    } else if (original) {
+      target.styles = [original, containerStyles];
+    } else {
+      target.styles = [containerStyles];
+    }
+    return target;
+  };
+}

ts/index.ts

@@ -18,6 +18,9 @@ export { domtools };
 // DeesElements exports
 export * from './classes.dees-element.js';
 
+// decorator exports
+export { containerResponsive } from './decorators.containerresponsive.js';
+
 // directives exports
 import * as directives from './directives/index.js';