fix(dees-input-list): refine dees-input-list spacing and simplify the add item action button

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-02 - 3.49.2 - fix(dees-input-list)
+refine dees-input-list spacing and simplify the add item action button
+
+- reduce list item, input, helper text, and empty state sizing for a more compact layout
+- replace the add action from dees-button to a native icon-only button and remove the unused button import
+- simplify add-input styling by removing bordered focus treatment and using a minimal inline input appearance
+
 ## 2026-04-01 - 3.49.1 - fix(ts_web)
 resolve TypeScript nullability and event typing issues across web components
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.49.1',
+  version: '3.49.2',
   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-list/dees-input-list.ts

@@ -9,7 +9,6 @@ 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-button/dees-button/dees-button.js';
 import { demoFunc } from './dees-input-list.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -130,13 +129,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       .list-item {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 6px;
-        padding: 12px 16px;
+        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%)')};
         transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
         position: relative;
-        overflow: hidden; /* Prevent animation from affecting scroll bounds */
+        overflow: hidden;
       }
 
       .list-item:last-of-type {
@@ -181,8 +180,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .drag-handle dees-icon {
-        width: 16px;
+        width: 14px;
-        height: 16px;
+        height: 14px;
       }
 
       .item-content {
@@ -195,15 +194,15 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       .item-text {
         flex: 1;
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        font-size: 14px;
+        font-size: 13px;
-        line-height: 20px;
+        line-height: 18px;
         word-break: break-word;
       }
 
       .item-edit-input {
         flex: 1;
-        padding: 4px 8px;
+        padding: 3px 6px;
-        font-size: 14px;
+        font-size: 13px;
         font-family: inherit;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
         border: 1px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
@@ -222,8 +221,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 28px;
+        width: 24px;
-        height: 28px;
+        height: 24px;
         border-radius: 4px;
         background: transparent;
         border: none;
@@ -262,34 +261,29 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .action-button dees-icon {
-        width: 14px;
+        width: 13px;
-        height: 14px;
+        height: 13px;
       }
 
       .add-item-container {
         display: flex;
-        gap: 8px;
+        gap: 6px;
-        padding: 12px 16px;
+        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 {
         flex: 1;
-        padding: 8px 12px;
+        padding: 4px 8px;
-        font-size: 14px;
+        font-size: 13px;
+        line-height: 18px;
         font-family: inherit;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        background: transparent;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: none;
-        border-radius: 4px;
         outline: none;
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        transition: all 0.15s ease;
+        min-width: 0;
-      }
-
-      .add-input:focus {
-        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)')};
       }
 
       .add-input::placeholder {
@@ -302,29 +296,54 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .add-button {
-        padding: 8px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .add-button:hover:not(:disabled) {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .add-button:disabled {
+        opacity: 0.3;
+        cursor: default;
+      }
+
+      .add-button dees-icon {
+        width: 14px;
+        height: 14px;
       }
 
       .empty-state {
-        padding: 32px 16px;
+        padding: 16px 10px;
         text-align: center;
         color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
-        font-size: 14px;
+        font-size: 13px;
-        font-style: italic;
       }
 
       .validation-message {
         color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-        font-size: 13px;
+        font-size: 12px;
-        margin-top: 6px;
+        margin-top: 4px;
-        line-height: 1.5;
+        line-height: 1.4;
       }
 
       .description {
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        font-size: 13px;
+        font-size: 12px;
-        margin-top: 6px;
+        margin-top: 4px;
-        line-height: 1.5;
+        line-height: 1.4;
       }
 
       /* Scrollbar styling */
@@ -429,13 +448,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
                 @keydown=${this.handleAddKeyDown}
                 ?disabled=${this.disabled}
               />
-              <dees-button
+              <button
                 class="add-button"
                 @click=${this.addItem}
                 ?disabled=${!this.inputValue.trim()}
               >
-                <dees-icon .icon=${'lucide:plus'}></dees-icon> Add
+                <dees-icon .icon=${'lucide:plus'}></dees-icon>
-              </dees-button>
+              </button>
             </div>
           ` : ''}
         </div>