From 42b40da67cab5ab7d7b6fc144a0b0db84f385c03 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Sat, 4 Apr 2026 08:13:56 +0000
Subject: [PATCH] feat(media): rename media tile components to thumbnail
 components and add shared thumbnail base exports

---
 changelog.md                                  |  8 ++++
 ts_web/00_commitinfo_data.ts                  |  2 +-
 .../dees-dataview-codebox.ts                  |  4 --
 .../component.ts                              | 12 ++---
 .../demo.ts                                   | 24 +++++-----
 .../index.ts                                  |  0
 .../component.ts                              | 16 +++----
 .../demo.ts                                   | 44 +++++++++----------
 .../index.ts                                  |  0
 .../component.ts                              | 12 ++---
 .../demo.ts                                   | 28 ++++++------
 .../index.ts                                  |  0
 .../component.ts                              | 12 ++---
 .../demo.ts                                   | 28 ++++++------
 .../index.ts                                  |  0
 .../component.ts                              | 12 ++---
 .../demo.ts                                   | 28 ++++++------
 .../index.ts                                  |  0
 .../styles.ts                                 |  0
 .../DeesThumbnailBase.ts}                     |  6 +--
 .../dees-thumbnail-shared/index.ts            |  2 +
 .../styles.ts                                 |  2 +-
 .../component.ts                              | 12 ++---
 .../demo.ts                                   | 28 ++++++------
 .../index.ts                                  |  0
 .../00group-media/dees-tile-shared/index.ts   |  2 -
 ts_web/elements/00group-media/index.ts        | 16 +++----
 27 files changed, 151 insertions(+), 147 deletions(-)
 rename ts_web/elements/00group-media/{dees-tile-audio => dees-thumbnail-audio}/component.ts (96%)
 rename ts_web/elements/00group-media/{dees-tile-audio => dees-thumbnail-audio}/demo.ts (82%)
 rename ts_web/elements/00group-media/{dees-tile-audio => dees-thumbnail-audio}/index.ts (100%)
 rename ts_web/elements/00group-media/{dees-tile-folder => dees-thumbnail-folder}/component.ts (91%)
 rename ts_web/elements/00group-media/{dees-tile-folder => dees-thumbnail-folder}/demo.ts (77%)
 rename ts_web/elements/00group-media/{dees-tile-folder => dees-thumbnail-folder}/index.ts (100%)
 rename ts_web/elements/00group-media/{dees-tile-image => dees-thumbnail-image}/component.ts (91%)
 rename ts_web/elements/00group-media/{dees-tile-image => dees-thumbnail-image}/demo.ts (79%)
 rename ts_web/elements/00group-media/{dees-tile-image => dees-thumbnail-image}/index.ts (100%)
 rename ts_web/elements/00group-media/{dees-tile-note => dees-thumbnail-note}/component.ts (94%)
 rename ts_web/elements/00group-media/{dees-tile-note => dees-thumbnail-note}/demo.ts (85%)
 rename ts_web/elements/00group-media/{dees-tile-note => dees-thumbnail-note}/index.ts (100%)
 rename ts_web/elements/00group-media/{dees-tile-pdf => dees-thumbnail-pdf}/component.ts (97%)
 rename ts_web/elements/00group-media/{dees-tile-pdf => dees-thumbnail-pdf}/demo.ts (88%)
 rename ts_web/elements/00group-media/{dees-tile-pdf => dees-thumbnail-pdf}/index.ts (100%)
 rename ts_web/elements/00group-media/{dees-tile-pdf => dees-thumbnail-pdf}/styles.ts (100%)
 rename ts_web/elements/00group-media/{dees-tile-shared/DeesTileBase.ts => dees-thumbnail-shared/DeesThumbnailBase.ts} (95%)
 create mode 100644 ts_web/elements/00group-media/dees-thumbnail-shared/index.ts
 rename ts_web/elements/00group-media/{dees-tile-shared => dees-thumbnail-shared}/styles.ts (99%)
 rename ts_web/elements/00group-media/{dees-tile-video => dees-thumbnail-video}/component.ts (95%)
 rename ts_web/elements/00group-media/{dees-tile-video => dees-thumbnail-video}/demo.ts (78%)
 rename ts_web/elements/00group-media/{dees-tile-video => dees-thumbnail-video}/index.ts (100%)
 delete mode 100644 ts_web/elements/00group-media/dees-tile-shared/index.ts

