@design.estate/dees-catalog 3.56.1 → 3.57.0

package/dist_bundle/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
@@ -146021,201 +146022,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;
@@ -146224,16 +146182,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%;
@@ -146243,14 +146200,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;
@@ -146261,8 +146218,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 {
@@ -146270,39 +146227,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 {
@@ -146318,9 +146276,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;
     }
 
@@ -146365,18 +146342,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;
@@ -146446,14 +146417,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"
@@ -146465,47 +146435,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>
     `;
   }
@@ -146554,7 +146521,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;
@@ -198591,7 +198558,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.56.1",
+  version: "3.57.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -200563,4 +200530,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775346448265.js.map
+//# sourceMappingURL=bundle-1775347250789.js.map

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.56.1',
+    version: '3.57.0',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

package/dist_ts_web/elements/00group-input/dees-input-fileupload/component.d.ts

@@ -1,6 +1,7 @@
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-layout/dees-label/dees-label.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import { type TemplateResult } from '@design.estate/dees-element';
 declare global {
     interface HTMLElementTagNameMap {
@@ -28,7 +29,6 @@ export declare class DeesInputFileupload extends DeesInputBase<DeesInputFileuplo
     private renderFileRow;
     private handleFileInputChange;
     private handleDropzoneClick;
-    private handleBrowseClick;
     private handleDropzoneKeydown;
     private handleClearAll;
     private handleDragEvent;