feat(dees-input-list): allow freeform entries alongside candidate suggestions in dees-input-list

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-05 - 3.61.0 - feat(dees-input-list)
+allow freeform entries alongside candidate suggestions in dees-input-list
+
+- adds an allowFreeform option so Enter can add values that do not exactly match the candidate list
+- shows check and question-mark indicators to distinguish known candidates from custom freeform items
+- updates the component demo with a freeform-plus-candidates example
+
 ## 2026-04-05 - 3.60.0 - feat(dees-input-list)
 add candidate autocomplete with tab completion and payload retrieval
 

ts_web/00_commitinfo_data.ts

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

@@ -322,7 +322,25 @@ export const demoFunc = () => html`
         ></dees-input-list>
       </dees-panel>
 
-      <dees-panel .title=${'11. Empty State'} .subtitle=${'How the component looks with no items'}>
+      <dees-panel .title=${'11. Freeform + Candidates'} .subtitle=${'Allow adding items not in the candidate list (shown with a question mark)'}>
+        <dees-input-list
+          .label=${'Tags'}
+          .placeholder=${'Type a tag... (freeform allowed)'}
+          .allowFreeform=${true}
+          .candidates=${[
+            { viewKey: 'bug', payload: { color: 'red' } },
+            { viewKey: 'feature', payload: { color: 'blue' } },
+            { viewKey: 'docs', payload: { color: 'green' } },
+            { viewKey: 'refactor', payload: { color: 'purple' } },
+            { viewKey: 'performance', payload: { color: 'orange' } },
+            { viewKey: 'security', payload: { color: 'red' } },
+          ]}
+          .value=${['bug', 'my-custom-tag', 'feature']}
+          .description=${'Known tags get a checkmark, custom tags get a question mark. Tab to complete, Enter to add freeform.'}
+        ></dees-input-list>
+      </dees-panel>
+
+      <dees-panel .title=${'12. Empty State'} .subtitle=${'How the component looks with no items'}>
         <dees-input-list
           .label=${'Your Ideas'}
           .placeholder=${'Share your ideas...'}

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

@@ -54,6 +54,9 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
   @property({ type: Array })
   accessor candidates: IListCandidate[] = [];
 
+  @property({ type: Boolean })
+  accessor allowFreeform: boolean = false;
+
   @property({ type: String })
   accessor validationText: string = '';
 
@@ -184,6 +187,20 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
 
+      .candidate-check {
+        width: 14px;
+        height: 14px;
+        color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        flex-shrink: 0;
+      }
+
+      .candidate-unknown {
+        width: 14px;
+        height: 14px;
+        color: ${cssManager.bdTheme('hsl(45 93% 47%)', 'hsl(45 93% 58%)')};
+        flex-shrink: 0;
+      }
+
       .drag-handle {
         display: flex;
         align-items: center;
@@ -442,6 +459,14 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
                   </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>
+                  `}
+                ` : ''}
+
                 <div class="item-content">
                   ${this.editingIndex === index ? html`
                     <input
@@ -589,12 +614,18 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
     if (e.key === 'Enter' && this.inputValue.trim()) {
       e.preventDefault();
       if (this.candidates.length > 0) {
-        // In candidate mode, only allow exact matches
+        // Try exact candidate match first
         const match = this.candidates.find(
           c => c.viewKey.toLowerCase() === this.inputValue.trim().toLowerCase()
         );
         if (match) {
           this.selectCandidate(match);
+        } else if (this.allowFreeform) {
+          // Allow freeform entry (won't have a candidate checkmark)
+          this.ghostText = '';
+          this.currentCandidateIndex = -1;
+          this.matchingCandidates = [];
+          this.addItem();
         }
         return;
       }