v3.58.0

changelog.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 2026-04-05 - 3.58.0 - feat(dees-input-code)
+add editor status footer with cursor position, line count, and language display
+
+- Tracks and displays the current cursor line and column in the code editor footer
+- Shows dynamic line count updates as editor content changes
+- Aligns the Monaco editor background with the surrounding tile theme, including light and dark mode updates
+
+## 2026-04-05 - 3.57.0 - feat(dees-input-fileupload)
+redesign the file upload dropzone with dees-tile integration and themed file list styling
+
+- Replace the custom dropzone container with dees-tile and move actions and metadata into header and footer slots
+- Add an explicit empty state for the file list and simplify file list layout and interaction handling
+- Adopt shared theme tokens in the file upload styles and introduce a reusable row hover color token
+
+## 2026-04-04 - 3.56.1 - fix(dees-input-dropdown)
+improve dropdown popup lifecycle with window layer overlay and animated visibility transitions
+
+- use a window layer to handle outside-click closing instead of document-level mousedown listeners
+- await popup show and search focus to keep popup initialization and overlay setup in sync
+- add guarded async hide logic with animated teardown and cleanup of scroll/resize listeners
+
+## 2026-04-04 - 3.56.0 - feat(dees-input-dropdown)
+extract dropdown popup into a floating overlay component with search, keyboard navigation, and viewport repositioning
+
+- adds a new dees-input-dropdown-popup export for rendering the menu as a fixed overlay attached to document.body
+- keeps the dropdown aligned to its trigger on scroll and resize, and closes it when the trigger moves off-screen
+- moves option filtering and keyboard selection handling into the popup component while preserving selection events
+
 ## 2026-04-04 - 3.55.6 - fix(dees-heading)
 adjust heading hr text color to use muted theme values
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.55.6",
+  "version": "3.58.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.55.6',
+  version: '3.58.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -79,6 +79,12 @@ export class DeesInputCode extends DeesInputBase<string> {
   @state()
   accessor copySuccess: boolean = false;
 
