@design.estate/dees-catalog 3.52.5 → 3.54.0

package/dist_bundle/bundle.js

@@ -174727,11 +174727,9 @@ var _DeesDataviewCodebox = class _DeesDataviewCodebox extends (_a56 = DeesElemen
           text-align: left;
           font-size: 16px;
           font-family: ${cssGeistFontFamily};
-          height: 100%;
           box-sizing: border-box;
         }
         dees-tile {
-          height: 100%;
           color: ${cssManager.bdTheme("#09090b", "#fafafa")};
         }
 
@@ -174788,8 +174786,6 @@ var _DeesDataviewCodebox = class _DeesDataviewCodebox extends (_a56 = DeesElemen
         }
 
         .codegrid {
-          position: absolute;
-          inset: 0;
           display: grid;
           grid-template-columns: 50px auto;
           overflow: auto;
@@ -185534,6 +185530,13 @@ var viewerStyles = [
       flex-direction: column;
       height: 100%;
       overflow: hidden;
+      order: 0;
+    }
+
+    .sidebar-right .sidebar {
+      border-right: none;
+      border-left: 1px solid ${cssManager.bdTheme("hsl(214 31% 91%)", "hsl(217 25% 22%)")};
+      order: 1;
     }
 
     .sidebar-header {
@@ -185869,9 +185872,9 @@ var demo4 = /* @__PURE__ */ __name(() => b2`
 // ts_web/elements/00group-media/dees-pdf-viewer/component.ts
 init_dist_ts30();
 init_dees_icon();
-var _pdfFileSize_dec, _pageData_dec, _thumbnailData_dec, _documentId_dec, _loading_dec7, _currentZoom_dec, _totalPages_dec, _currentPage_dec, _showSidebar_dec, _showToolbar_dec2, _initialZoom_dec, _initialPage_dec, _pdfUrl_dec, _a78, _DeesPdfViewer_decorators, _init79, _pdfUrl, _initialPage, _initialZoom, _showToolbar2, _showSidebar, _currentPage, _totalPages, _currentZoom, _loading7, _documentId, _thumbnailData, _pageData, _pdfFileSize;
+var _pdfFileSize_dec, _pageData_dec, _thumbnailData_dec, _documentId_dec, _loading_dec7, _currentZoom_dec, _totalPages_dec, _currentPage_dec, _sidebarPosition_dec, _showSidebar_dec, _showToolbar_dec2, _initialZoom_dec, _initialPage_dec, _pdfUrl_dec, _a78, _DeesPdfViewer_decorators, _init79, _pdfUrl, _initialPage, _initialZoom, _showToolbar2, _showSidebar, _sidebarPosition, _currentPage, _totalPages, _currentZoom, _loading7, _documentId, _thumbnailData, _pageData, _pdfFileSize;
 _DeesPdfViewer_decorators = [customElement("dees-pdf-viewer")];
-var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_dec = [n5({ type: String })], _initialPage_dec = [n5({ type: Number })], _initialZoom_dec = [n5({ type: String })], _showToolbar_dec2 = [n5({ type: Boolean })], _showSidebar_dec = [n5({ type: Boolean })], _currentPage_dec = [n5({ type: Number })], _totalPages_dec = [n5({ type: Number })], _currentZoom_dec = [n5({ type: Number })], _loading_dec7 = [n5({ type: Boolean })], _documentId_dec = [n5({ type: String })], _thumbnailData_dec = [n5({ type: Array })], _pageData_dec = [n5({ type: Array })], _pdfFileSize_dec = [n5({ type: Number })], _a78) {
+var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_dec = [n5({ type: String })], _initialPage_dec = [n5({ type: Number })], _initialZoom_dec = [n5({ type: String })], _showToolbar_dec2 = [n5({ type: Boolean })], _showSidebar_dec = [n5({ type: Boolean })], _sidebarPosition_dec = [n5({ type: String })], _currentPage_dec = [n5({ type: Number })], _totalPages_dec = [n5({ type: Number })], _currentZoom_dec = [n5({ type: Number })], _loading_dec7 = [n5({ type: Boolean })], _documentId_dec = [n5({ type: String })], _thumbnailData_dec = [n5({ type: Array })], _pageData_dec = [n5({ type: Array })], _pdfFileSize_dec = [n5({ type: Number })], _a78) {
   constructor() {
     super();
     __privateAdd(this, _pdfUrl, __runInitializers(_init79, 8, this, "")), __runInitializers(_init79, 11, this);
@@ -185879,14 +185882,15 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
     __privateAdd(this, _initialZoom, __runInitializers(_init79, 16, this, "auto")), __runInitializers(_init79, 19, this);
     __privateAdd(this, _showToolbar2, __runInitializers(_init79, 20, this, true)), __runInitializers(_init79, 23, this);
     __privateAdd(this, _showSidebar, __runInitializers(_init79, 24, this, false)), __runInitializers(_init79, 27, this);
-    __privateAdd(this, _currentPage, __runInitializers(_init79, 28, this, 1)), __runInitializers(_init79, 31, this);
-    __privateAdd(this, _totalPages, __runInitializers(_init79, 32, this, 1)), __runInitializers(_init79, 35, this);
-    __privateAdd(this, _currentZoom, __runInitializers(_init79, 36, this, 1)), __runInitializers(_init79, 39, this);
-    __privateAdd(this, _loading7, __runInitializers(_init79, 40, this, false)), __runInitializers(_init79, 43, this);
-    __privateAdd(this, _documentId, __runInitializers(_init79, 44, this, "")), __runInitializers(_init79, 47, this);
-    __privateAdd(this, _thumbnailData, __runInitializers(_init79, 48, this, [])), __runInitializers(_init79, 51, this);
-    __privateAdd(this, _pageData, __runInitializers(_init79, 52, this, [])), __runInitializers(_init79, 55, this);
-    __privateAdd(this, _pdfFileSize, __runInitializers(_init79, 56, this, 0)), __runInitializers(_init79, 59, this);
+    __privateAdd(this, _sidebarPosition, __runInitializers(_init79, 28, this, "left")), __runInitializers(_init79, 31, this);
+    __privateAdd(this, _currentPage, __runInitializers(_init79, 32, this, 1)), __runInitializers(_init79, 35, this);
+    __privateAdd(this, _totalPages, __runInitializers(_init79, 36, this, 1)), __runInitializers(_init79, 39, this);
+    __privateAdd(this, _currentZoom, __runInitializers(_init79, 40, this, 1)), __runInitializers(_init79, 43, this);
+    __privateAdd(this, _loading7, __runInitializers(_init79, 44, this, false)), __runInitializers(_init79, 47, this);
+    __privateAdd(this, _documentId, __runInitializers(_init79, 48, this, "")), __runInitializers(_init79, 51, this);
+    __privateAdd(this, _thumbnailData, __runInitializers(_init79, 52, this, [])), __runInitializers(_init79, 55, this);
+    __privateAdd(this, _pageData, __runInitializers(_init79, 56, this, [])), __runInitializers(_init79, 59, this);
+    __privateAdd(this, _pdfFileSize, __runInitializers(_init79, 60, this, 0)), __runInitializers(_init79, 63, this);
     __publicField(this, "pdfDocument");
     __publicField(this, "renderState", "idle");
     __publicField(this, "renderAbortController", null);
@@ -185923,7 +185927,7 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
   }
   render() {
     return b2`
-      <dees-tile class="${this.showSidebar ? "with-sidebar" : ""}">
+      <dees-tile class="${this.showSidebar ? "with-sidebar" : ""} sidebar-${this.sidebarPosition}">
         ${this.showToolbar ? b2`
           <div slot="header" class="toolbar">
             <div class="toolbar-group">
@@ -186085,7 +186089,7 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
               <span class="pdf-footer-item">${this.formatFileSize(this.pdfFileSize)}</span>
             ` : ""}
           </div>
-          <div class="pdf-footer-center" style="margin-left: ${this.showSidebar ? "100px" : "0"}">
+          <div class="pdf-footer-center" style="margin-left: ${this.showSidebar && this.sidebarPosition === "left" ? "100px" : this.showSidebar && this.sidebarPosition === "right" ? "-100px" : "0"}">
             <span>Page ${this.currentPage} of ${this.totalPages}</span>
           </div>
           <div class="pdf-footer-right">
@@ -186872,6 +186876,7 @@ _initialPage = new WeakMap();
 _initialZoom = new WeakMap();
 _showToolbar2 = new WeakMap();
 _showSidebar = new WeakMap();
+_sidebarPosition = new WeakMap();
 _currentPage = new WeakMap();
 _totalPages = new WeakMap();
 _currentZoom = new WeakMap();
@@ -186885,6 +186890,7 @@ __decorateElement(_init79, 4, "initialPage", _initialPage_dec, _DeesPdfViewer, _
 __decorateElement(_init79, 4, "initialZoom", _initialZoom_dec, _DeesPdfViewer, _initialZoom);
 __decorateElement(_init79, 4, "showToolbar", _showToolbar_dec2, _DeesPdfViewer, _showToolbar2);
 __decorateElement(_init79, 4, "showSidebar", _showSidebar_dec, _DeesPdfViewer, _showSidebar);
+__decorateElement(_init79, 4, "sidebarPosition", _sidebarPosition_dec, _DeesPdfViewer, _sidebarPosition);
 __decorateElement(_init79, 4, "currentPage", _currentPage_dec, _DeesPdfViewer, _currentPage);
 __decorateElement(_init79, 4, "totalPages", _totalPages_dec, _DeesPdfViewer, _totalPages);
 __decorateElement(_init79, 4, "currentZoom", _currentZoom_dec, _DeesPdfViewer, _currentZoom);
@@ -187724,9 +187730,9 @@ var PerformanceMonitor = class {
   }
 };
 
-// ts_web/elements/00group-media/dees-tile-shared/styles.ts
+// ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
 init_dist_ts30();
-var tileBaseStyles = [
+var thumbnailBaseStyles = [
   cssManager.defaultStyles,
   i`
     :host {
@@ -187899,11 +187905,11 @@ var tileBaseStyles = [
   `
 ];
 
-// ts_web/elements/00group-media/dees-tile-shared/DeesTileBase.ts
+// ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts
 init_dist_ts30();
 init_dees_icon();
 var _label_dec7, _size_dec7, _error_dec6, _loading_dec9, _clickable_dec, _a80, _init81, _clickable, _loading9, _error6, _size7, _label7;
-var _DeesTileBase = class _DeesTileBase extends (_a80 = DeesElement, _clickable_dec = [n5({ type: Boolean })], _loading_dec9 = [n5({ type: Boolean })], _error_dec6 = [n5({ type: Boolean })], _size_dec7 = [n5({ type: String, reflect: true })], _label_dec7 = [n5({ type: String })], _a80) {
+var _DeesThumbnailBase = class _DeesThumbnailBase extends (_a80 = DeesElement, _clickable_dec = [n5({ type: Boolean })], _loading_dec9 = [n5({ type: Boolean })], _error_dec6 = [n5({ type: Boolean })], _size_dec7 = [n5({ type: String, reflect: true })], _label_dec7 = [n5({ type: String })], _a80) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _clickable, __runInitializers(_init81, 8, this, true)), __runInitializers(_init81, 11, this);
@@ -188010,17 +188016,17 @@ _loading9 = new WeakMap();
 _error6 = new WeakMap();
 _size7 = new WeakMap();
 _label7 = new WeakMap();
-__decorateElement(_init81, 4, "clickable", _clickable_dec, _DeesTileBase, _clickable);
-__decorateElement(_init81, 4, "loading", _loading_dec9, _DeesTileBase, _loading9);
-__decorateElement(_init81, 4, "error", _error_dec6, _DeesTileBase, _error6);
-__decorateElement(_init81, 4, "size", _size_dec7, _DeesTileBase, _size7);
-__decorateElement(_init81, 4, "label", _label_dec7, _DeesTileBase, _label7);
-__decoratorMetadata(_init81, _DeesTileBase);
-__name(_DeesTileBase, "DeesTileBase");
-__publicField(_DeesTileBase, "styles", tileBaseStyles);
-var DeesTileBase = _DeesTileBase;
-
-// ts_web/elements/00group-media/dees-tile-pdf/styles.ts
+__decorateElement(_init81, 4, "clickable", _clickable_dec, _DeesThumbnailBase, _clickable);
+__decorateElement(_init81, 4, "loading", _loading_dec9, _DeesThumbnailBase, _loading9);
+__decorateElement(_init81, 4, "error", _error_dec6, _DeesThumbnailBase, _error6);
+__decorateElement(_init81, 4, "size", _size_dec7, _DeesThumbnailBase, _size7);
+__decorateElement(_init81, 4, "label", _label_dec7, _DeesThumbnailBase, _label7);
+__decoratorMetadata(_init81, _DeesThumbnailBase);
+__name(_DeesThumbnailBase, "DeesThumbnailBase");
+__publicField(_DeesThumbnailBase, "styles", thumbnailBaseStyles);
+var DeesThumbnailBase = _DeesThumbnailBase;
+
+// ts_web/elements/00group-media/dees-thumbnail-pdf/styles.ts
 init_dist_ts30();
 var tilePdfStyles = i`
   .preview-stack {
@@ -188065,7 +188071,7 @@ var tilePdfStyles = i`
   }
 `;
 
-// ts_web/elements/00group-media/dees-tile-pdf/demo.ts
+// ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts
 init_dist_ts30();
 var demo5 = /* @__PURE__ */ __name(() => {
   const samplePdfs = [
@@ -188077,7 +188083,7 @@ var demo5 = /* @__PURE__ */ __name(() => {
     for (let i11 = 0; i11 < count2; i11++) {
       const pdfUrl = samplePdfs[i11 % samplePdfs.length];
       items.push(b2`
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="${pdfUrl}"
           clickable="true"
           grid-mode
@@ -188085,7 +188091,7 @@ var demo5 = /* @__PURE__ */ __name(() => {
         console.log("PDF Tile clicked:", e11.detail);
         alert(`PDF clicked: ${e11.detail.pageCount} pages`);
       }}
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       `);
     }
     return items;
@@ -188132,56 +188138,56 @@ var demo5 = /* @__PURE__ */ __name(() => {
     <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">
@@ -188194,11 +188200,11 @@ var demo5 = /* @__PURE__ */ __name(() => {
   `;
 }, "demo");
 
-// ts_web/elements/00group-media/dees-tile-pdf/component.ts
+// ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts
 init_dist_ts30();
-var _fileSize_dec2, _isA4Format_dec, _isHovering_dec, _rendered_dec, _pageCount_dec, _currentPreviewPage_dec, _pdfUrl_dec2, _a81, _DeesTilePdf_decorators, _init82, _pdfUrl2, _currentPreviewPage, _pageCount, _rendered, _isHovering, _isA4Format, _fileSize2;
-_DeesTilePdf_decorators = [customElement("dees-tile-pdf")];
-var _DeesTilePdf = class _DeesTilePdf extends (_a81 = DeesTileBase, _pdfUrl_dec2 = [n5({ type: String })], _currentPreviewPage_dec = [n5({ type: Number })], _pageCount_dec = [n5({ type: Number })], _rendered_dec = [n5({ type: Boolean })], _isHovering_dec = [n5({ type: Boolean })], _isA4Format_dec = [n5({ type: Boolean })], _fileSize_dec2 = [r5()], _a81) {
+var _fileSize_dec2, _isA4Format_dec, _isHovering_dec, _rendered_dec, _pageCount_dec, _currentPreviewPage_dec, _pdfUrl_dec2, _a81, _DeesThumbnailPdf_decorators, _init82, _pdfUrl2, _currentPreviewPage, _pageCount, _rendered, _isHovering, _isA4Format, _fileSize2;
+_DeesThumbnailPdf_decorators = [customElement("dees-thumbnail-pdf")];
+var _DeesThumbnailPdf = class _DeesThumbnailPdf extends (_a81 = DeesThumbnailBase, _pdfUrl_dec2 = [n5({ type: String })], _currentPreviewPage_dec = [n5({ type: Number })], _pageCount_dec = [n5({ type: Number })], _rendered_dec = [n5({ type: Boolean })], _isHovering_dec = [n5({ type: Boolean })], _isA4Format_dec = [n5({ type: Boolean })], _fileSize_dec2 = [r5()], _a81) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _pdfUrl2, __runInitializers(_init82, 8, this, "")), __runInitializers(_init82, 11, this);
@@ -188539,22 +188545,22 @@ _rendered = new WeakMap();
 _isHovering = new WeakMap();
 _isA4Format = new WeakMap();
 _fileSize2 = new WeakMap();
-__decorateElement(_init82, 4, "pdfUrl", _pdfUrl_dec2, _DeesTilePdf, _pdfUrl2);
-__decorateElement(_init82, 4, "currentPreviewPage", _currentPreviewPage_dec, _DeesTilePdf, _currentPreviewPage);
-__decorateElement(_init82, 4, "pageCount", _pageCount_dec, _DeesTilePdf, _pageCount);
-__decorateElement(_init82, 4, "rendered", _rendered_dec, _DeesTilePdf, _rendered);
-__decorateElement(_init82, 4, "isHovering", _isHovering_dec, _DeesTilePdf, _isHovering);
-__decorateElement(_init82, 4, "isA4Format", _isA4Format_dec, _DeesTilePdf, _isA4Format);
-__decorateElement(_init82, 4, "fileSize", _fileSize_dec2, _DeesTilePdf, _fileSize2);
-_DeesTilePdf = __decorateElement(_init82, 0, "DeesTilePdf", _DeesTilePdf_decorators, _DeesTilePdf);
-__name(_DeesTilePdf, "DeesTilePdf");
-__publicField(_DeesTilePdf, "demo", demo5);
-__publicField(_DeesTilePdf, "demoGroups", ["Media", "PDF"]);
-__publicField(_DeesTilePdf, "styles", [...tileBaseStyles, tilePdfStyles]);
-__runInitializers(_init82, 1, _DeesTilePdf);
-var DeesTilePdf = _DeesTilePdf;
-
-// ts_web/elements/00group-media/dees-tile-image/demo.ts
+__decorateElement(_init82, 4, "pdfUrl", _pdfUrl_dec2, _DeesThumbnailPdf, _pdfUrl2);
+__decorateElement(_init82, 4, "currentPreviewPage", _currentPreviewPage_dec, _DeesThumbnailPdf, _currentPreviewPage);
+__decorateElement(_init82, 4, "pageCount", _pageCount_dec, _DeesThumbnailPdf, _pageCount);
+__decorateElement(_init82, 4, "rendered", _rendered_dec, _DeesThumbnailPdf, _rendered);
+__decorateElement(_init82, 4, "isHovering", _isHovering_dec, _DeesThumbnailPdf, _isHovering);
+__decorateElement(_init82, 4, "isA4Format", _isA4Format_dec, _DeesThumbnailPdf, _isA4Format);
+__decorateElement(_init82, 4, "fileSize", _fileSize_dec2, _DeesThumbnailPdf, _fileSize2);
+_DeesThumbnailPdf = __decorateElement(_init82, 0, "DeesThumbnailPdf", _DeesThumbnailPdf_decorators, _DeesThumbnailPdf);
+__name(_DeesThumbnailPdf, "DeesThumbnailPdf");
+__publicField(_DeesThumbnailPdf, "demo", demo5);
+__publicField(_DeesThumbnailPdf, "demoGroups", ["Media", "PDF"]);
+__publicField(_DeesThumbnailPdf, "styles", [...thumbnailBaseStyles, tilePdfStyles]);
+__runInitializers(_init82, 1, _DeesThumbnailPdf);
+var DeesThumbnailPdf = _DeesThumbnailPdf;
+
+// ts_web/elements/00group-media/dees-thumbnail-image/demo.ts
 init_dist_ts30();
 var demo6 = /* @__PURE__ */ __name(() => b2`
   <style>
@@ -188582,68 +188588,68 @@ var demo6 = /* @__PURE__ */ __name(() => b2`
     <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=${(e11) => console.log("Image clicked:", e11.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>
 `, "demo");
 
-// ts_web/elements/00group-media/dees-tile-image/component.ts
+// ts_web/elements/00group-media/dees-thumbnail-image/component.ts
 init_dist_ts30();
-var _imageHeight_dec, _imageWidth_dec, _imageLoaded_dec, _alt_dec2, _src_dec4, _a82, _DeesTileImage_decorators, _init83, _src4, _alt2, _imageLoaded, _imageWidth, _imageHeight;
-_DeesTileImage_decorators = [customElement("dees-tile-image")];
-var _DeesTileImage = class _DeesTileImage extends (_a82 = DeesTileBase, _src_dec4 = [n5({ type: String })], _alt_dec2 = [n5({ type: String })], _imageLoaded_dec = [r5()], _imageWidth_dec = [r5()], _imageHeight_dec = [r5()], _a82) {
+var _imageHeight_dec, _imageWidth_dec, _imageLoaded_dec, _alt_dec2, _src_dec4, _a82, _DeesThumbnailImage_decorators, _init83, _src4, _alt2, _imageLoaded, _imageWidth, _imageHeight;
+_DeesThumbnailImage_decorators = [customElement("dees-thumbnail-image")];
+var _DeesThumbnailImage = class _DeesThumbnailImage extends (_a82 = DeesThumbnailBase, _src_dec4 = [n5({ type: String })], _alt_dec2 = [n5({ type: String })], _imageLoaded_dec = [r5()], _imageWidth_dec = [r5()], _imageHeight_dec = [r5()], _a82) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _src4, __runInitializers(_init83, 8, this, "")), __runInitializers(_init83, 11, this);
@@ -188726,17 +188732,17 @@ _alt2 = new WeakMap();
 _imageLoaded = new WeakMap();
 _imageWidth = new WeakMap();
 _imageHeight = new WeakMap();
-__decorateElement(_init83, 4, "src", _src_dec4, _DeesTileImage, _src4);
-__decorateElement(_init83, 4, "alt", _alt_dec2, _DeesTileImage, _alt2);
-__decorateElement(_init83, 4, "imageLoaded", _imageLoaded_dec, _DeesTileImage, _imageLoaded);
-__decorateElement(_init83, 4, "imageWidth", _imageWidth_dec, _DeesTileImage, _imageWidth);
-__decorateElement(_init83, 4, "imageHeight", _imageHeight_dec, _DeesTileImage, _imageHeight);
-_DeesTileImage = __decorateElement(_init83, 0, "DeesTileImage", _DeesTileImage_decorators, _DeesTileImage);
-__name(_DeesTileImage, "DeesTileImage");
-__publicField(_DeesTileImage, "demo", demo6);
-__publicField(_DeesTileImage, "demoGroups", ["Media"]);
-__publicField(_DeesTileImage, "styles", [
-  ...tileBaseStyles,
+__decorateElement(_init83, 4, "src", _src_dec4, _DeesThumbnailImage, _src4);
+__decorateElement(_init83, 4, "alt", _alt_dec2, _DeesThumbnailImage, _alt2);
+__decorateElement(_init83, 4, "imageLoaded", _imageLoaded_dec, _DeesThumbnailImage, _imageLoaded);
+__decorateElement(_init83, 4, "imageWidth", _imageWidth_dec, _DeesThumbnailImage, _imageWidth);
+__decorateElement(_init83, 4, "imageHeight", _imageHeight_dec, _DeesThumbnailImage, _imageHeight);
+_DeesThumbnailImage = __decorateElement(_init83, 0, "DeesThumbnailImage", _DeesThumbnailImage_decorators, _DeesThumbnailImage);
+__name(_DeesThumbnailImage, "DeesThumbnailImage");
+__publicField(_DeesThumbnailImage, "demo", demo6);
+__publicField(_DeesThumbnailImage, "demoGroups", ["Media"]);
+__publicField(_DeesThumbnailImage, "styles", [
+  ...thumbnailBaseStyles,
   i`
       .image-wrapper {
         position: relative;
@@ -188770,10 +188776,10 @@ __publicField(_DeesTileImage, "styles", [
 
     `
 ]);
-__runInitializers(_init83, 1, _DeesTileImage);
-var DeesTileImage = _DeesTileImage;
+__runInitializers(_init83, 1, _DeesThumbnailImage);
+var DeesThumbnailImage = _DeesThumbnailImage;
 
-// ts_web/elements/00group-media/dees-tile-audio/demo.ts
+// ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts
 init_dist_ts30();
 var demo7 = /* @__PURE__ */ __name(() => b2`
   <style>
@@ -188801,61 +188807,61 @@ var demo7 = /* @__PURE__ */ __name(() => b2`
     <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=${(e11) => console.log("Audio clicked:", e11.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>
 `, "demo");
 
-// ts_web/elements/00group-media/dees-tile-audio/component.ts
+// ts_web/elements/00group-media/dees-thumbnail-audio/component.ts
 init_dist_ts30();
-var _isPreviewPlaying_dec, _waveformReady_dec2, _waveformData_dec2, _duration_dec4, _artist_dec2, _title_dec3, _src_dec5, _a83, _DeesTileAudio_decorators, _init84, _src5, _title3, _artist2, _duration4, _waveformData2, _waveformReady2, _isPreviewPlaying;
-_DeesTileAudio_decorators = [customElement("dees-tile-audio")];
-var _DeesTileAudio = class _DeesTileAudio extends (_a83 = DeesTileBase, _src_dec5 = [n5({ type: String })], _title_dec3 = [n5({ type: String })], _artist_dec2 = [n5({ type: String })], _duration_dec4 = [r5()], _waveformData_dec2 = [r5()], _waveformReady_dec2 = [r5()], _isPreviewPlaying_dec = [r5()], _a83) {
+var _isPreviewPlaying_dec, _waveformReady_dec2, _waveformData_dec2, _duration_dec4, _artist_dec2, _title_dec3, _src_dec5, _a83, _DeesThumbnailAudio_decorators, _init84, _src5, _title3, _artist2, _duration4, _waveformData2, _waveformReady2, _isPreviewPlaying;
+_DeesThumbnailAudio_decorators = [customElement("dees-thumbnail-audio")];
+var _DeesThumbnailAudio = class _DeesThumbnailAudio extends (_a83 = DeesThumbnailBase, _src_dec5 = [n5({ type: String })], _title_dec3 = [n5({ type: String })], _artist_dec2 = [n5({ type: String })], _duration_dec4 = [r5()], _waveformData_dec2 = [r5()], _waveformReady_dec2 = [r5()], _isPreviewPlaying_dec = [r5()], _a83) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _src5, __runInitializers(_init84, 8, this, "")), __runInitializers(_init84, 11, this);
@@ -189036,19 +189042,19 @@ _duration4 = new WeakMap();
 _waveformData2 = new WeakMap();
 _waveformReady2 = new WeakMap();
 _isPreviewPlaying = new WeakMap();
-__decorateElement(_init84, 4, "src", _src_dec5, _DeesTileAudio, _src5);
-__decorateElement(_init84, 4, "title", _title_dec3, _DeesTileAudio, _title3);
-__decorateElement(_init84, 4, "artist", _artist_dec2, _DeesTileAudio, _artist2);
-__decorateElement(_init84, 4, "duration", _duration_dec4, _DeesTileAudio, _duration4);
-__decorateElement(_init84, 4, "waveformData", _waveformData_dec2, _DeesTileAudio, _waveformData2);
-__decorateElement(_init84, 4, "waveformReady", _waveformReady_dec2, _DeesTileAudio, _waveformReady2);
-__decorateElement(_init84, 4, "isPreviewPlaying", _isPreviewPlaying_dec, _DeesTileAudio, _isPreviewPlaying);
-_DeesTileAudio = __decorateElement(_init84, 0, "DeesTileAudio", _DeesTileAudio_decorators, _DeesTileAudio);
-__name(_DeesTileAudio, "DeesTileAudio");
-__publicField(_DeesTileAudio, "demo", demo7);
-__publicField(_DeesTileAudio, "demoGroups", ["Media"]);
-__publicField(_DeesTileAudio, "styles", [
-  ...tileBaseStyles,
+__decorateElement(_init84, 4, "src", _src_dec5, _DeesThumbnailAudio, _src5);
+__decorateElement(_init84, 4, "title", _title_dec3, _DeesThumbnailAudio, _title3);
+__decorateElement(_init84, 4, "artist", _artist_dec2, _DeesThumbnailAudio, _artist2);
+__decorateElement(_init84, 4, "duration", _duration_dec4, _DeesThumbnailAudio, _duration4);
+__decorateElement(_init84, 4, "waveformData", _waveformData_dec2, _DeesThumbnailAudio, _waveformData2);
+__decorateElement(_init84, 4, "waveformReady", _waveformReady_dec2, _DeesThumbnailAudio, _waveformReady2);
+__decorateElement(_init84, 4, "isPreviewPlaying", _isPreviewPlaying_dec, _DeesThumbnailAudio, _isPreviewPlaying);
+_DeesThumbnailAudio = __decorateElement(_init84, 0, "DeesThumbnailAudio", _DeesThumbnailAudio_decorators, _DeesThumbnailAudio);
+__name(_DeesThumbnailAudio, "DeesThumbnailAudio");
+__publicField(_DeesThumbnailAudio, "demo", demo7);
+__publicField(_DeesThumbnailAudio, "demoGroups", ["Media"]);
+__publicField(_DeesThumbnailAudio, "styles", [
+  ...thumbnailBaseStyles,
   i`
       .audio-content {
         position: relative;
@@ -189146,10 +189152,10 @@ __publicField(_DeesTileAudio, "styles", [
       }
     `
 ]);
-__runInitializers(_init84, 1, _DeesTileAudio);
-var DeesTileAudio = _DeesTileAudio;
+__runInitializers(_init84, 1, _DeesThumbnailAudio);
+var DeesThumbnailAudio = _DeesThumbnailAudio;
 
-// ts_web/elements/00group-media/dees-tile-video/demo.ts
+// ts_web/elements/00group-media/dees-thumbnail-video/demo.ts
 init_dist_ts30();
 var demo8 = /* @__PURE__ */ __name(() => b2`
   <style>
@@ -189177,63 +189183,63 @@ var demo8 = /* @__PURE__ */ __name(() => b2`
     <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=${(e11) => console.log("Video clicked:", e11.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>
 `, "demo");
 
-// ts_web/elements/00group-media/dees-tile-video/component.ts
+// ts_web/elements/00group-media/dees-thumbnail-video/component.ts
 init_dist_ts30();
-var _isHovering_dec2, _thumbnailCaptured_dec, _duration_dec5, _poster_dec2, _src_dec6, _a84, _DeesTileVideo_decorators, _init85, _src6, _poster2, _duration5, _thumbnailCaptured, _isHovering2;
-_DeesTileVideo_decorators = [customElement("dees-tile-video")];
-var _DeesTileVideo = class _DeesTileVideo extends (_a84 = DeesTileBase, _src_dec6 = [n5({ type: String })], _poster_dec2 = [n5({ type: String })], _duration_dec5 = [r5()], _thumbnailCaptured_dec = [r5()], _isHovering_dec2 = [r5()], _a84) {
+var _isHovering_dec2, _thumbnailCaptured_dec, _duration_dec5, _poster_dec2, _src_dec6, _a84, _DeesThumbnailVideo_decorators, _init85, _src6, _poster2, _duration5, _thumbnailCaptured, _isHovering2;
+_DeesThumbnailVideo_decorators = [customElement("dees-thumbnail-video")];
+var _DeesThumbnailVideo = class _DeesThumbnailVideo extends (_a84 = DeesThumbnailBase, _src_dec6 = [n5({ type: String })], _poster_dec2 = [n5({ type: String })], _duration_dec5 = [r5()], _thumbnailCaptured_dec = [r5()], _isHovering_dec2 = [r5()], _a84) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _src6, __runInitializers(_init85, 8, this, "")), __runInitializers(_init85, 11, this);
@@ -189413,17 +189419,17 @@ _poster2 = new WeakMap();
 _duration5 = new WeakMap();
 _thumbnailCaptured = new WeakMap();
 _isHovering2 = new WeakMap();
-__decorateElement(_init85, 4, "src", _src_dec6, _DeesTileVideo, _src6);
-__decorateElement(_init85, 4, "poster", _poster_dec2, _DeesTileVideo, _poster2);
-__decorateElement(_init85, 4, "duration", _duration_dec5, _DeesTileVideo, _duration5);
-__decorateElement(_init85, 4, "thumbnailCaptured", _thumbnailCaptured_dec, _DeesTileVideo, _thumbnailCaptured);
-__decorateElement(_init85, 4, "isHovering", _isHovering_dec2, _DeesTileVideo, _isHovering2);
-_DeesTileVideo = __decorateElement(_init85, 0, "DeesTileVideo", _DeesTileVideo_decorators, _DeesTileVideo);
-__name(_DeesTileVideo, "DeesTileVideo");
-__publicField(_DeesTileVideo, "demo", demo8);
-__publicField(_DeesTileVideo, "demoGroups", ["Media"]);
-__publicField(_DeesTileVideo, "styles", [
-  ...tileBaseStyles,
+__decorateElement(_init85, 4, "src", _src_dec6, _DeesThumbnailVideo, _src6);
+__decorateElement(_init85, 4, "poster", _poster_dec2, _DeesThumbnailVideo, _poster2);
+__decorateElement(_init85, 4, "duration", _duration_dec5, _DeesThumbnailVideo, _duration5);
+__decorateElement(_init85, 4, "thumbnailCaptured", _thumbnailCaptured_dec, _DeesThumbnailVideo, _thumbnailCaptured);
+__decorateElement(_init85, 4, "isHovering", _isHovering_dec2, _DeesThumbnailVideo, _isHovering2);
+_DeesThumbnailVideo = __decorateElement(_init85, 0, "DeesThumbnailVideo", _DeesThumbnailVideo_decorators, _DeesThumbnailVideo);
+__name(_DeesThumbnailVideo, "DeesThumbnailVideo");
+__publicField(_DeesThumbnailVideo, "demo", demo8);
+__publicField(_DeesThumbnailVideo, "demoGroups", ["Media"]);
+__publicField(_DeesThumbnailVideo, "styles", [
+  ...thumbnailBaseStyles,
   i`
       .video-wrapper {
         position: relative;
@@ -189498,10 +189504,10 @@ __publicField(_DeesTileVideo, "styles", [
       }
     `
 ]);
-__runInitializers(_init85, 1, _DeesTileVideo);
-var DeesTileVideo = _DeesTileVideo;
+__runInitializers(_init85, 1, _DeesThumbnailVideo);
+var DeesThumbnailVideo = _DeesThumbnailVideo;
 
-// ts_web/elements/00group-media/dees-tile-note/demo.ts
+// ts_web/elements/00group-media/dees-thumbnail-note/demo.ts
 init_dist_ts30();
 var demo9 = /* @__PURE__ */ __name(() => {
   const sampleCode = `import { html } from 'lit';
@@ -189572,73 +189578,73 @@ 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=${(e11) => console.log("Note clicked:", e11.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>
   `;
 }, "demo");
 
-// ts_web/elements/00group-media/dees-tile-note/component.ts
+// ts_web/elements/00group-media/dees-thumbnail-note/component.ts
 init_dist_ts30();
-var _isHovering_dec3, _language_dec4, _content_dec4, _title_dec4, _a85, _DeesTileNote_decorators, _init86, _title4, _content4, _language4, _isHovering3;
-_DeesTileNote_decorators = [customElement("dees-tile-note")];
-var _DeesTileNote = class _DeesTileNote extends (_a85 = DeesTileBase, _title_dec4 = [n5({ type: String })], _content_dec4 = [n5({ type: String })], _language_dec4 = [n5({ type: String })], _isHovering_dec3 = [r5()], _a85) {
+var _isHovering_dec3, _language_dec4, _content_dec4, _title_dec4, _a85, _DeesThumbnailNote_decorators, _init86, _title4, _content4, _language4, _isHovering3;
+_DeesThumbnailNote_decorators = [customElement("dees-thumbnail-note")];
+var _DeesThumbnailNote = class _DeesThumbnailNote extends (_a85 = DeesThumbnailBase, _title_dec4 = [n5({ type: String })], _content_dec4 = [n5({ type: String })], _language_dec4 = [n5({ type: String })], _isHovering_dec3 = [r5()], _a85) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _title4, __runInitializers(_init86, 8, this, "")), __runInitializers(_init86, 11, this);
@@ -189727,16 +189733,16 @@ _title4 = new WeakMap();
 _content4 = new WeakMap();
 _language4 = new WeakMap();
 _isHovering3 = new WeakMap();
-__decorateElement(_init86, 4, "title", _title_dec4, _DeesTileNote, _title4);
-__decorateElement(_init86, 4, "content", _content_dec4, _DeesTileNote, _content4);
-__decorateElement(_init86, 4, "language", _language_dec4, _DeesTileNote, _language4);
-__decorateElement(_init86, 4, "isHovering", _isHovering_dec3, _DeesTileNote, _isHovering3);
-_DeesTileNote = __decorateElement(_init86, 0, "DeesTileNote", _DeesTileNote_decorators, _DeesTileNote);
-__name(_DeesTileNote, "DeesTileNote");
-__publicField(_DeesTileNote, "demo", demo9);
-__publicField(_DeesTileNote, "demoGroups", ["Media"]);
-__publicField(_DeesTileNote, "styles", [
-  ...tileBaseStyles,
+__decorateElement(_init86, 4, "title", _title_dec4, _DeesThumbnailNote, _title4);
+__decorateElement(_init86, 4, "content", _content_dec4, _DeesThumbnailNote, _content4);
+__decorateElement(_init86, 4, "language", _language_dec4, _DeesThumbnailNote, _language4);
+__decorateElement(_init86, 4, "isHovering", _isHovering_dec3, _DeesThumbnailNote, _isHovering3);
+_DeesThumbnailNote = __decorateElement(_init86, 0, "DeesThumbnailNote", _DeesThumbnailNote_decorators, _DeesThumbnailNote);
+__name(_DeesThumbnailNote, "DeesThumbnailNote");
+__publicField(_DeesThumbnailNote, "demo", demo9);
+__publicField(_DeesThumbnailNote, "demoGroups", ["Media"]);
+__publicField(_DeesThumbnailNote, "styles", [
+  ...thumbnailBaseStyles,
   i`
       .note-content {
         position: relative;
@@ -189817,10 +189823,10 @@ __publicField(_DeesTileNote, "styles", [
 
     `
 ]);
-__runInitializers(_init86, 1, _DeesTileNote);
-var DeesTileNote = _DeesTileNote;
+__runInitializers(_init86, 1, _DeesThumbnailNote);
+var DeesThumbnailNote = _DeesThumbnailNote;
 
-// ts_web/elements/00group-media/dees-tile-folder/demo.ts
+// ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts
 init_dist_ts30();
 var demo10 = /* @__PURE__ */ __name(() => {
   const photosFolder = [
@@ -189876,70 +189882,70 @@ var demo10 = /* @__PURE__ */ __name(() => {
       <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=${(e11) => console.log("Folder clicked:", e11.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>
   `;
 }, "demo");
 
-// ts_web/elements/00group-media/dees-tile-folder/component.ts
+// ts_web/elements/00group-media/dees-thumbnail-folder/component.ts
 init_dist_ts30();
-var _items_dec, _name_dec, _a86, _DeesTileFolder_decorators, _init87, _name, _items;
+var _items_dec, _name_dec, _a86, _DeesThumbnailFolder_decorators, _init87, _name, _items;
 var TYPE_ICON_MAP = {
   pdf: "lucide:FileText",
   image: "lucide:Image",
@@ -189949,8 +189955,8 @@ var TYPE_ICON_MAP = {
   folder: "lucide:Folder",
   unknown: "lucide:File"
 };
-_DeesTileFolder_decorators = [customElement("dees-tile-folder")];
-var _DeesTileFolder = class _DeesTileFolder extends (_a86 = DeesTileBase, _name_dec = [n5({ type: String })], _items_dec = [n5({ attribute: false })], _a86) {
+_DeesThumbnailFolder_decorators = [customElement("dees-thumbnail-folder")];
+var _DeesThumbnailFolder = class _DeesThumbnailFolder extends (_a86 = DeesThumbnailBase, _name_dec = [n5({ type: String })], _items_dec = [n5({ attribute: false })], _a86) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _name, __runInitializers(_init87, 8, this, "")), __runInitializers(_init87, 11, this);
@@ -190011,14 +190017,14 @@ var _DeesTileFolder = class _DeesTileFolder extends (_a86 = DeesTileBase, _name_
 _init87 = __decoratorStart(_a86);
 _name = new WeakMap();
 _items = new WeakMap();
-__decorateElement(_init87, 4, "name", _name_dec, _DeesTileFolder, _name);
-__decorateElement(_init87, 4, "items", _items_dec, _DeesTileFolder, _items);
-_DeesTileFolder = __decorateElement(_init87, 0, "DeesTileFolder", _DeesTileFolder_decorators, _DeesTileFolder);
-__name(_DeesTileFolder, "DeesTileFolder");
-__publicField(_DeesTileFolder, "demo", demo10);
-__publicField(_DeesTileFolder, "demoGroups", ["Media"]);
-__publicField(_DeesTileFolder, "styles", [
-  ...tileBaseStyles,
+__decorateElement(_init87, 4, "name", _name_dec, _DeesThumbnailFolder, _name);
+__decorateElement(_init87, 4, "items", _items_dec, _DeesThumbnailFolder, _items);
+_DeesThumbnailFolder = __decorateElement(_init87, 0, "DeesThumbnailFolder", _DeesThumbnailFolder_decorators, _DeesThumbnailFolder);
+__name(_DeesThumbnailFolder, "DeesThumbnailFolder");
+__publicField(_DeesThumbnailFolder, "demo", demo10);
+__publicField(_DeesThumbnailFolder, "demoGroups", ["Media"]);
+__publicField(_DeesThumbnailFolder, "styles", [
+  ...thumbnailBaseStyles,
   i`
       .folder-content {
         position: relative;
@@ -190091,8 +190097,8 @@ __publicField(_DeesTileFolder, "styles", [
 
     `
 ]);
-__runInitializers(_init87, 1, _DeesTileFolder);
-var DeesTileFolder = _DeesTileFolder;
+__runInitializers(_init87, 1, _DeesThumbnailFolder);
+var DeesThumbnailFolder = _DeesThumbnailFolder;
 
 // ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.demo.ts
 init_dist_ts30();
@@ -197044,7 +197050,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.52.5",
+  version: "3.54.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -197120,14 +197126,14 @@ export {
   DeesStoragePreview,
   DeesTable,
   DeesTheme,
+  DeesThumbnailAudio,
+  DeesThumbnailBase,
+  DeesThumbnailFolder,
+  DeesThumbnailImage,
+  DeesThumbnailNote,
+  DeesThumbnailPdf,
+  DeesThumbnailVideo,
   DeesTile,
-  DeesTileAudio,
-  DeesTileBase,
-  DeesTileFolder,
-  DeesTileImage,
-  DeesTileNote,
-  DeesTilePdf,
-  DeesTileVideo,
   DeesToast,
   DeesUpdater,
   DeesVideoViewer,
@@ -197181,7 +197187,7 @@ export {
   themeDefaultStyles,
   themeDefaults,
   throttle2 as throttle,
-  tileBaseStyles,
+  thumbnailBaseStyles,
   validateMove,
   wysiwygStyles,
   zIndexLayers,
@@ -199011,4 +199017,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775246346220.js.map
+//# sourceMappingURL=bundle-1775290451074.js.map