feat(dees-statsgrid): add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.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() {