feat(layout): introduce dees-tile component for unified tile layout

ts_web/elements/00group-layout/dees-tile/dees-tile.demo.ts

@@ -0,0 +1,67 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import './dees-tile.js';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper>
+      <style>
+        ${css`
+          .demoBox {
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .tile-demo-content {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+            font-size: 13px;
+          }
+          .footer-stats {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            font-size: 11px;
+            width: 100%;
+          }
+          .footer-stats .stat {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+          .footer-stats .stat strong {
+            color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <dees-tile heading="Simple Tile" style="height: 200px;">
+          <div class="tile-demo-content">Content area with rounded corners</div>
+        </dees-tile>
+
+        <dees-tile heading="Tile with Footer" style="height: 200px;">
+          <div class="tile-demo-content">Content goes here</div>
+          <div slot="footer" class="footer-stats">
+            <span class="stat">latest <strong>42</strong></span>
+            <span class="stat">min <strong>12</strong></span>
+            <span class="stat">max <strong>87</strong></span>
+            <span class="stat">avg <strong>45.3</strong></span>
+          </div>
+        </dees-tile>
+
+        <dees-tile style="height: 200px;">
+          <div slot="header" style="display:flex;align-items:center;gap:12px;width:100%;">
+            <span style="font-weight:500;">Custom Header</span>
+            <input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:2px 8px;border:1px solid;border-radius:4px;font-size:12px;background:transparent;color:inherit;border-color:inherit;">
+          </div>
+          <div class="tile-demo-content">Custom header slot with search input</div>
+        </dees-tile>
+      </div>
+    </dees-demowrapper>
+  `;
+};