+  @state()
+  accessor lineCount: number = 0;
+
+  @state()
+  accessor cursorPosition: { line: number; column: number } = { line: 1, column: 1 };
+
   private editorElement: DeesWorkspaceMonaco | null = null;
 
   public static styles = [
@@ -223,6 +229,11 @@ export class DeesInputCode extends DeesInputBase<string> {
         height: 100%;
       }
 
+      /* Match Monaco background to tile */
+      dees-workspace-monaco::part(container) {
+        background: var(--dees-color-bg-primary);
+      }
+
       .toolbar-divider {
         width: 1px;
         height: 20px;
@@ -230,6 +241,32 @@ export class DeesInputCode extends DeesInputBase<string> {
         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;
@@ -314,6 +351,16 @@ export class DeesInputCode extends DeesInputBase<string> {
               @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(l => l.key === this.language) || LANGUAGES[0]).label}</span>
+            </div>
+          </div>
         </dees-tile>
       </div>
     `;
@@ -329,6 +376,49 @@ export class DeesInputCode extends DeesInputBase<string> {
           this.changeSubject.next(this as any);
         }
       });
+
+      // Track cursor position and line count
+      const editor = await this.editorElement.editorDeferred.promise;
+
+      // Set initial line count
+      const model = editor.getModel();
+      if (model) {
+        this.lineCount = model.getLineCount();
+        model.onDidChangeContent(() => {
+          this.lineCount = model.getLineCount();
+        });
+      }
+
+      // Track cursor position
+      editor.onDidChangeCursorPosition((e) => {
+        this.cursorPosition = { line: e.position.lineNumber, column: e.position.column };
+      });
+
+      // Override Monaco editor background to match tile
+      const domtoolsInstance = await this.editorElement.domtoolsPromise;
+      const updateEditorBg = (isBright: boolean) => {
+        const bg = isBright ? '#ffffff' : '#0a0a0a';
+        editor.updateOptions({});
+        // Override via Monaco's theme API
+        (window as any).monaco?.editor?.defineTheme?.('dees-light', {
+          base: 'vs',
+          inherit: true,
+          rules: [],
+          colors: { 'editor.background': bg },
+        });
+        (window as any).monaco?.editor?.defineTheme?.('dees-dark', {
+          base: 'vs-dark',
+          inherit: true,
+          rules: [],
+          colors: { 'editor.background': bg },
+        });
+        editor.updateOptions({ theme: isBright ? 'dees-light' : 'dees-dark' });
+      };
+
+      updateEditorBg(domtoolsInstance.themeManager.goBrightBoolean);
+      domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+        updateEditorBg(goBright);
+      });
     }
   }
 

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown-popup.ts

@@ -0,0 +1,374 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  html,
+  css,
+  cssManager,
+  DeesElement,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { zIndexRegistry } from '../../00zindex.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-dropdown-popup': DeesInputDropdownPopup;
+  }
+}
+
+@customElement('dees-input-dropdown-popup')
+export class DeesInputDropdownPopup extends DeesElement {
+  @property({ type: Array })
+  accessor options: { option: string; key: string; payload?: any }[] = [];
+
+  @property({ type: Boolean })
+  accessor enableSearch: boolean = true;
+
+  @property({ type: Boolean })
+  accessor opensToTop: boolean = false;
+
+  @property({ attribute: false })
+  accessor triggerRect: DOMRect | null = null;
+
+  @property({ attribute: false })
+  accessor ownerComponent: HTMLElement | null = null;
+
+  @state()
+  accessor filteredOptions: { option: string; key: string; payload?: any }[] = [];
+
+  @state()
+  accessor highlightedIndex: number = 0;
+
+  @state()
+  accessor searchValue: string = '';
+
+  @state()
+  accessor menuZIndex: number = 1000;
+
+  @state()
+  accessor visible: boolean = false;
+
+  private windowLayer: DeesWindowLayer | null = null;
+  private isDestroying: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+        font-family: ${cssGeistFontFamily};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .selectionBox {
+        position: fixed;
+        pointer-events: auto;
+        will-change: transform, opacity;
+        transition: all 0.15s ease;
+        opacity: 0;
+        transform: translateY(-8px) scale(0.98);
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
+        min-height: 40px;
+        max-height: 300px;
+        overflow: hidden;
+        border-radius: 6px;
+        user-select: none;
+      }
+
+      .selectionBox.top {
+        transform: translateY(8px) scale(0.98);
+      }
+
+      .selectionBox.show {
+        pointer-events: auto;
+        transform: translateY(0) scale(1);
+        opacity: 1;
+      }
+
+      .options-container {
+        max-height: 250px;
+        overflow-y: auto;
+        padding: 4px;
+      }
+
+      .option {
+        transition: all 0.15s ease;
+        line-height: 32px;
+        padding: 0 8px;
+        border-radius: 4px;
+        margin: 2px 0;
+        cursor: pointer;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+      }
+
+      .option.highlighted {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      .option:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .no-options {
+        padding: 8px;
+        text-align: center;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        font-style: italic;
+      }
+
+      .search {
+        padding: 4px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        margin-bottom: 4px;
+      }
+
+      .search input {
+        display: block;
+        width: 100%;
+        height: 32px;
+        padding: 0 8px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 4px;
+        color: inherit;
+        font-size: 14px;
+        font-family: inherit;
+        outline: none;
+        transition: border-color 0.15s ease;
+      }
+
+      .search input::placeholder {
+        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+      }
+
+      .search input:focus {
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      }
+
+      .options-container::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .options-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .options-container::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 4px;
+      }
+
+      .options-container::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (!this.triggerRect) return html``;
+
+    const posStyle = this.computePositionStyle();
+
+    return html`
+      <div
+        class="selectionBox ${this.visible ? 'show' : ''} ${this.opensToTop ? 'top' : 'bottom'}"
+        style="${posStyle}; z-index: ${this.menuZIndex};"
+      >
+        ${this.enableSearch
+          ? html`
+              <div class="search">
+                <input
+                  type="text"
+                  placeholder="Search options..."
+                  .value="${this.searchValue}"
+                  @input="${this.handleSearch}"
+                  @click="${(e: Event) => e.stopPropagation()}"
+                  @keydown="${this.handleSearchKeydown}"
+                />
+              </div>
+            `
+          : null}
+        <div class="options-container">
+          ${this.filteredOptions.length === 0
+            ? html`<div class="no-options">No options found</div>`
+            : this.filteredOptions.map((option, index) => {
+                const isHighlighted = this.highlightedIndex === index;
+                return html`
+                  <div
+                    class="option ${isHighlighted ? 'highlighted' : ''}"
+                    @click="${() => this.selectOption(option)}"
+                    @mouseenter="${() => (this.highlightedIndex = index)}"
+                  >
+                    ${option.option}
+                  </div>
+                `;
+              })}
+        </div>
+      </div>
+    `;
+  }
+
+  private computePositionStyle(): string {
+    const rect = this.triggerRect!;
+    const left = rect.left;
+    const width = rect.width;
+
+    if (this.opensToTop) {
+      const bottom = window.innerHeight - rect.top + 4;
+      return `left: ${left}px; width: ${width}px; bottom: ${bottom}px; top: auto`;
+    } else {
+      const top = rect.bottom + 4;
+      return `left: ${left}px; width: ${width}px; top: ${top}px`;
+    }
+  }
+
+  public async show(): Promise<void> {
+    this.filteredOptions = this.options;
+    this.highlightedIndex = 0;
+    this.searchValue = '';
+
+    // Create window layer (transparent, no blur)
+    this.windowLayer = await DeesWindowLayer.createAndShow();
+    this.windowLayer.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('close-request'));
+    });
+
+    // Set z-index above the window layer
+    this.menuZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.menuZIndex);
+    this.style.zIndex = this.menuZIndex.toString();
+
+    document.body.appendChild(this);
+
+    // Animate in on next frame
+    await domtools.plugins.smartdelay.delayFor(0);
+    this.visible = true;
+
+    // Add scroll/resize listeners for repositioning
+    window.addEventListener('scroll', this.handleScrollOrResize, { capture: true, passive: true });
+    window.addEventListener('resize', this.handleScrollOrResize, { passive: true });
+  }
+
+  public async hide(): Promise<void> {
+    // Guard against double-destruction
+    if (this.isDestroying) {
+      return;
+    }
+    this.isDestroying = true;
+
+    // Remove scroll/resize listeners
+    window.removeEventListener('scroll', this.handleScrollOrResize, { capture: true } as EventListenerOptions);
+    window.removeEventListener('resize', this.handleScrollOrResize);
+
+    zIndexRegistry.unregister(this);
+
+    this.searchValue = '';
+    this.filteredOptions = this.options;
+    this.highlightedIndex = 0;
+
+    // Don't await - let window layer cleanup happen in background for instant visual feedback
+    if (this.windowLayer) {
+      this.windowLayer.destroy();
+      this.windowLayer = null;
+    }
+
+    // Animate out via CSS transition
+    this.visible = false;
+    await domtools.plugins.smartdelay.delayFor(150);
+
+    if (this.parentElement) {
+      this.parentElement.removeChild(this);
+    }
+
+    this.isDestroying = false;
+  }
+
+  public async focusSearchInput(): Promise<void> {
+    await this.updateComplete;
+    const input = this.shadowRoot!.querySelector('.search input') as HTMLInputElement;
+    if (input) input.focus();
+  }
+
+  public updateOptions(options: { option: string; key: string; payload?: any }[]): void {
+    this.options = options;
+    // Re-filter with current search value
+    if (this.searchValue) {
+      const searchLower = this.searchValue.toLowerCase();
+      this.filteredOptions = this.options.filter((opt) =>
+        opt.option.toLowerCase().includes(searchLower)
+      );
+    } else {
+      this.filteredOptions = this.options;
+    }
+    this.highlightedIndex = 0;
+  }
+
+  private selectOption(option: { option: string; key: string; payload?: any }): void {
+    this.dispatchEvent(
+      new CustomEvent('option-selected', {
+        detail: option,
+      })
+    );
+  }
+
+  private handleSearch = (event: Event): void => {
+    const searchTerm = (event.target as HTMLInputElement).value;
+    this.searchValue = searchTerm;
+    const searchLower = searchTerm.toLowerCase();
+    this.filteredOptions = this.options.filter((option) =>
+      option.option.toLowerCase().includes(searchLower)
+    );
+    this.highlightedIndex = 0;
+  };
+
+  private handleSearchKeydown = (event: KeyboardEvent): void => {
+    const key = event.key;
+    const maxIndex = this.filteredOptions.length - 1;
+
+    if (key === 'ArrowDown') {
+      event.preventDefault();
+      this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
+    } else if (key === 'ArrowUp') {
+      event.preventDefault();
+      this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
+    } else if (key === 'Enter') {
+      event.preventDefault();
+      if (this.filteredOptions[this.highlightedIndex]) {
+        this.selectOption(this.filteredOptions[this.highlightedIndex]);
+      }
+    } else if (key === 'Escape') {
+      event.preventDefault();
+      this.dispatchEvent(new CustomEvent('close-request'));
+    }
+  };
+
+  private handleScrollOrResize = (): void => {
+    this.dispatchEvent(new CustomEvent('reposition-request'));
+  };
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    window.removeEventListener('scroll', this.handleScrollOrResize, { capture: true } as EventListenerOptions);
+    window.removeEventListener('resize', this.handleScrollOrResize);
+    zIndexRegistry.unregister(this);
+  }
+}

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts

@@ -7,11 +7,11 @@ import {
   css,
   cssManager,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { cssGeistFontFamily } from '../../00fonts.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import { DeesInputDropdownPopup } from './dees-input-dropdown-popup.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -46,27 +46,16 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   })
   accessor enableSearch: boolean = true;
 
-  @state()
-  accessor opensToTop: boolean = false;
-
-  @state()
-  accessor filteredOptions: { option: string; key: string; payload?: any }[] = [];
-
-  @state()
-  accessor highlightedIndex: number = 0;
-
   @state()
   accessor isOpened = false;
 
-  @state()
-  accessor searchValue: string = '';
+  private popupInstance: DeesInputDropdownPopup | null = null;
 
   public static styles = [
     themeDefaultStyles,
     ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       * {
         box-sizing: border-box;
       }
@@ -137,137 +126,6 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       .selectedBox.open::after {
         transform: translateY(-50%) rotate(180deg);
       }
-
-      .selectionBox {
-        will-change: transform, opacity;
-        pointer-events: none;
-        transition: all 0.15s ease;
-        opacity: 0;
-        transform: translateY(-8px) scale(0.98);
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
-        min-height: 40px;
-        max-height: 300px;
-        overflow: hidden;
-        border-radius: 6px;
-        position: absolute;
-        user-select: none;
-        margin-top: 4px;
-        z-index: 50;
-        left: 0;
-        right: 0;
-      }
-      
-      .selectionBox.top {
-        bottom: calc(100% + 4px);
-        top: auto;
-        margin-top: 0;
-        margin-bottom: 4px;
-        transform: translateY(8px) scale(0.98);
-      }
-      
-      .selectionBox.bottom {
-        top: 100%;
-      }
-
-      .selectionBox.show {
-        pointer-events: all;
-        transform: translateY(0) scale(1);
-        opacity: 1;
-      }
-
-      /* Options container */
-      .options-container {
-        max-height: 250px;
-        overflow-y: auto;
-        padding: 4px;
-      }
-
-      /* Options */
-      .option {
-        transition: all 0.15s ease;
-        line-height: 32px;
-        padding: 0 8px;
-        border-radius: 4px;
-        margin: 2px 0;
-        cursor: pointer;
-        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
-      }
-
-      .option.highlighted {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-      }
-
-      .option:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-      }
-
-      /* No options message */
-      .no-options {
-        padding: 8px;
-        text-align: center;
-        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        font-style: italic;
-      }
-
-      /* Search */
-      .search {
-        padding: 4px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        margin-bottom: 4px;
-      }
-      
-      .search.bottom {
-        border-bottom: none;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        margin-bottom: 0;
-        margin-top: 4px;
-      }
-      
-      .search input {
-        display: block;
-        width: 100%;
-        height: 32px;
-        padding: 0 8px;
-        background: transparent;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 4px;
-        color: inherit;
-        font-size: 14px;
-        font-family: inherit;
-        outline: none;
-        transition: border-color 0.15s ease;
-      }
-
-      .search input::placeholder {
-        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
-      }
-
-      .search input:focus {
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
-      }
-
-      /* Scrollbar styling */
-      .options-container::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      .options-container::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      .options-container::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 4px;
-      }
-
-      .options-container::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-      }
     `,
   ];
 
@@ -284,68 +142,26 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
           >
             ${this.selectedOption?.option || 'Select an option'}
           </div>
-          <div class="selectionBox ${this.isOpened ? 'show' : ''} ${this.opensToTop ? 'top' : 'bottom'}">
-            ${this.enableSearch
-              ? html`
-                  <div class="search">
-                    <input 
-                      type="text" 
-                      placeholder="Search options..." 
-                      .value="${this.searchValue}"
-                      @input="${this.handleSearch}"
-                      @click="${(e: Event) => e.stopPropagation()}"
-                      @keydown="${this.handleSearchKeydown}"
-                    />
-                  </div>
-                `
-              : null}
-            <div class="options-container">
-              ${this.filteredOptions.length === 0
-                ? html`<div class="no-options">No options found</div>`
-                : this.filteredOptions.map((option, index) => {
-                    const isHighlighted = this.highlightedIndex === index;
-                    return html`
-                      <div
-                        class="option ${isHighlighted ? 'highlighted' : ''}"
-                        @click="${() => this.updateSelection(option)}"
-                        @mouseenter="${() => this.highlightedIndex = index}"
-                      >
-                        ${option.option}
-                      </div>
-                    `;
-                  })
-              }
-            </div>
-          </div>
         </div>
       </div>
     `;
   }
 
-  async connectedCallback() {
-    super.connectedCallback();
-    this.handleClickOutside = this.handleClickOutside.bind(this);
-  }
-
   firstUpdated() {
     this.selectedOption = this.selectedOption || null;
-    this.filteredOptions = this.options;
   }
 
   updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
-    
-    if (changedProperties.has('options')) {
-      this.filteredOptions = this.options;
+
+    if (changedProperties.has('options') && this.popupInstance && this.isOpened) {
+      this.popupInstance.updateOptions(this.options);
     }
   }
 
   public async updateSelection(selectedOption: { option: string; key: string; payload?: any }) {
     this.selectedOption = selectedOption;
-    this.isOpened = false;
-    this.searchValue = '';
-    this.filteredOptions = this.options;
-    this.highlightedIndex = 0;
+    this.closePopup();
 
     this.dispatchEvent(
       new CustomEvent('selectedOption', {
@@ -353,92 +169,95 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
         bubbles: true,
       })
     );
-    
+
     this.changeSubject.next(this);
   }
 
-  private handleClickOutside = (event: MouseEvent) => {
-    const path = event.composedPath();
-    if (!path.includes(this)) {
-      this.isOpened = false;
-      this.searchValue = '';
-      this.filteredOptions = this.options;
-      document.removeEventListener('click', this.handleClickOutside);
-    }
-  };
-  
   public async toggleSelectionBox() {
-    this.isOpened = !this.isOpened;
-    
     if (this.isOpened) {
-      // Check available space and set position
-      const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement;
-      const rect = selectedBox.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const spaceAbove = rect.top;
-      
-      // Determine if we should open upwards
-      this.opensToTop = spaceBelow < 300 && spaceAbove > spaceBelow;
-      
-      // Focus search input if present
-      await this.updateComplete;
-      const searchInput = this.shadowRoot!.querySelector('.search input') as HTMLInputElement;
-      if (searchInput) {
-        searchInput.focus();
-      }
-      
-      // Add click outside listener
-      setTimeout(() => {
-        document.addEventListener('click', this.handleClickOutside);
-      }, 0);
-    } else {
-      // Cleanup
-      this.searchValue = '';
-      this.filteredOptions = this.options;
-      document.removeEventListener('click', this.handleClickOutside);
+      this.closePopup();
+      return;
+    }
+
+    this.isOpened = true;
+
+    // Get trigger position
+    const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement;
+    const rect = selectedBox.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const opensToTop = spaceBelow < 300 && spaceAbove > spaceBelow;
+
+    // Create popup if needed
+    if (!this.popupInstance) {
+      this.popupInstance = new DeesInputDropdownPopup();
+    }
+
+    // Configure popup
+    this.popupInstance.options = this.options;
+    this.popupInstance.enableSearch = this.enableSearch;
+    this.popupInstance.opensToTop = opensToTop;
+    this.popupInstance.triggerRect = rect;
+    this.popupInstance.ownerComponent = this;
+
+    // Listen for popup events
+    this.popupInstance.addEventListener('option-selected', this.handleOptionSelected);
+    this.popupInstance.addEventListener('close-request', this.handleCloseRequest);
+    this.popupInstance.addEventListener('reposition-request', this.handleRepositionRequest);
+
+    // Show popup (creates window layer, appends to document.body)
+    await this.popupInstance.show();
+
+    // Focus search input
+    if (this.enableSearch) {
+      await this.popupInstance.focusSearchInput();
     }
   }
 
-  private handleSearch(event: Event): void {
-    const searchTerm = (event.target as HTMLInputElement).value;
-    this.searchValue = searchTerm;
-    const searchLower = searchTerm.toLowerCase();
-    this.filteredOptions = this.options.filter((option) =>
-      option.option.toLowerCase().includes(searchLower)
-    );
-    this.highlightedIndex = 0;
-  }
+  private closePopup(): void {
+    this.isOpened = false;
 
-  private handleKeyDown(event: KeyboardEvent): void {
-    const key = event.key;
-    const maxIndex = this.filteredOptions.length - 1;
-
-    if (key === 'ArrowDown') {
-      event.preventDefault();
-      this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
-    } else if (key === 'ArrowUp') {
-      event.preventDefault();
-      this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
-    } else if (key === 'Enter') {
-      event.preventDefault();
-      if (this.filteredOptions[this.highlightedIndex]) {
-        this.updateSelection(this.filteredOptions[this.highlightedIndex]);
-      }
-    } else if (key === 'Escape') {
-      event.preventDefault();
-      this.isOpened = false;
+    if (this.popupInstance) {
+      this.popupInstance.removeEventListener('option-selected', this.handleOptionSelected);
+      this.popupInstance.removeEventListener('close-request', this.handleCloseRequest);
+      this.popupInstance.removeEventListener('reposition-request', this.handleRepositionRequest);
+      this.popupInstance.hide();
     }
   }
 
-  private handleSearchKeydown(event: KeyboardEvent): void {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
-      this.handleKeyDown(event);
+  private handleOptionSelected = (event: Event): void => {
+    const detail = (event as CustomEvent).detail;
+    this.updateSelection(detail);
+  };
+
+  private handleCloseRequest = (): void => {
+    this.closePopup();
+  };
+
+  private handleRepositionRequest = (): void => {
+    if (!this.popupInstance || !this.isOpened) return;
+
+    const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement;
+    if (!selectedBox) return;
+
+    const rect = selectedBox.getBoundingClientRect();
+
+    // Close if trigger scrolled off-screen
+    if (rect.bottom < 0 || rect.top > window.innerHeight) {
+      this.closePopup();
+      return;
     }
-  }
+
+    // Update position
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    this.popupInstance.opensToTop = spaceBelow < 300 && spaceAbove > spaceBelow;
+    this.popupInstance.triggerRect = rect;
+  };
 
   private handleSelectedBoxKeydown(event: KeyboardEvent) {
     if (this.disabled) return;
-    
+
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       this.toggleSelectionBox();
@@ -450,7 +269,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
     } else if (event.key === 'Escape') {
       event.preventDefault();
       if (this.isOpened) {
-        this.isOpened = false;
+        this.closePopup();
       }
     }
   }
@@ -462,9 +281,15 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   public setValue(value: { option: string; key: string; payload?: any }): void {
     this.selectedOption = value;
   }
-  
+
   async disconnectedCallback() {
     await super.disconnectedCallback();
-    document.removeEventListener('click', this.handleClickOutside);
+    if (this.popupInstance) {
+      this.popupInstance.removeEventListener('option-selected', this.handleOptionSelected);
+      this.popupInstance.removeEventListener('close-request', this.handleCloseRequest);
+      this.popupInstance.removeEventListener('reposition-request', this.handleRepositionRequest);
+      this.popupInstance.hide();
+      this.popupInstance = null;
+    }
   }
-}
+}

ts_web/elements/00group-input/dees-input-dropdown/index.ts

@@ -1 +1,2 @@
 export * from './dees-input-dropdown.js';
+export * from './dees-input-dropdown-popup.js';

ts_web/elements/00group-input/dees-input-fileupload/component.ts

@@ -3,6 +3,7 @@ import { demoFunc } from './demo.js';
 import { fileuploadStyles } from './styles.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 {
   customElement,
@@ -75,14 +76,13 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
           .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"
@@ -94,32 +94,23 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
             @change=${this.handleFileInputChange}
             tabindex="-1"
           />
-          <div class="dropzone__body">
-            <div class="dropzone__icon">
-              ${this.isLoading
-                ? html`<span class="dropzone__loader" aria-hidden="true"></span>`
-                : html`<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) => html`<span>${entry}</span>`)}
+          <div slot="header" class="dropzone-header">
+            ${this.isLoading
+              ? html`<span class="dropzone-loader" aria-hidden="true"></span>`
+              : html`<dees-icon icon="lucide:Upload"></dees-icon>`}
+            <span class="dropzone-title">Drop files here or</span>
+            <button
+              type="button"
+              class="dropzone-browse"
+              @click=${(e: MouseEvent) => { e.stopPropagation(); this.openFileSelector(); }}
+              ?disabled=${this.disabled}
+            >browse</button>
           </div>
           ${this.renderFileList()}