diff --git a/changelog.md b/changelog.md
index 6b0168c..c1ebf7d 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-04-04 - 3.54.0 - feat(media)
+rename media tile components to thumbnail components and add shared thumbnail base exports
+
+- Replaces dees-tile-* media component exports and implementations with dees-thumbnail-* counterparts for audio, image, video, note, folder, and pdf previews.
+- Introduces a shared DeesThumbnailBase and shared thumbnail styles for consistent sizing, hover overlays, loading states, error states, and lazy-loading behavior.
+- Updates the media index to export the new thumbnail component modules.
+- Includes a small layout cleanup in dees-dataview-codebox by removing forced full-height and absolute grid positioning.
+
 ## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer)
 add configurable sidebar position support
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index ad6c719..dfd44cd 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.53.0',
+  version: '3.54.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
diff --git a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
index 03dba94..2d5befb 100644
--- a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
@@ -53,11 +53,9 @@ export class DeesDataviewCodebox extends DeesElement {
           text-align: left;
           font-size: 16px;
           font-family: ${cssGeistFontFamily};
-          height: 100%;
           box-sizing: border-box;
         }
         dees-tile {
-          height: 100%;
           color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
 
@@ -114,8 +112,6 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .codegrid {
-          position: absolute;
-          inset: 0;
           display: grid;
           grid-template-columns: 50px auto;
           overflow: auto;
diff --git a/ts_web/elements/00group-media/dees-tile-audio/component.ts b/ts_web/elements/00group-media/dees-thumbnail-audio/component.ts
similarity index 96%
rename from ts_web/elements/00group-media/dees-tile-audio/component.ts
rename to ts_web/elements/00group-media/dees-thumbnail-audio/component.ts
index a758020..1e3bbaf 100644
--- a/ts_web/elements/00group-media/dees-tile-audio/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-audio/component.ts
@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-audio': DeesTileAudio;
+    'dees-thumbnail-audio': DeesThumbnailAudio;
   }
 }
 
