From dede3216fbc3db281fba61416f934ea9f3607b4e Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Sun, 5 Apr 2026 11:08:40 +0000
Subject: [PATCH] fix(dees-input-list): align list input with dees-tile styling
 and improve item affordances

---
 changelog.md                                  |  7 +++
 ts_web/00_commitinfo_data.ts                  |  2 +-
 .../dees-input-list/dees-input-list.ts        | 44 ++++++++++---------
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/changelog.md b/changelog.md
index 6ae3c9b..946a663 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-05 - 3.61.1 - fix(dees-input-list)
+align list input with dees-tile styling and improve item affordances
+
+- wrap the list in dees-tile with a dynamic item count heading and move the add-item controls into the tile footer
+- replace custom container styling with shared tile and theme tokens for hover, focus, row, and disabled states
+- show a bullet icon for non-sortable or disabled items when no candidate state icon is present
+
 ## 2026-04-05 - 3.61.0 - feat(dees-input-list)
 allow freeform entries alongside candidate suggestions in dees-input-list
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 66789e8..a1ab1c4 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.61.0',
+  version: '3.61.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
diff --git a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
index 3a2d883..4dd7a4e 100644
--- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
+++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
@@ -9,6 +9,7 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import { demoFunc } from './dees-input-list.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -119,26 +120,19 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         width: 100%;
       }
 
-      .list-container {
-        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%)')};
-        border-radius: 6px;
-        overflow: hidden;
-        transition: all 0.15s ease;
+      dees-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
       }
 
-      .list-container:hover:not(.disabled) {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-      }
-
-      .list-container:focus-within {
+      dees-tile:focus-within::part(outer) {
         border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
         box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
       }
 
-      .list-container.disabled {
+      :host([disabled]) dees-tile {
         opacity: 0.6;
         cursor: not-allowed;
+        pointer-events: none;
       }
 
       .list-items {
@@ -151,8 +145,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         align-items: center;
         gap: 6px;
         padding: 6px 10px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        background: transparent;
         transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
         position: relative;
         overflow: hidden;
@@ -163,7 +157,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .list-items:not(.is-dragging) .list-item:hover:not(.disabled) {
-        background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
+        background: var(--dees-color-row-hover);
       }
 
       /* Dragging item - follows cursor */
@@ -201,6 +195,14 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         flex-shrink: 0;
       }
 
+      .item-bullet {
+        width: 14px;
+        height: 14px;
+        color: var(--dees-color-text-muted);
+        flex-shrink: 0;
+        opacity: 0.5;
+      }
+
       .drag-handle {
         display: flex;
         align-items: center;
@@ -303,8 +305,6 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         display: flex;
         gap: 6px;
         padding: 6px 10px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .add-input {
@@ -442,7 +442,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       <div class="input-wrapper">
         ${this.label ? html`<dees-label .label=${this.label} .required=${this.required}></dees-label>` : ''}
         
-        <div class="list-container ${this.disabled ? 'disabled' : ''}">
+        <dees-tile .heading="${this.value.length} item${this.value.length !== 1 ? 's' : ''}">
           <div class="list-items">
             ${this.value.length > 0 ? this.value.map((item, index) => html`
               <div
@@ -458,13 +458,15 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
                     <dees-icon .icon=${'lucide:gripVertical'}></dees-icon>
                   </div>
                 ` : ''}
-                
+
                 ${this.candidates.length > 0 ? html`
                   ${this.candidates.some(c => c.viewKey === item) ? html`
                     <dees-icon class="candidate-check" .icon=${'lucide:check'}></dees-icon>
                   ` : html`
                     <dees-icon class="candidate-unknown" .icon=${'lucide:helpCircle'}></dees-icon>
                   `}
+                ` : !this.sortable || this.disabled ? html`
+                  <dees-icon class="item-bullet" .icon=${'lucide:dot'}></dees-icon>
                 ` : ''}
 
                 <div class="item-content">
@@ -512,7 +514,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
           </div>
           
           ${!this.disabled && (!this.maxItems || this.value.length < this.maxItems) ? html`
-            <div class="add-item-container">
+            <div slot="footer" class="add-item-container">
               <div class="autocomplete-wrapper">
                 ${this.ghostText ? html`
                   <span class="ghost-text">
@@ -538,7 +540,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
               </button>
             </div>
           ` : ''}
-        </div>
+        </dees-tile>
 
         ${this.validationText ? html`
           <div class="validation-message">${this.validationText}</div>