@design.estate/dees-catalog 3.61.0 → 3.61.2

package/dist_watch/bundle.js

@@ -108515,6 +108515,7 @@ var init_dees_icon = __esm({
         justify-content: center;
         line-height: 1;
         vertical-align: middle;
+        pointer-events: none;
       }
 
       /* Improve rendering performance */
@@ -156495,7 +156496,7 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
       <div class="input-wrapper">
         ${this.label ? b2`<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, index3) => b2`
               <div
@@ -156511,13 +156512,15 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
                     <dees-icon .icon=${"lucide:gripVertical"}></dees-icon>
                   </div>
                 ` : ""}
-                
+
                 ${this.candidates.length > 0 ? b2`
                   ${this.candidates.some((c11) => c11.viewKey === item) ? b2`
                     <dees-icon class="candidate-check" .icon=${"lucide:check"}></dees-icon>
                   ` : b2`
                     <dees-icon class="candidate-unknown" .icon=${"lucide:helpCircle"}></dees-icon>
                   `}
+                ` : !this.sortable || this.disabled ? b2`
+                  <dees-icon class="item-bullet" .icon=${"lucide:dot"}></dees-icon>
                 ` : ""}
 
                 <div class="item-content">
@@ -156565,7 +156568,7 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
           </div>
           
           ${!this.disabled && (!this.maxItems || this.value.length < this.maxItems) ? b2`
-            <div class="add-item-container">
+            <div slot="footer" class="add-item-container">
               <div class="autocomplete-wrapper">
                 ${this.ghostText ? b2`
                   <span class="ghost-text">
@@ -156591,7 +156594,7 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
               </button>
             </div>
           ` : ""}
-        </div>
+        </dees-tile>
 
         ${this.validationText ? b2`
           <div class="validation-message">${this.validationText}</div>
@@ -156696,12 +156699,14 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
     this.currentCandidateIndex = -1;
     this.matchingCandidates = [];
     this.validationText = "";
-    const input = this.shadowRoot?.querySelector(".add-input");
-    if (input) {
-      input.value = "";
-      input.focus();
-    }
     this.emitChange();
+    this.updateComplete.then(() => {
+      const input = this.shadowRoot?.querySelector(".add-input");
+      if (input) {
+        input.value = "";
+        input.focus();
+      }
+    });
   }
   /**
    * Get the full candidate object for an item by its viewKey.
@@ -156732,12 +156737,14 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
     this.value = [...this.value, trimmedValue];
     this.inputValue = "";
     this.validationText = "";
-    const input = this.shadowRoot?.querySelector(".add-input");
-    if (input) {
-      input.value = "";
-      input.focus();
-    }
     this.emitChange();
+    this.updateComplete.then(() => {
+      const input = this.shadowRoot?.querySelector(".add-input");
+      if (input) {
+        input.value = "";
+        input.focus();
+      }
+    });
   }
   startEdit(index3) {
     this.editingIndex = index3;
@@ -157085,26 +157092,19 @@ __publicField(_DeesInputList, "styles", [
         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;
-      }
-
-      .list-container:hover:not(.disabled) {
-        border-color: ${cssManager.bdTheme("hsl(0 0% 79.8%)", "hsl(0 0% 20.9%)")};
+      dees-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
       }
 
-      .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 {
@@ -157117,8 +157117,8 @@ __publicField(_DeesInputList, "styles", [
         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;
@@ -157129,7 +157129,7 @@ __publicField(_DeesInputList, "styles", [
       }
 
       .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 */
@@ -157167,6 +157167,14 @@ __publicField(_DeesInputList, "styles", [
         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;
@@ -157269,8 +157277,6 @@ __publicField(_DeesInputList, "styles", [
         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 {