-@customElement('dees-tile-audio')
-export class DeesTileAudio extends DeesTileBase {
+@customElement('dees-thumbnail-audio')
+export class DeesThumbnailAudio extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .audio-content {
         position: relative;
diff --git a/ts_web/elements/00group-media/dees-tile-audio/demo.ts b/ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts
similarity index 82%
rename from ts_web/elements/00group-media/dees-tile-audio/demo.ts
rename to ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts
index d61e432..9711c06 100644
--- a/ts_web/elements/00group-media/dees-tile-audio/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts
@@ -26,51 +26,51 @@ export const demo = () => html`
     <div class="demo-section">
       <h3>Audio Tiles</h3>
       <div class="tile-row">
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="SoundHelix Song 1"
           artist="T. Schuerger"
           label="soundhelix-1.mp3"
           @tile-click=${(e: CustomEvent) => console.log('Audio clicked:', e.detail)}
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
           title="SoundHelix Song 2"
           artist="T. Schuerger"
           label="soundhelix-2.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
           title="SoundHelix Song 3"
           label="soundhelix-3.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Size Variants</h3>
       <div class="tile-row">
-        <dees-tile-audio
+        <dees-thumbnail-audio
           size="small"
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="Small"
           label="small.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="Default"
           label="default.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           size="large"
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="Large"
           label="large.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
       </div>
     </div>
   </div>
diff --git a/ts_web/elements/00group-media/dees-tile-audio/index.ts b/ts_web/elements/00group-media/dees-thumbnail-audio/index.ts
similarity index 100%
rename from ts_web/elements/00group-media/dees-tile-audio/index.ts
rename to ts_web/elements/00group-media/dees-thumbnail-audio/index.ts
diff --git a/ts_web/elements/00group-media/dees-tile-folder/component.ts b/ts_web/elements/00group-media/dees-thumbnail-folder/component.ts
similarity index 91%
rename from ts_web/elements/00group-media/dees-tile-folder/component.ts
rename to ts_web/elements/00group-media/dees-thumbnail-folder/component.ts
index 4fc7f02..71c33ba 100644
--- a/ts_web/elements/00group-media/dees-tile-folder/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-folder/component.ts
@@ -7,11 +7,11 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
-export interface ITileFolderItem {
+export interface IThumbnailFolderItem {
   type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
   thumbnailSrc?: string;
   name: string;
@@ -29,16 +29,16 @@ const TYPE_ICON_MAP: Record<string, string> = {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-folder': DeesTileFolder;
+    'dees-thumbnail-folder': DeesThumbnailFolder;
   }
 }
 
-@customElement('dees-tile-folder')
-export class DeesTileFolder extends DeesTileBase {
+@customElement('dees-thumbnail-folder')
+export class DeesThumbnailFolder extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .folder-content {
         position: relative;
@@ -116,7 +116,7 @@ export class DeesTileFolder extends DeesTileBase {
   accessor name: string = '';
 
   @property({ attribute: false })
-  accessor items: ITileFolderItem[] = [];
+  accessor items: IThumbnailFolderItem[] = [];
 
   protected renderTileContent(): TemplateResult {
     const previewItems = this.items.slice(0, 4);
diff --git a/ts_web/elements/00group-media/dees-tile-folder/demo.ts b/ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts
similarity index 77%
rename from ts_web/elements/00group-media/dees-tile-folder/demo.ts
rename to ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts
index c0843fb..5ac0d29 100644
--- a/ts_web/elements/00group-media/dees-tile-folder/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts
@@ -1,8 +1,8 @@
 import { html } from '@design.estate/dees-element';
-import type { ITileFolderItem } from './component.js';
+import type { IThumbnailFolderItem } from './component.js';
 
 export const demo = () => {
-  const photosFolder: ITileFolderItem[] = [
+  const photosFolder: IThumbnailFolderItem[] = [
     { type: 'image', name: 'sunset.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=1' },
     { type: 'image', name: 'mountain.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=2' },
     { type: 'image', name: 'ocean.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=3' },
@@ -11,7 +11,7 @@ export const demo = () => {
     { type: 'image', name: 'desert.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=6' },
   ];
 
-  const projectFolder: ITileFolderItem[] = [
+  const projectFolder: IThumbnailFolderItem[] = [
     { type: 'note', name: 'README.md' },
     { type: 'note', name: 'package.json' },
     { type: 'folder', name: 'src' },
@@ -21,16 +21,16 @@ export const demo = () => {
     { type: 'image', name: 'logo.png', thumbnailSrc: 'https://picsum.photos/100/100?random=10' },
   ];
 
-  const mediaFolder: ITileFolderItem[] = [
+  const mediaFolder: IThumbnailFolderItem[] = [
     { type: 'video', name: 'intro.mp4' },
     { type: 'audio', name: 'background.mp3' },
     { type: 'image', name: 'thumbnail.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=20' },
     { type: 'pdf', name: 'storyboard.pdf' },
   ];
 
-  const emptyFolder: ITileFolderItem[] = [];
+  const emptyFolder: IThumbnailFolderItem[] = [];
 
-  const singleItemFolder: ITileFolderItem[] = [
+  const singleItemFolder: IThumbnailFolderItem[] = [
     { type: 'pdf', name: 'report.pdf' },
   ];
 
@@ -60,61 +60,61 @@ export const demo = () => {
       <div class="demo-section">
         <h3>Folder Tiles</h3>
         <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Photos"
             .items=${photosFolder}
             label="6 photos"
             @tile-click=${(e: CustomEvent) => console.log('Folder clicked:', e.detail)}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="my-project"
             .items=${projectFolder}
             label="Project files"
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Media Assets"
             .items=${mediaFolder}
             label="Mixed media"
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Edge Cases</h3>
         <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Empty Folder"
             .items=${emptyFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Single Item"
             .items=${singleItemFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Size Variants</h3>
         <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
             size="small"
             name="Small"
             .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Default"
             .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             size="large"
             name="Large"
             .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
         </div>
       </div>
     </div>
diff --git a/ts_web/elements/00group-media/dees-tile-folder/index.ts b/ts_web/elements/00group-media/dees-thumbnail-folder/index.ts
similarity index 100%
rename from ts_web/elements/00group-media/dees-tile-folder/index.ts
rename to ts_web/elements/00group-media/dees-thumbnail-folder/index.ts
diff --git a/ts_web/elements/00group-media/dees-tile-image/component.ts b/ts_web/elements/00group-media/dees-thumbnail-image/component.ts
similarity index 91%
rename from ts_web/elements/00group-media/dees-tile-image/component.ts
rename to ts_web/elements/00group-media/dees-thumbnail-image/component.ts
index 3af51d9..545decf 100644
--- a/ts_web/elements/00group-media/dees-tile-image/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-image/component.ts
@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-image': DeesTileImage;
+    'dees-thumbnail-image': DeesThumbnailImage;
   }
 }
 
-@customElement('dees-tile-image')
-export class DeesTileImage extends DeesTileBase {
+@customElement('dees-thumbnail-image')
+export class DeesThumbnailImage extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .image-wrapper {
         position: relative;
diff --git a/ts_web/elements/00group-media/dees-tile-image/demo.ts b/ts_web/elements/00group-media/dees-thumbnail-image/demo.ts
similarity index 79%
rename from ts_web/elements/00group-media/dees-tile-image/demo.ts
rename to ts_web/elements/00group-media/dees-thumbnail-image/demo.ts
index c72a3df..9d166d0 100644
--- a/ts_web/elements/00group-media/dees-tile-image/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-image/demo.ts
@@ -26,59 +26,59 @@ export const demo = () => html`
     <div class="demo-section">
       <h3>Image Tiles</h3>
       <div class="tile-row">
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/800/600"
           alt="Landscape photo"
           label="landscape.jpg"
           @tile-click=${(e: CustomEvent) => console.log('Image clicked:', e.detail)}
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/400/400"
           alt="Square photo"
           label="square.png"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/300/900"
           alt="Portrait photo"
           label="portrait.webp"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Size Variants</h3>
       <div class="tile-row">
-        <dees-tile-image
+        <dees-thumbnail-image
           size="small"
           src="https://picsum.photos/200/200"
           alt="Small"
           label="small.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/600/400"
           alt="Default"
           label="default.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           size="large"
           src="https://picsum.photos/1200/800"
           alt="Large"
           label="large.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Error State (broken URL)</h3>
-      <dees-tile-image
+      <dees-thumbnail-image
         src="https://invalid-url-that-does-not-exist.example/image.png"
         alt="Broken"
         label="broken.png"
-      ></dees-tile-image>
+      ></dees-thumbnail-image>
     </div>
   </div>
 `;
diff --git a/ts_web/elements/00group-media/dees-tile-image/index.ts b/ts_web/elements/00group-media/dees-thumbnail-image/index.ts
similarity index 100%
rename from ts_web/elements/00group-media/dees-tile-image/index.ts
rename to ts_web/elements/00group-media/dees-thumbnail-image/index.ts
diff --git a/ts_web/elements/00group-media/dees-tile-note/component.ts b/ts_web/elements/00group-media/dees-thumbnail-note/component.ts
similarity index 94%
rename from ts_web/elements/00group-media/dees-tile-note/component.ts
rename to ts_web/elements/00group-media/dees-thumbnail-note/component.ts
index 8a0223d..25b859d 100644
--- a/ts_web/elements/00group-media/dees-tile-note/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-note/component.ts
@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-note': DeesTileNote;
+    'dees-thumbnail-note': DeesThumbnailNote;
   }
 }
 
-@customElement('dees-tile-note')
-export class DeesTileNote extends DeesTileBase {
+@customElement('dees-thumbnail-note')
+export class DeesThumbnailNote extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .note-content {
         position: relative;
diff --git a/ts_web/elements/00group-media/dees-tile-note/demo.ts b/ts_web/elements/00group-media/dees-thumbnail-note/demo.ts
similarity index 85%
rename from ts_web/elements/00group-media/dees-tile-note/demo.ts
rename to ts_web/elements/00group-media/dees-thumbnail-note/demo.ts
index b09069c..6912eb4 100644
--- a/ts_web/elements/00group-media/dees-tile-note/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-note/demo.ts
@@ -72,63 +72,63 @@ Action Items:
       <div class="demo-section">
         <h3>Note Tiles</h3>
         <div class="tile-row">
-          <dees-tile-note
+          <dees-thumbnail-note
             title="component.ts"
             .content=${sampleCode}
             language="typescript"
             label="component.ts"
             @tile-click=${(e: CustomEvent) => console.log('Note clicked:', e.detail)}
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             title="Meeting Notes"
             .content=${sampleText}
             label="meeting-notes.txt"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             title="package.json"
             .content=${sampleJson}
             language="json"
             label="package.json"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Size Variants</h3>
         <div class="tile-row">
-          <dees-tile-note
+          <dees-thumbnail-note
             size="small"
             title="small.ts"
             .content=${sampleCode}
             language="ts"
             label="small.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             title="default.ts"
             .content=${sampleCode}
             language="ts"
             label="default.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             size="large"
             title="large.ts"
             .content=${sampleCode}
             language="ts"
             label="large.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Without Title</h3>
-        <dees-tile-note
+        <dees-thumbnail-note
           .content=${sampleText}
           label="untitled.txt"
-        ></dees-tile-note>
+        ></dees-thumbnail-note>
       </div>
     </div>
   `;
diff --git a/ts_web/elements/00group-media/dees-tile-note/index.ts b/ts_web/elements/00group-media/dees-thumbnail-note/index.ts
similarity index 100%
rename from ts_web/elements/00group-media/dees-tile-note/index.ts
rename to ts_web/elements/00group-media/dees-thumbnail-note/index.ts
diff --git a/ts_web/elements/00group-media/dees-tile-pdf/component.ts b/ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts
similarity index 97%
rename from ts_web/elements/00group-media/dees-tile-pdf/component.ts
rename to ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts
index 5da9f1b..30295b3 100644
--- a/ts_web/elements/00group-media/dees-tile-pdf/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts
@@ -1,6 +1,6 @@
 import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
 import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js';
@@ -9,15 +9,15 @@ import { demo as demoFunc } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-pdf': DeesTilePdf;
+    'dees-thumbnail-pdf': DeesThumbnailPdf;
   }
 }
 
