feat(components): add large set of new UI components and demos, reorganize groups, and bump a few dependencies

ts_web/elements/00group-media/dees-tile-video/demo.ts

@@ -0,0 +1,79 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      padding: 40px;
+      background: #f5f5f5;
+    }
+    .demo-section {
+      margin-bottom: 60px;
+    }
+    h3 {
+      margin-bottom: 20px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+    .tile-row {
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+      align-items: flex-start;
+    }
+  </style>
+
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Video Tiles</h3>
+      <div class="tile-row">
+        <dees-tile-video
+          src="https://www.w3schools.com/html/mov_bbb.mp4"
+          label="bunny.mp4"
+          @tile-click=${(e: CustomEvent) => console.log('Video clicked:', e.detail)}
+        ></dees-tile-video>
+
+        <dees-tile-video
+          src="https://www.w3schools.com/html/movie.mp4"
+          poster="https://picsum.photos/400/300"
+          label="movie.mp4"
+        ></dees-tile-video>
+
+        <dees-tile-video
+          src="https://www.w3schools.com/html/mov_bbb.mp4"
+          label="another-video.mp4"
+        ></dees-tile-video>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Size Variants</h3>
+      <div class="tile-row">
+        <dees-tile-video
+          size="small"
+          src="https://www.w3schools.com/html/mov_bbb.mp4"
+          label="small.mp4"
+        ></dees-tile-video>
+
+        <dees-tile-video
+          src="https://www.w3schools.com/html/mov_bbb.mp4"
+          label="default.mp4"
+        ></dees-tile-video>
+
+        <dees-tile-video
+          size="large"
+          src="https://www.w3schools.com/html/mov_bbb.mp4"
+          label="large.mp4"
+        ></dees-tile-video>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>With Poster Image</h3>
+      <dees-tile-video
+        src="https://www.w3schools.com/html/movie.mp4"
+        poster="https://picsum.photos/600/400"
+        label="poster-video.mp4"
+      ></dees-tile-video>
+    </div>
+  </div>
+`;