-        </div>
+          <div slot="footer" class="dropzone-footer">
+            ${metaEntries.map((entry) => html`<span class="meta-chip">${entry}</span>`)}
+          </div>
+        </dees-tile>
         ${this.validationMessage
           ? html`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>`
           : html``}
@@ -129,20 +120,21 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
 
   private renderFileList(): TemplateResult {
     if (this.value.length === 0) {
-      return html``;
+      return html`
+        <div class="file-list-empty">
+          <dees-icon icon="lucide:FileStack"></dees-icon>
+          <span>No files selected</span>
+        </div>
+      `;
     }
 
     return html`
       <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
-            ? html`<button type="button" class="file-list__clear" @click=${this.handleClearAll}>Clear ${this.value.length > 1 ? 'all' : ''}</button>`
-            : html``}
-        </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>
     `;
   }
@@ -193,21 +185,14 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
     if (this.disabled) {
       return;
     }
-    // Don't open file selector if clicking on the browse button or file list
-    if ((event.target as HTMLElement).closest('.dropzone__browse, .file-list')) {
+    // Don't open file selector when clicking file list items or actions
+    const target = event.target as HTMLElement;
+    if (target.closest('.file-list, .dropzone-header, .dropzone-footer')) {
       return;
     }
     this.openFileSelector();
   };
 