-@customElement('dees-tile-pdf')
-export class DeesTilePdf extends DeesTileBase {
+@customElement('dees-thumbnail-pdf')
+export class DeesThumbnailPdf extends DeesThumbnailBase {
   public static demo = demoFunc;
   public static demoGroups = ['Media', 'PDF'];
-  public static styles = [...tileBaseStyles, tilePdfStyles] as any;
+  public static styles = [...thumbnailBaseStyles, tilePdfStyles] as any;
 
   @property({ type: String })
   accessor pdfUrl: string = '';
diff --git a/ts_web/elements/00group-media/dees-tile-pdf/demo.ts b/ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts
similarity index 88%
rename from ts_web/elements/00group-media/dees-tile-pdf/demo.ts
rename to ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts
index 0c9cabc..98216d4 100644
--- a/ts_web/elements/00group-media/dees-tile-pdf/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts
@@ -11,7 +11,7 @@ export const demo = () => {
     for (let i = 0; i < count; i++) {
       const pdfUrl = samplePdfs[i % samplePdfs.length];
       items.push(html`
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="${pdfUrl}"
           clickable="true"
           grid-mode
@@ -19,7 +19,7 @@ export const demo = () => {
             console.log('PDF Tile clicked:', e.detail);
             alert(`PDF clicked: ${e.detail.pageCount} pages`);
           }}
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       `);
     }
     return items;
@@ -67,56 +67,56 @@ export const demo = () => {
     <div class="demo-container">
       <div class="demo-section">
         <h3>Single PDF Tile</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
           clickable="true"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       </div>
 
       <div class="demo-section">
         <h3>Different Sizes</h3>
         <div class="preview-row">
           <div class="preview-label">Small:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
             size="small"
             pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
             clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
         </div>
 
         <div class="preview-row">
           <div class="preview-label">Default:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
             pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
             clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
         </div>
 
         <div class="preview-row">
           <div class="preview-label">Large:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
             size="large"
             pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
             clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>With Label</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
           clickable="true"
           label="Research Paper.pdf"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       </div>
 
       <div class="demo-section">
         <h3>Non-Clickable</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
           clickable="false"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       </div>
 
       <div class="demo-section">
diff --git a/ts_web/elements/00group-media/dees-tile-pdf/index.ts b/ts_web/elements/00group-media/dees-thumbnail-pdf/index.ts
similarity index 100%
rename from ts_web/elements/00group-media/dees-tile-pdf/index.ts
rename to ts_web/elements/00group-media/dees-thumbnail-pdf/index.ts
diff --git a/ts_web/elements/00group-media/dees-tile-pdf/styles.ts b/ts_web/elements/00group-media/dees-thumbnail-pdf/styles.ts
similarity index 100%
rename from ts_web/elements/00group-media/dees-tile-pdf/styles.ts
rename to ts_web/elements/00group-media/dees-thumbnail-pdf/styles.ts
diff --git a/ts_web/elements/00group-media/dees-tile-shared/DeesTileBase.ts b/ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts
similarity index 95%
rename from ts_web/elements/00group-media/dees-tile-shared/DeesTileBase.ts
rename to ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts
index 8cbde75..0f58734 100644
--- a/ts_web/elements/00group-media/dees-tile-shared/DeesTileBase.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts
@@ -5,11 +5,11 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { tileBaseStyles } from './styles.js';
+import { thumbnailBaseStyles } from './styles.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
-export abstract class DeesTileBase extends DeesElement {
-  public static styles: CSSResult[] = tileBaseStyles as any;
+export abstract class DeesThumbnailBase extends DeesElement {
+  public static styles: CSSResult[] = thumbnailBaseStyles as any;
 
   @property({ type: Boolean })
   accessor clickable: boolean = true;
diff --git a/ts_web/elements/00group-media/dees-thumbnail-shared/index.ts b/ts_web/elements/00group-media/dees-thumbnail-shared/index.ts
new file mode 100644
index 0000000..df9e537
--- /dev/null
+++ b/ts_web/elements/00group-media/dees-thumbnail-shared/index.ts
@@ -0,0 +1,2 @@
+export { DeesThumbnailBase } from './DeesThumbnailBase.js';
+export { thumbnailBaseStyles } from './styles.js';
diff --git a/ts_web/elements/00group-media/dees-tile-shared/styles.ts b/ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
similarity index 99%
rename from ts_web/elements/00group-media/dees-tile-shared/styles.ts
rename to ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
index 4236bb1..4ab12e9 100644
--- a/ts_web/elements/00group-media/dees-tile-shared/styles.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
@@ -1,6 +1,6 @@
 import { css, cssManager } from '@design.estate/dees-element';
 
-export const tileBaseStyles = [
+export const thumbnailBaseStyles = [
   cssManager.defaultStyles,
   css`
     :host {
diff --git a/ts_web/elements/00group-media/dees-tile-video/component.ts b/ts_web/elements/00group-media/dees-thumbnail-video/component.ts
similarity index 95%
rename from ts_web/elements/00group-media/dees-tile-video/component.ts
rename to ts_web/elements/00group-media/dees-thumbnail-video/component.ts
index c1988dc..877b027 100644
--- a/ts_web/elements/00group-media/dees-tile-video/component.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-video/component.ts
@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-video': DeesTileVideo;
+    'dees-thumbnail-video': DeesThumbnailVideo;
   }
 }
 
-@customElement('dees-tile-video')
-export class DeesTileVideo extends DeesTileBase {
+@customElement('dees-thumbnail-video')
+export class DeesThumbnailVideo extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .video-wrapper {
         position: relative;
diff --git a/ts_web/elements/00group-media/dees-tile-video/demo.ts b/ts_web/elements/00group-media/dees-thumbnail-video/demo.ts
similarity index 78%
rename from ts_web/elements/00group-media/dees-tile-video/demo.ts
rename to ts_web/elements/00group-media/dees-thumbnail-video/demo.ts
index 5d69b98..e7dd5e6 100644
--- a/ts_web/elements/00group-media/dees-tile-video/demo.ts
+++ b/ts_web/elements/00group-media/dees-thumbnail-video/demo.ts
@@ -26,54 +26,54 @@ export const demo = () => html`
     <div class="demo-section">
       <h3>Video Tiles</h3>
       <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-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-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/movie.mp4"
           poster="https://picsum.photos/400/300"
           label="movie.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="another-video.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Size Variants</h3>
       <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-video
           size="small"
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="small.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="default.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           size="large"
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="large.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>With Poster Image</h3>
-      <dees-tile-video
+      <dees-thumbnail-video
         src="https://www.w3schools.com/html/movie.mp4"
         poster="https://picsum.photos/600/400"
         label="poster-video.mp4"
-      ></dees-tile-video>
+      ></dees-thumbnail-video>
     </div>
   </div>
 `;
diff --git a/ts_web/elements/00group-media/dees-tile-video/index.ts b/ts_web/elements/00group-media/dees-thumbnail-video/index.ts
similarity index 100%
rename from ts_web/elements/00group-media/dees-tile-video/index.ts
rename to ts_web/elements/00group-media/dees-thumbnail-video/index.ts
diff --git a/ts_web/elements/00group-media/dees-tile-shared/index.ts b/ts_web/elements/00group-media/dees-tile-shared/index.ts
deleted file mode 100644
index 542c362..0000000
--- a/ts_web/elements/00group-media/dees-tile-shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DeesTileBase } from './DeesTileBase.js';
-export { tileBaseStyles } from './styles.js';
diff --git a/ts_web/elements/00group-media/index.ts b/ts_web/elements/00group-media/index.ts
index 37aac64..97042a9 100644
--- a/ts_web/elements/00group-media/index.ts
+++ b/ts_web/elements/00group-media/index.ts
@@ -8,11 +8,11 @@ export * from './dees-preview/index.js';
 export * from './dees-pdf-shared/index.js';
 export * from './dees-pdf-viewer/index.js';
 
-// Tile Components
-export * from './dees-tile-shared/index.js';
-export * from './dees-tile-pdf/index.js';
-export * from './dees-tile-image/index.js';
-export * from './dees-tile-audio/index.js';
-export * from './dees-tile-video/index.js';
-export * from './dees-tile-note/index.js';
-export * from './dees-tile-folder/index.js';
+// Thumbnail Components
+export * from './dees-thumbnail-shared/index.js';
+export * from './dees-thumbnail-pdf/index.js';
+export * from './dees-thumbnail-image/index.js';
+export * from './dees-thumbnail-audio/index.js';
+export * from './dees-thumbnail-video/index.js';
+export * from './dees-thumbnail-note/index.js';
+export * from './dees-thumbnail-folder/index.js';