@design.estate/dees-catalog 3.56.1 → 3.58.0

package/dist_watch/bundle.js

@@ -57136,6 +57136,7 @@ var init_theme = __esm({
     --dees-color-hover: ${cssManager.bdTheme("rgba(0, 0, 0, 0.04)", "rgba(255, 255, 255, 0.06)")};
     --dees-color-active: ${cssManager.bdTheme("rgba(0, 0, 0, 0.06)", "rgba(255, 255, 255, 0.08)")};
     --dees-color-pressed: ${cssManager.bdTheme("rgba(0, 0, 0, 0.08)", "rgba(255, 255, 255, 0.12)")};
+    --dees-color-row-hover: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2% / 0.06)", "hsl(217.2 91.2% 59.8% / 0.08)")};
 
     /* ========================================
      * Colors — Focus Ring
@@ -145803,7 +145804,7 @@ var DeesWorkspaceMonaco = _DeesWorkspaceMonaco;
 init_dist_ts30();
 init_theme();
 init_dees_icon();
-var _copySuccess_dec, _isLanguageDropdownOpen_dec, _showLineNumbers_dec, _wordWrap_dec2, _height_dec, _language_dec2, _value_dec2, _a18, _DeesInputCode_decorators, _init16, _value2, _language2, _height, _wordWrap2, _showLineNumbers, _isLanguageDropdownOpen, _copySuccess;
+var _cursorPosition_dec, _lineCount_dec, _copySuccess_dec, _isLanguageDropdownOpen_dec, _showLineNumbers_dec, _wordWrap_dec2, _height_dec, _language_dec2, _value_dec2, _a18, _DeesInputCode_decorators, _init16, _value2, _language2, _height, _wordWrap2, _showLineNumbers, _isLanguageDropdownOpen, _copySuccess, _lineCount, _cursorPosition;
 var LANGUAGES = [
   { key: "typescript", label: "TypeScript" },
   { key: "javascript", label: "JavaScript" },
@@ -145825,7 +145826,7 @@ var LANGUAGES = [
   { key: "plaintext", label: "Plain Text" }
 ];
 _DeesInputCode_decorators = [customElement("dees-input-code")];
-var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_dec2 = [n5({ type: String })], _language_dec2 = [n5({ type: String })], _height_dec = [n5({ type: String })], _wordWrap_dec2 = [n5({ type: String })], _showLineNumbers_dec = [n5({ type: Boolean })], _isLanguageDropdownOpen_dec = [r5()], _copySuccess_dec = [r5()], _a18) {
+var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_dec2 = [n5({ type: String })], _language_dec2 = [n5({ type: String })], _height_dec = [n5({ type: String })], _wordWrap_dec2 = [n5({ type: String })], _showLineNumbers_dec = [n5({ type: Boolean })], _isLanguageDropdownOpen_dec = [r5()], _copySuccess_dec = [r5()], _lineCount_dec = [r5()], _cursorPosition_dec = [r5()], _a18) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _value2, __runInitializers(_init16, 8, this, "")), __runInitializers(_init16, 11, this);
@@ -145835,6 +145836,8 @@ var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_
     __privateAdd(this, _showLineNumbers, __runInitializers(_init16, 24, this, true)), __runInitializers(_init16, 27, this);
     __privateAdd(this, _isLanguageDropdownOpen, __runInitializers(_init16, 28, this, false)), __runInitializers(_init16, 31, this);
     __privateAdd(this, _copySuccess, __runInitializers(_init16, 32, this, false)), __runInitializers(_init16, 35, this);
+    __privateAdd(this, _lineCount, __runInitializers(_init16, 36, this, 0)), __runInitializers(_init16, 39, this);
+    __privateAdd(this, _cursorPosition, __runInitializers(_init16, 40, this, { line: 1, column: 1 })), __runInitializers(_init16, 43, this);
     __publicField(this, "editorElement", null);
   }
   render() {
@@ -145913,6 +145916,16 @@ var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_
               @content-change=${this.handleContentChange}
             ></dees-workspace-monaco>
           </div>
+          <div slot="footer" class="editor-footer">
+            <div class="footer-left">
+              <span>Ln ${this.cursorPosition.line}, Col ${this.cursorPosition.column}</span>
+              <div class="footer-separator"></div>
+              <span>${this.lineCount} line${this.lineCount !== 1 ? "s" : ""}</span>
+            </div>
+            <div class="footer-right">
+              <span>${(LANGUAGES.find((l7) => l7.key === this.language) || LANGUAGES[0]).label}</span>
+            </div>
+          </div>
         </dees-tile>
       </div>
     `;
@@ -145926,6 +145939,39 @@ var _DeesInputCode = class _DeesInputCode extends (_a18 = DeesInputBase, _value_
           this.changeSubject.next(this);
         }
       });
+      const editor = await this.editorElement.editorDeferred.promise;
+      const model = editor.getModel();
+      if (model) {
+        this.lineCount = model.getLineCount();
+        model.onDidChangeContent(() => {
+          this.lineCount = model.getLineCount();
+        });
+      }
+      editor.onDidChangeCursorPosition((e11) => {
+        this.cursorPosition = { line: e11.position.lineNumber, column: e11.position.column };
+      });
+      const domtoolsInstance = await this.editorElement.domtoolsPromise;
+      const updateEditorBg = /* @__PURE__ */ __name((isBright) => {
+        const bg = isBright ? "#ffffff" : "#0a0a0a";
+        editor.updateOptions({});
+        window.monaco?.editor?.defineTheme?.("dees-light", {
+          base: "vs",
+          inherit: true,
+          rules: [],
+          colors: { "editor.background": bg }
+        });
+        window.monaco?.editor?.defineTheme?.("dees-dark", {
+          base: "vs-dark",
+          inherit: true,
+          rules: [],
+          colors: { "editor.background": bg }
+        });
+        editor.updateOptions({ theme: isBright ? "dees-light" : "dees-dark" });
+      }, "updateEditorBg");
+      updateEditorBg(domtoolsInstance.themeManager.goBrightBoolean);
+      domtoolsInstance.themeManager.themeObservable.subscribe((goBright) => {
+        updateEditorBg(goBright);
+      });
     }
   }
   toggleLanguageDropdown() {
@@ -146282,6 +146328,8 @@ _wordWrap2 = new WeakMap();
 _showLineNumbers = new WeakMap();
 _isLanguageDropdownOpen = new WeakMap();
 _copySuccess = new WeakMap();
+_lineCount = new WeakMap();
+_cursorPosition = new WeakMap();
 __decorateElement(_init16, 4, "value", _value_dec2, _DeesInputCode, _value2);
 __decorateElement(_init16, 4, "language", _language_dec2, _DeesInputCode, _language2);
 __decorateElement(_init16, 4, "height", _height_dec, _DeesInputCode, _height);
@@ -146289,6 +146337,8 @@ __decorateElement(_init16, 4, "wordWrap", _wordWrap_dec2, _DeesInputCode, _wordW
 __decorateElement(_init16, 4, "showLineNumbers", _showLineNumbers_dec, _DeesInputCode, _showLineNumbers);
 __decorateElement(_init16, 4, "isLanguageDropdownOpen", _isLanguageDropdownOpen_dec, _DeesInputCode, _isLanguageDropdownOpen);
 __decorateElement(_init16, 4, "copySuccess", _copySuccess_dec, _DeesInputCode, _copySuccess);
+__decorateElement(_init16, 4, "lineCount", _lineCount_dec, _DeesInputCode, _lineCount);
+__decorateElement(_init16, 4, "cursorPosition", _cursorPosition_dec, _DeesInputCode, _cursorPosition);
 _DeesInputCode = __decorateElement(_init16, 0, "DeesInputCode", _DeesInputCode_decorators, _DeesInputCode);
 __name(_DeesInputCode, "DeesInputCode");
 __publicField(_DeesInputCode, "demo", /* @__PURE__ */ __name(() => b2`
@@ -146443,6 +146493,11 @@ __publicField(_DeesInputCode, "styles", [
         height: 100%;
       }
 
+      /* Match Monaco background to tile */
+      dees-workspace-monaco::part(container) {
+        background: var(--dees-color-bg-primary);
+      }
+
       .toolbar-divider {
         width: 1px;
         height: 20px;
@@ -146450,6 +146505,32 @@ __publicField(_DeesInputCode, "styles", [
         margin: 0 4px;
       }
 
+      /* Footer */
+      .editor-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 12px;
+        height: 28px;
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .footer-left,
+      .footer-right {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .footer-separator {
+        width: 1px;
+        height: 12px;
+        background: var(--dees-color-border-default);
+      }
+
       :host([disabled]) .code-container {
         opacity: 0.5;
         pointer-events: none;
@@ -151366,201 +151447,158 @@ var demoFunc19 = /* @__PURE__ */ __name(() => b2`
 
 // ts_web/elements/00group-input/dees-input-fileupload/styles.ts
 init_dist_ts30();
+init_theme();
 var fileuploadStyles = [
-  cssManager.defaultStyles,
+  themeDefaultStyles,
   ...DeesInputBase.baseStyles,
+  cssManager.defaultStyles,
   i`
     :host {
       position: relative;
       display: block;
     }
 
-
     .input-wrapper {
       display: flex;
       flex-direction: column;
       gap: 12px;
     }
 
-    .dropzone {
-      position: relative;
-      padding: 20px;
-      border-radius: 12px;
-      border: 1.5px dashed ${cssManager.bdTheme("hsl(215 16% 80%)", "hsl(217 20% 25%)")};
-      background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(215 20% 12%)")};
-      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
-      cursor: pointer;
-      outline: none;
-    }
-
-    .dropzone:focus-visible {
-      box-shadow: 0 0 0 2px ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(215 20% 12%)")},
-        0 0 0 4px ${cssManager.bdTheme("hsl(217 91% 60% / 0.5)", "hsl(213 93% 68% / 0.4)")};
-      border-color: ${cssManager.bdTheme("hsl(217 91% 60%)", "hsl(213 93% 68%)")};
+    /* ── Tile integration ── */
+    dees-tile {
+      cursor: default;
     }
 
-    .dropzone--active {
-      border-color: ${cssManager.bdTheme("hsl(217 91% 60%)", "hsl(213 93% 68%)")};
-      box-shadow: 0 12px 32px ${cssManager.bdTheme("rgba(15, 23, 42, 0.12)", "rgba(0, 0, 0, 0.35)")};
-      background: ${cssManager.bdTheme("hsl(217 91% 60% / 0.06)", "hsl(213 93% 68% / 0.12)")};
+    dees-tile:hover::part(outer) {
+      border-color: var(--dees-color-border-strong);
     }
 
-    .dropzone--has-files {
-      background: ${cssManager.bdTheme("hsl(0 0% 99%)", "hsl(215 20% 11%)")};
+    dees-tile.dragover::part(outer) {
+      border-color: var(--dees-color-accent-primary);
+      box-shadow: 0 0 0 2px ${cssManager.bdTheme("hsl(217 91% 60% / 0.15)", "hsl(213 93% 68% / 0.15)")};
     }
 
-    .dropzone--disabled {
+    :host([disabled]) dees-tile {
       opacity: 0.6;
-      pointer-events: none;
       cursor: not-allowed;
+      pointer-events: none;
     }
 
-    .dropzone__body {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-
-    .dropzone__icon {
-      width: 48px;
-      height: 48px;
-      border-radius: 16px;
+    /* ── Header slot: sleek toolbar ── */
+    .dropzone-header {
       display: flex;
       align-items: center;
-      justify-content: center;
-      color: ${cssManager.bdTheme("hsl(217 91% 60%)", "hsl(213 93% 68%)")};
-      background: ${cssManager.bdTheme("hsl(217 91% 60% / 0.12)", "hsl(213 93% 68% / 0.12)")};
-      position: relative;
-      flex-shrink: 0;
+      gap: 8px;
+      height: 32px;
+      padding: 0 12px;
     }
 
-    .dropzone__icon dees-icon {
-      font-size: 22px;
+    .dropzone-header dees-icon {
+      width: 14px;
+      height: 14px;
+      color: var(--dees-color-text-muted);
     }
 
-    .dropzone__loader {
-      width: 20px;
-      height: 20px;
-      border-radius: 999px;
+    .dropzone-loader {
+      width: 14px;
+      height: 14px;
+      border-radius: var(--dees-radius-full);
       border: 2px solid ${cssManager.bdTheme("rgba(15, 23, 42, 0.15)", "rgba(255, 255, 255, 0.15)")};
-      border-top-color: ${cssManager.bdTheme("hsl(217 91% 60%)", "hsl(213 93% 68%)")};
+      border-top-color: var(--dees-color-accent-primary);
       animation: loader-spin 0.6s linear infinite;
     }
 
-    .dropzone__content {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      min-width: 0;
-    }
-
-    .dropzone__headline {
-      font-size: 15px;
-      font-weight: 600;
-      color: ${cssManager.bdTheme("hsl(222 47% 11%)", "hsl(210 20% 96%)")};
-    }
-
-    .dropzone__subline {
+    .dropzone-title {
       font-size: 13px;
-      color: ${cssManager.bdTheme("hsl(215 16% 46%)", "hsl(215 16% 70%)")};
+      color: var(--dees-color-text-muted);
     }
 
-    .dropzone__browse {
+    .dropzone-browse {
       appearance: none;
       border: none;
       background: none;
       padding: 0;
-      margin-left: 4px;
-      color: ${cssManager.bdTheme("hsl(217 91% 60%)", "hsl(213 93% 68%)")};
+      font-size: 13px;
+      font-family: inherit;
       font-weight: 600;
+      color: var(--dees-color-accent-primary);
       cursor: pointer;
-      text-decoration: none;
     }
 
-    .dropzone__browse:hover {
+    .dropzone-browse:hover {
       text-decoration: underline;
     }
 
-    .dropzone__browse:disabled {
+    .dropzone-browse:disabled {
       cursor: not-allowed;
-      opacity: 0.6;
+      opacity: 0.5;
     }
 
-    .dropzone__meta {
-      margin-top: 14px;
+    /* ── Content slot: file list in rounded inset ── */
+    .file-list-empty {
       display: flex;
-      flex-wrap: wrap;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       gap: 8px;
-      font-size: 12px;
-      color: ${cssManager.bdTheme("hsl(215 16% 50%)", "hsl(215 16% 72%)")};
+      padding: 24px 16px;
+      color: var(--dees-color-text-muted);
+      font-size: 13px;
     }
 
-    .dropzone__meta span {
-      padding: 4px 10px;
-      border-radius: 999px;
-      background: ${cssManager.bdTheme("hsl(217 91% 95%)", "hsl(213 93% 18%)")};
-      border: 1px solid ${cssManager.bdTheme("hsl(217 91% 90%)", "hsl(213 93% 24%)")};
+    .file-list-empty dees-icon {
+      font-size: 24px;
+      opacity: 0.4;
     }
 
     .file-list {
       display: flex;
       flex-direction: column;
-      gap: 12px;
-      margin-top: 20px;
-      padding-top: 20px;
-      border-top: 1px solid ${cssManager.bdTheme("hsl(217 91% 90%)", "hsl(213 93% 24%)")};
     }
 
-    .file-list__header {
+    .file-list-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      font-size: 13px;
+      padding: 8px 12px;
+      font-size: 12px;
       font-weight: 500;
-      color: ${cssManager.bdTheme("hsl(215 16% 45%)", "hsl(215 16% 68%)")};
+      color: var(--dees-color-text-muted);
     }
 
-    .file-list__clear {
+    .file-list-clear {
       appearance: none;
       border: none;
       background: none;
-      color: ${cssManager.bdTheme("hsl(217 91% 60%)", "hsl(213 93% 68%)")};
+      color: var(--dees-color-accent-primary);
       cursor: pointer;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 12px;
       padding: 0;
+      font-family: inherit;
     }
 
-    .file-list__clear:hover {
+    .file-list-clear:hover {
       text-decoration: underline;
     }
 
-    .file-list__items {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
     .file-row {
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 10px 12px;
-      background: ${cssManager.bdTheme("hsl(0 0% 100% / 0.5)", "hsl(215 20% 16% / 0.5)")};
-      border: 1px solid ${cssManager.bdTheme("hsl(213 27% 92%)", "hsl(217 25% 26%)")};
-      border-radius: 8px;
-      transition: background 0.15s ease;
+      padding: 6px 12px;
+      transition: background var(--dees-transition-fast) ease;
     }
 
     .file-row:hover {
-      background: ${cssManager.bdTheme("hsl(0 0% 100% / 0.8)", "hsl(215 20% 16% / 0.8)")};
+      background: var(--dees-color-row-hover);
     }
 
     .file-thumb {
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
-      background: ${cssManager.bdTheme("hsl(214 31% 92%)", "hsl(217 32% 18%)")};
+      width: 32px;
+      height: 32px;
+      border-radius: var(--dees-radius-sm);
+      background: var(--dees-color-bg-tertiary);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -151569,16 +151607,15 @@ var fileuploadStyles = [
     }
 
     .file-thumb dees-icon {
-      font-size: 18px;
-      color: ${cssManager.bdTheme("hsl(215 16% 45%)", "hsl(215 16% 70%)")};
+      font-size: 16px;
+      color: var(--dees-color-text-muted);
       display: block;
-      width: 18px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
       line-height: 1;
       flex-shrink: 0;
     }
 
-
     .thumb-image {
       width: 100%;
       height: 100%;
@@ -151588,14 +151625,14 @@ var fileuploadStyles = [
     .file-meta {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 2px;
       min-width: 0;
     }
 
     .file-name {
-      font-weight: 600;
-      font-size: 14px;
-      color: ${cssManager.bdTheme("hsl(222 47% 11%)", "hsl(210 20% 96%)")};
+      font-weight: 500;
+      font-size: 13px;
+      color: var(--dees-color-text-primary);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -151606,8 +151643,8 @@ var fileuploadStyles = [
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
-      font-size: 12px;
-      color: ${cssManager.bdTheme("hsl(215 16% 46%)", "hsl(215 16% 70%)")};
+      font-size: 11px;
+      color: var(--dees-color-text-muted);
     }
 
     .file-size {
@@ -151615,39 +151652,40 @@ var fileuploadStyles = [
     }
 
     .file-type {
-      padding: 2px 8px;
-      border-radius: 999px;
-      border: 1px solid ${cssManager.bdTheme("hsl(214 31% 86%)", "hsl(217 32% 28%)")};
-      color: ${cssManager.bdTheme("hsl(215 16% 46%)", "hsl(215 16% 70%)")};
+      padding: 1px 6px;
+      border-radius: var(--dees-radius-full);
+      border: 1px solid var(--dees-color-border-default);
+      color: var(--dees-color-text-muted);
       text-transform: uppercase;
       letter-spacing: 0.08em;
       line-height: 1;
+      font-size: 10px;
     }
 
     .file-actions {
       display: flex;
       align-items: center;
-      gap: 8px;
       margin-left: auto;
     }
 
     .remove-button {
-      width: 28px;
-      height: 28px;
-      border-radius: 6px;
+      width: 24px;
+      height: 24px;
+      border-radius: var(--dees-radius-xs);
       background: transparent;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
-      color: ${cssManager.bdTheme("hsl(215 16% 52%)", "hsl(215 16% 68%)")};
+      transition: background var(--dees-transition-fast) ease,
+                  color var(--dees-transition-fast) ease;
+      color: var(--dees-color-text-muted);
     }
 
     .remove-button:hover {
       background: ${cssManager.bdTheme("hsl(0 72% 50% / 0.08)", "hsl(0 62% 32% / 0.15)")};
-      color: ${cssManager.bdTheme("hsl(0 72% 46%)", "hsl(0 70% 70%)")};
+      color: var(--dees-color-accent-error);
     }
 
     .remove-button:active {
@@ -151663,9 +151701,28 @@ var fileuploadStyles = [
       flex-shrink: 0;
     }
 
+    /* ── Footer slot: meta chips ── */
+    .dropzone-footer {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 6px 12px;
+      align-items: center;
+    }
+
+    .meta-chip {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: var(--dees-radius-full);
+      color: var(--dees-color-text-muted);
+      background: var(--dees-color-bg-tertiary);
+      border: 1px solid var(--dees-color-border-subtle);
+    }
+
+    /* ── Validation ── */
     .validation-message {
       font-size: 13px;
-      color: ${cssManager.bdTheme("hsl(0 72% 40%)", "hsl(0 70% 68%)")};
+      color: var(--dees-color-accent-error);
       line-height: 1.5;
     }
 
@@ -151710,18 +151767,12 @@ var _DeesInputFileupload = class _DeesInputFileupload extends (_a27 = DeesInputB
       if (this.disabled) {
         return;
       }
-      if (event.target.closest(".dropzone__browse, .file-list")) {
+      const target = event.target;
+      if (target.closest(".file-list, .dropzone-header, .dropzone-footer")) {
         return;
       }
       this.openFileSelector();
     }, "handleDropzoneClick"));
-    __publicField(this, "handleBrowseClick", /* @__PURE__ */ __name((event) => {
-      if (this.disabled) {
-        return;
-      }
-      event.stopPropagation();
-      this.openFileSelector();
-    }, "handleBrowseClick"));
     __publicField(this, "handleDropzoneKeydown", /* @__PURE__ */ __name((event) => {
       if (this.disabled) {
         return;
@@ -151791,14 +151842,13 @@ var _DeesInputFileupload = class _DeesInputFileupload extends (_a27 = DeesInputB
           .description=${this.description}
           .required=${this.required}
         ></dees-label>
-        <div
-          class="dropzone ${this.state === "dragOver" ? "dropzone--active" : ""} ${this.disabled ? "dropzone--disabled" : ""} ${this.value.length > 0 ? "dropzone--has-files" : ""}"
-          role="button"
+        <dees-tile
+          class="${this.state === "dragOver" ? "dragover" : ""}"
+          @click=${this.handleDropzoneClick}
+          @keydown=${this.handleDropzoneKeydown}
           tabindex=${this.disabled ? -1 : 0}
           aria-disabled=${this.disabled}
           aria-label=${`Select files${acceptedSummary ? ` (${acceptedSummary})` : ""}`}
-          @click=${this.handleDropzoneClick}
-          @keydown=${this.handleDropzoneKeydown}
         >
           <input
             class="file-input"
@@ -151810,47 +151860,44 @@ var _DeesInputFileupload = class _DeesInputFileupload extends (_a27 = DeesInputB
             @change=${this.handleFileInputChange}
             tabindex="-1"
           />
-          <div class="dropzone__body">
-            <div class="dropzone__icon">
-              ${this.isLoading ? b2`<span class="dropzone__loader" aria-hidden="true"></span>` : b2`<dees-icon icon="lucide:FolderOpen"></dees-icon>`}
-            </div>
-            <div class="dropzone__content">
-              <span class="dropzone__headline">${this.buttonText || "Select files"}</span>
-              <span class="dropzone__subline">
-                Drag and drop files here or
-                <button
-                  type="button"
-                  class="dropzone__browse"
-                  @click=${this.handleBrowseClick}
-                  ?disabled=${this.disabled}
-                >
-                  browse
-                </button>
-              </span>
-            </div>
-          </div>
-          <div class="dropzone__meta">
-            ${metaEntries.map((entry) => b2`<span>${entry}</span>`)}
+          <div slot="header" class="dropzone-header">
+            ${this.isLoading ? b2`<span class="dropzone-loader" aria-hidden="true"></span>` : b2`<dees-icon icon="lucide:Upload"></dees-icon>`}
+            <span class="dropzone-title">Drop files here or</span>
+            <button
+              type="button"
+              class="dropzone-browse"
+              @click=${(e11) => {
+      e11.stopPropagation();
+      this.openFileSelector();
+    }}
+              ?disabled=${this.disabled}
+            >browse</button>
           </div>
           ${this.renderFileList()}
-        </div>
+          <div slot="footer" class="dropzone-footer">
+            ${metaEntries.map((entry) => b2`<span class="meta-chip">${entry}</span>`)}
+          </div>
+        </dees-tile>
         ${this.validationMessage ? b2`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>` : b2``}
       </div>
     `;
   }
   renderFileList() {
     if (this.value.length === 0) {
-      return b2``;
+      return b2`
+        <div class="file-list-empty">
+          <dees-icon icon="lucide:FileStack"></dees-icon>
+          <span>No files selected</span>
+        </div>
+      `;
     }
     return b2`
       <div class="file-list">
-        <div class="file-list__header">
+        <div class="file-list-header">
           <span>${this.value.length} file${this.value.length === 1 ? "" : "s"} selected</span>
-          ${this.value.length > 0 ? b2`<button type="button" class="file-list__clear" @click=${this.handleClearAll}>Clear ${this.value.length > 1 ? "all" : ""}</button>` : b2``}
-        </div>
-        <div class="file-list__items">
-          ${this.value.map((file) => this.renderFileRow(file))}
+          <button type="button" class="file-list-clear" @click=${this.handleClearAll}>Clear ${this.value.length > 1 ? "all" : ""}</button>
         </div>
+        ${this.value.map((file) => this.renderFileRow(file))}
       </div>
     `;
   }
@@ -151899,7 +151946,7 @@ var _DeesInputFileupload = class _DeesInputFileupload extends (_a27 = DeesInputB
     });
   }
   rebindInteractiveElements() {
-    const newDropArea = this.shadowRoot?.querySelector(".dropzone");
+    const newDropArea = this.shadowRoot?.querySelector("dees-tile");
     if (newDropArea !== this.dropArea) {
       this.detachDropListeners();
       this.dropArea = newDropArea;