-  private handleBrowseClick = (event: MouseEvent) => {
-    if (this.disabled) {
-      return;
-    }
-    event.stopPropagation(); // Stop propagation to prevent double trigger
-    this.openFileSelector();
-  };
-
   private handleDropzoneKeydown = (event: KeyboardEvent) => {
     if (this.disabled) {
       return;
@@ -280,7 +265,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   }
 
   private rebindInteractiveElements(): void {
-    const newDropArea = this.shadowRoot?.querySelector('.dropzone') as HTMLElement | null;
+    const newDropArea = this.shadowRoot?.querySelector('dees-tile') as HTMLElement | null;
 
     if (newDropArea !== this.dropArea) {
       this.detachDropListeners();

ts_web/elements/00group-input/dees-input-fileupload/styles.ts

@@ -1,201 +1,158 @@
 import { css, cssManager } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const fileuploadStyles = [
-  cssManager.defaultStyles,
+  themeDefaultStyles,
   ...DeesInputBase.baseStyles,
+  cssManager.defaultStyles,
   css`
     :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;
+    /* ── Tile integration ── */
+    dees-tile {
+      cursor: default;
     }
 
-    .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%)')};
+    dees-tile:hover::part(outer) {
+      border-color: var(--dees-color-border-strong);
     }
 
-    .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.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--has-files {
-      background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 11%)')};
-    }
-
-    .dropzone--disabled {
+    :host([disabled]) dees-tile {
       opacity: 0.6;
-      pointer-events: none;
       cursor: not-allowed;
+      pointer-events: none;
     }
 
-    .dropzone__body {
+    /* ── Header slot: sleek toolbar ── */
+    .dropzone-header {
       display: flex;
       align-items: center;
-      gap: 16px;
+      gap: 8px;
+      height: 32px;
+      padding: 0 12px;
     }
 
-    .dropzone__icon {
-      width: 48px;
-      height: 48px;
-      border-radius: 16px;
-      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;
+    .dropzone-header dees-icon {
+      width: 14px;
+      height: 14px;
+      color: var(--dees-color-text-muted);
     }
 
-    .dropzone__icon dees-icon {
-      font-size: 22px;
-    }
-
-    .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;
@@ -204,16 +161,15 @@ export const 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%;
@@ -223,14 +179,14 @@ export const 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;
@@ -241,8 +197,8 @@ export const 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 {
@@ -250,39 +206,40 @@ export const 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 {
@@ -298,9 +255,28 @@ export const 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;
     }
 

ts_web/elements/00theme.ts

@@ -253,6 +253,7 @@ export const themeDefaultStyles: CSSResult = css`
     --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