feat(dees-statsgrid): add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.2.1

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-03-11 - 3.47.0 - feat(dees-statsgrid)
+add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.2.1
+
+- Added @containerResponsive decorator and import to dees-statsgrid
+- Added cssManager.cssForPhablet and cssManager.cssForPhone responsive style blocks to adjust layout, spacing and font sizes on smaller viewports
+- Bumped dependency @design.estate/dees-element from ^2.1.6 to ^2.2.1
+
 ## 2026-03-10 - 3.46.1 - fix(dees-appui)
 add min-height: 0 to mainmenu and secondarymenu to prevent unintended container height and fix layout stacking
 

package.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.9",
-    "@design.estate/dees-element": "^2.1.6",
+    "@design.estate/dees-element": "^2.2.1",
     "@design.estate/dees-wcctools": "^3.8.0",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",

pnpm-lock.yaml

@@ -12,8 +12,8 @@ importers:
         specifier: ^2.3.9
         version: 2.3.9
       '@design.estate/dees-element':
-        specifier: ^2.1.6
+        specifier: ^2.2.1
-        version: 2.1.6
+        version: 2.2.1
       '@design.estate/dees-wcctools':
         specifier: ^3.8.0
         version: 3.8.0
@@ -317,8 +317,11 @@ packages:
   '@design.estate/dees-domtools@2.3.9':
     resolution: {integrity: sha512-tixdBPUbbQEg46QkUQw9XVgGH/OxVe68FwPjspczKVPDM/0CbJL76JGQuTySZTPe8F49f2Q2Ft257qEGBEEtGA==}
 
-  '@design.estate/dees-element@2.1.6':
+  '@design.estate/dees-domtools@2.5.1':
-    resolution: {integrity: sha512-7zyHkUjB8UEQgT9VbB2IJtc/yuPt9CI5JGel3b6BxA1kecY64ceIjFvof1uIkc0QP8q2fMLLY45r1c+9zDTjzg==}
+    resolution: {integrity: sha512-ojzRSkOpQvxpd4drCNF1wadvPwthI6xIJpYjBbOwlgxkFCrlgxlOxHzRKEVnj5wWeUPqykKhddKp33LKW9mydw==}
+
+  '@design.estate/dees-element@2.2.1':
+    resolution: {integrity: sha512-rYtrCrYQNnEC75vgUUIwCwwLTgSdXBZSK5X1b9JyApl8VasvqEVowqiChuZpxNhW2TRZuk29lyY86Qb7/DuQQQ==}
 
   '@design.estate/dees-wcctools@3.8.0':
     resolution: {integrity: sha512-CC14iVKUrguzD9jIrdPBd9fZ4egVJEZMxl5y8iy0l7WLumeoYvGsoXj5INVkRPLRVLqziIdi4Je1hXqHt2NU+g==}
@@ -4565,7 +4568,7 @@ snapshots:
   '@design.estate/dees-catalog@3.45.1(@tiptap/pm@2.27.2)':
     dependencies:
       '@design.estate/dees-domtools': 2.3.9
-      '@design.estate/dees-element': 2.1.6
+      '@design.estate/dees-element': 2.2.1
       '@design.estate/dees-wcctools': 3.8.0
       '@fortawesome/fontawesome-svg-core': 7.2.0
       '@fortawesome/free-brands-svg-icons': 7.2.0
@@ -4630,9 +4633,35 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-element@2.1.6':
+  '@design.estate/dees-domtools@2.5.1':
     dependencies:
-      '@design.estate/dees-domtools': 2.3.9
+      '@api.global/typedrequest': 3.3.0
+      '@design.estate/dees-comms': 1.0.30
+      '@push.rocks/lik': 6.3.1
+      '@push.rocks/smartdelay': 3.0.5
+      '@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.2.1
+      '@push.rocks/smartstring': 4.1.0
+      '@push.rocks/smarturl': 3.1.0
+      '@push.rocks/webrequest': 4.0.5
+      '@push.rocks/websetup': 3.0.19
+      '@push.rocks/webstore': 2.0.20
+      '@tempfix/lenis': 1.3.20
+      lit: 3.3.2
+      sweet-scroll: 4.0.0
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - react
+      - supports-color
+      - vue
+
+  '@design.estate/dees-element@2.2.1':
+    dependencies:
+      '@design.estate/dees-domtools': 2.5.1
       '@push.rocks/isounique': 1.0.5
       '@push.rocks/smartrx': 3.0.10
       lit: 3.3.2
@@ -4645,7 +4674,7 @@ snapshots:
   '@design.estate/dees-wcctools@3.8.0':
     dependencies:
       '@design.estate/dees-domtools': 2.3.9
-      '@design.estate/dees-element': 2.1.6
+      '@design.estate/dees-element': 2.2.1
       '@push.rocks/smartdelay': 3.0.5
       lit: 3.3.2
     transitivePeerDependencies:
@@ -6077,7 +6106,7 @@ snapshots:
 
   '@push.rocks/smartntml@2.0.8':
     dependencies:
-      '@design.estate/dees-element': 2.1.6
+      '@design.estate/dees-element': 2.2.1
       '@happy-dom/global-registrator': 15.11.7
       '@push.rocks/smartpromise': 4.2.3
       fake-indexeddb: 6.2.5
@@ -6311,7 +6340,7 @@ snapshots:
 
   '@push.rocks/taskbuffer@3.5.0':
     dependencies:
-      '@design.estate/dees-element': 2.1.6
+      '@design.estate/dees-element': 2.2.1
       '@push.rocks/lik': 6.3.1
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartlog': 3.2.1

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.46.1',
+  version: '3.47.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -10,6 +10,7 @@ import {
   css,
   unsafeCSS,
   cssManager,
+  containerResponsive,
 } from '@design.estate/dees-element';
 import type { TemplateResult } from '@design.estate/dees-element';
 
@@ -93,6 +94,7 @@ export interface IStatsTile {
   actions?: plugins.tsclass.website.IMenuItem[];
 }
 
+@containerResponsive()
 @customElement('dees-statsgrid')
 export class DeesStatsGrid extends DeesElement {
   public static demo = demoFunc;
@@ -801,6 +803,33 @@ export class DeesStatsGrid extends DeesElement {
         z-index: 1000;
       }
     `,
+    // Container-responsive: when this statsgrid is narrow
+    cssManager.cssForPhablet(css`
+      :host {
+        --tile-padding: 12px;
+        --value-font-size: 22px;
+        --title-font-size: 12px;
+        --grid-gap: 8px;
+      }
+      .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 8px;
+      }
+      .stats-tile {
+        grid-column: span 1 !important;
+      }
+    `, this),
+    cssManager.cssForPhone(css`
+      :host {
+        --tile-padding: 10px;
+        --value-font-size: 20px;
+        --header-spacing: 8px;
+      }
+      .stats-grid {
+        grid-template-columns: 1fr;
+        gap: 6px;
+      }
+    `, this),
   ];
 
   constructor() {